template-elm-chrome-extension

A template to create Google Chrome Extensions with Elm and Webpack as the module-bundler

Technologies

Web

• ELM
• ES2015
• SASS

Module bundler: Webpack

Plugins

• clean-webpack-plugin to clean the output directory before every build
• copy-webpack-plugin to copy static resources to the output directory
• mini-css-extract-plugin to extract CSS stylesheets as a separate bundle to the output directory
• optimize-css-assets-webpack-plugin to optimize the extracted CSS
• html-webpack-plugin to inject entry-points into the startup html page to the output directory
• uglifyjs-webpack-plugin to minify JavaScript before bundling them to the output directory

Loaders

• html-loader to bundle html entry points
• style-loader to bundle CSS stylesheets
• css-loader to work with style-loader for bundling of CSS stylesheets
• sass-loader to transpile SCSS into regular CSS
• file-loader to work with other file types
• eslint-loader to run ESLint on JavaScript files
• babel-loader to perform babel transpilations with the help of supporting dependencies
• elm-webpack-loader to load elm files

Supporting dependencies

• babel-core, babel-preset-env to support babel-loader
• eslint, babel-eslint, to support eslint-loader in running ESLint to lint JavaScript files
• sass to help sass-loader with transpilation of SCSS into regular CSS
• webpack-merge to be able to use a common configuration across dev and prod
• webpack-dev-server to be able to live-reload the web-browser when run in live mode.

Commands

• npm run debug to run Webpack with development configuration.
  In this mode, Webpack generates source-maps for bundled JavaScript resources to simplify debugging of JavaScript in the web-browser.
• npm run dev to run Webpack with development configuration and keep watching for file changes within source.
  In this mode, Webpack generates source-maps for bundled JavaScript resources to simplify debugging of JavaScript in the web-browser.
• npm run live to run Webpack with development configuration and keep watching for file changes within source and reload the web-browser on every change.
  In this mode, Webpack generates source-maps for bundled JavaScript resources to simplify debugging of JavaScript in the web-browser and provides a live-development experience.
• npm run build to run Webpack with production configuration.
  In this mode, Webpack minifies the JavaScript bundles and there are no source-maps created.