A boilerplate for a single page app using webpack

So far, this is the best way I found to build files like index.html into webpack. This boilerplate handles Javascript, CSS and HTML bundling using only webpack.

The general directory structure is:

.
├── assets
│   └── images
│       └── favicon.png
├── babel.config.js
├── config
│   ├── default.json
│   └── production.json
├── index.html
├── package.json
├── README.md
├── src
│   ├── index.js
│   └── styles
│       └── index.scss
└── webpack.config.js

• Your javascript entry point is src/index.js
• Your style entry point is src/styles/index.scss

config node module is being used, this way you can define your settings under config/{NODE_ENV}.json and build your project with different settings for different environments. Just change your NODE_ENV environment variable to build your project:

# Uses 'config/default.json'
$ npm run build
# Uses 'config/default.json' overwritten by 'config/production.json'
$ NODE_ENV=production npm run build
# Uses 'config/default.json' overwritten by 'config/staging.json'
$ NODE_ENV=staging npm run build
# Uses 'config/default.json' overwritten by 'config/anything.json'
$ NODE_ENV=anything npm run build

All config variables are available under the CONFIG global:

# config/default.json
{
  "MY_API_URL": "https://nihey.org"
}

// => "https://nihey.org"
console.log(CONFIG.MY_API_URL)

This boilerplate includes the following loaders:

• babel-loader: Enable ES6 features.
• file-loader: Call require for binary files.
• img-loader: Optimize image compression.
• json-loader: Call require for json files.
• scss-loader: Style your pages with scss.
• style-loader: Add exports of a module as style to DOM.

It also includes the following plugins:

• extract-text-webpack-plugin: Extract css text from bundled styles.

This code is released under CC0 (Public Domain)