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.