webpack-boiler v0.5.0

Webpack Boilerplate

Opinionated Webpack configuration boilerplate. Great for easily configuring React or vanilla Progressive Web Apps.

Features

• Babel
• React
• Typescript
• Hot Reloading (with react-hot-loader)
• Sass and SCSS
• Web App Manifest and service worker
• Web workers
• Minified JS, CSS, & HTML
• Cross-browser compatability with browserlist
• HTML templates (Jade / Pug)

Install

npm install --save-dev webpack-boiler
# If you want to use React:
npm install --save react react-dom react-hot-loader

Usage

In your project root, create the file webpack.config.js containing:

module.exports = require('webpack-boiler')({
  react: true,
  pages: [
    {
      title: 'Hello World!',
    },
  ],
});

This defines a webpack configuration with default entry point: <project_root>/src/index.js

(NOTE: Only source files in the src directory will be read!)

To develop and bundle your app, add the following commands to your package.json's scripts:

• Development (your project will hot-reload at http://localhost:8080):

"dev": "cross-env NODE_ENV=development webpack serve"

• Production Build (your project will build to the ./dist directory):

"build": "cross-env NODE_ENV=production webpack"

You can also view a simple example here.

API

webpackBoiler([config])

Returns: Object - webpackConfigObject

var webpackBoiler = require('webpack-boiler');
var webpackConfigObject = webpackBoiler({
  /* config */
});

Config Object

All config parameters are optional

Manifest

To truly create a Progressive Web App, you need to provide an object to the manifest config parameter. This will produce a manifest.json file as well as a service worker (sw.js) that caches the files on your website (using offline-plugin).

Custom Templates

Set the relative path to a custom pug template in the template config parameter. I recommend to structure the custom template like so:

example_template.pug

// Extend our `pug` template (Path may differ depending on example_template.pug's location)
extends ./node_modules/webpack-boiler/template.pug

// Put your content in a `block` with the name 'page_content'
block page_content
  h1 Here's the custom content!
  <p>You can write in the Jade/Pug style or in HTML</p>

Cross-browser compatability

Javascript and CSS cross-browser compatability is determined by browserlist and executed by @babel/preset-env and postcss-preset-env respectively. Browserlist provides sensible defaults but you can refer to their docs for customization options.

Web Workers

Create Web Workers using the worker-loader plugin. A worker is any source file ending in .worker.js or imported using worker-loader.

Example:

import Foo from './Foo.worker.js';
// or
import Bar from 'worker-loader!./Bar.js';

Default (Opinionated) Behaviors

• Source files must be in a directory named src
• Importing CSS into your source code results in an extracted .css file (using mini-css-extract-plugin)
• CSS and JS bundle filenames are appended with the hash of that file e.g. index.0435m918429fjsaa832l.js
• Files in <project_root>/public are automatically copied to the bundle output (and retain their folder structure)
• Images imported in your source code are placed in an assets directory in your bundle
• I suggest providing a .ico or .png favicon file with size 192x192 (you can include additional sizes in the .ico file)

DISCLAIMER

This package is still in development and is constantly changing. Please report discrepencies to Github issues.