Webpack boilerplate

A highly scalable and simple webpack boilerplate for client apps.

Older versions of this boilerplate with webpack v1, webpack v2, webpack v3

Quick start

Create a .env file. Then:

# install dependencies
$ yarn

# serve with hot reload
$ yarn build:watch
# or
$ yarn dev

# serve with hot reload and inspect webpack dev server
# https://nodejs.org/api/debugger.html#debugger_v8_inspector_integration_for_node_js
$ yarn dev:inspect

# build for production with minification
$ yarn build

# run tests
$ yarn test

# run tests and watch
$ yarn test:watch

# run test coverage report
$ yarn test:coverage

NOTE: For disable source map or bundle analyzer report (both on production only) and browser sync (on development), just remove it from .env file.

Documentation

Features

• HMR
• CSS < PostCSS < SCSS
• JS < ES2015 < ESLint < Prettier
• Browser Sync
• Images and fonts well configured.
• Long term caching.
• Tree shaking.
• Tests with Jest.

Boilerplate structure

.
├── .editorconfig             # editor config
├── .env.defaults             # env default variables
├── .env.schema               # env variables schema (for validation)
├── .eslintignore             # eslint ignore config
├── .eslintrc                 # eslint config
├── .gitignore                # git ignore config
├── .nvmrc                    # nvm config
├── .prettierrc               # prettier config
├── babel.config.js           # babel config
├── package.json              # https://docs.npmjs.com/files/package.json
├── postcss.config.js         # postcss config
├── README.md                 # this file
├── webpack.config.js         # webpack config
├── yarn.lock                 # https://yarnpkg.com/en/docs/yarn-lock
├── coverage/                 # jest coverage output
├── dist/                     # webpack build output
├── test/                     # jest config
├── lib/                      # future external packages
├── public/                   # files that will be copied to dist
└── src/                      # source code
    ├── app/
    │   └── main.js           # app entry file
    ├── styles/
    │   └── main.scss         # main scss file
    └── index.html            # template used by html-webpack-plugin

Troubleshooting

• Module build failed: Error: ENOENT: no such file or directory, scandir

Rebuild node-sass

$ npm rebuild node-sass

TODO