Webpack Boilerplate

A general boilerplate for apps that use webpack. Just for tinkering really.

Usage

Fork the repo or download a ZIP of the project, and then use npm i to install.

Included tools

Tool	What it does
Webpack	The build tool
Webpack Dev Server	Build tool httpd for serving during development
Webpack HTML	Automatically populates index.html with JS and CSS files
Webpack Copy	Copies files from assets to build directory
Extract Text Plugin	Pulls out CSS and SCSS in to separate files
Webpack Subresource Integrity	Adds subresource hashs on build
CSS Loader + Style Loader	Loads CSS files from imports
SASS Loader + node-sass	Loads and compiles SCSS files from imports
CSSComb + csscomb-loader	Makes CSS rules order consistent
Stylelint	Lints SCSS and CSS files for coding style errors
ESLint	Lint JS code
ESLint Airbnb	Eslint rules for airbnb style
Worker Loader	Loads imports as Worker scripts (eg window.worker())
dotenv-webpack	Makes environment vars from a .env file available
Husky	Runs NPM scripts as git hooks
lint-staged	lint-staged to lint files before they're commited

What isn't included

Notable things missing from the boilerplate are any sort of framework or commonly used libraries. If you want to use a framework then adding one should be a simple matter of using NPM to install it and (hopefully) it'll work right away. However, if it doesn't add an issue and I'll see if there's a fix.

Using three.js

Three.js is awesome and I highly recommend it, but it's not going to work right away. The reason is because three.js includes some glsl shaders that webpack thinks are JavaScript, and things break. It's not hard to fix though - you just need to add raw-loader to include the shaders as raw text.

Install the loader using npm i raw-loader, and then add the following to the module rules section of the webpack.config.js file.

module: {
    rules: [
        {
            test: /\.(glsl|frag|vert)$/,
            use: 'raw-loader'
        },
    ]
}

That's it. Now three.js should work.

JSDoc in ESLint

The .eslintrc config that comes with this Webpack Boilerplate requires JSDoc blocks ahead of classes and functions. Either turn it off if you don't use JSDoc, or use Document This for VS Code to add doc blocks easily.