< Back to portfolio

Boilerplate JS

Tech stack: JavaScript, Webpack, Babel, other loaders and plugins for webpack

Boilerplate and configuration for a beginning front end JavaScript project.

Includes configuration for things like Webpack, Babel, sourcemaps, minification, SCSS, development server, auto-generated index.html file, code-splitting, caching, preloading, CSS extraction into a separate file, and more.

Code repository

webpack logo

Includes configuration for:

  • Webpack.
  • Babel.
  • Sourcemaps (devtool from webpack).
  • JS minification (comes with webpack).
  • Scss (sass-loader).
  • Development server (devServer from webpack).
  • Deletes the dist directory before every new build (CleanWebpackPlugin)..
  • Auto-generated index.html file (HtmlWebpackPlugin).
  • Code-splitting (webpack configuration).
    • No duplication in chunks (optimization: splitChunks option for webpack).
    • node_module imports separated out in their own vendor file.
  • Caching: Filenames include the contenthash.
  • Enabled preloading for js code (PreloadWebpackPlugin).
  • CSS extraction into a separate file (mini-css-extract-plugin).
  • ESLint for JS. Emits errors so it does not crash builds.
  • PostCSS with
    • CSSNano for minification
    • Autoprefixer
    • CSS declaration sorter for sorting CSS declarations alphabetically, resulting in a smaller file size after gZip.
  • CSS linting with stylelint-webpack-plugin and the standard configuration.
  • Separate webpack configuration files for production, development and common.
  • Jest for unit testing.

There is also a branch for React with configuration for:

  • Enzyme (for React testing).
  • CSS modules for scoping CSS.

< Back to portfolio