template-chrome-extension-webpack

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

Technologies

Web

• ES2015
• Less CSS

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
• extract-text-webpack-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
• less-loader to transpile Less CSS 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

Supporting dependencies

• babel-core, babel-preset-env to support babel-loader
• eslint, babel-eslint, eslint-config-myterminal, eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y and eslint-plugin-react to support eslint-loader in running ESLint to lint JavaScript files
• less to help less-loader with transpilation of Less CSS into regular CSS
• effortless-css to provide Less CSS mixins
• 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 develop 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.