boilerplate-webpack-babel

Boilerplate for ES6 project with Webpack, Babel and Karma

This boilerplates provides:

• ☑︎ ES6 through Babel
• ☑︎ Webpack modularization
• ☑︎ JS code minification
• ☑︎ JS map files
• JS polyfills
• JS code splitting (and arbitrary injection)
• JS testing via mocha + karma
• JS code coverage
• ☑︎ JS code linting
• HTML code generation via templates
• ☑︎ CSS autoprefixer for compatibility
• ☑︎ CSS generation from .less, .scss and .sass files
• ☑︎ CSS minification
• ☑︎ CSS map files
• ☑︎ Images loader via file-loader and url-loader
• ☑︎ Hot Module Replacement for development

Development Setup

# install dependencies
$ yarn

# dev mode (start server with hot module replacement)
$ yarn start

# test
$ yarn test

# production build
$ yarn build

Basic Folder Structure

• coverage/: This folder is created automatically when running the tests. Not included in the git repository
• build/: Here's the code generated by the build command. Not included in the git repository
• public/: Static files to use in production. This files and folders will be copied directly to build when the build is done.
• src/: Project source code.
  • styles/: less/sass files to use for generating css.
  • js/: Source files of the JavaScript code.
  • html/ HTML templates to generate static html through handlebars.
• test/:
  • specs/: List of unit tests for the project.
• scripts/: Needed scripts used for OPS will be here.
• webpack/: Files with detailed configurations loaded by the base webpack.config.js.
• karma.conf.js: Configuration for Karma execution.
• postcss.config.js: Configuration for the postcss webpack plugin.
• webpack.config.js: Base Webpack configuration.
• package.json: Project package.json.
• yarn.lock: Internal file used by yarn (faster than npm).
• README.md: This file.
• .gitignore: List of ignored files for the git cvs.
• .babelrc: Configuration for Babel transpiler.
• .eslintignore: List of files to be ignored in the linting process.
• .eslintrc.js: Configuration for the linting using eslint.
• LICENSE: Text file describing the license of the project.

Building process