01: webpack config

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const pjson = require('./package.json');
const WorkboxPlugin = require('workbox-webpack-plugin');

// Package version should be good enough if we want
// to destinguish between new worker versions.
// Some will use only `sw.js`. That's completely fine.
const workerName = `sw-${pjson.version}}.js`;

module.exports = (env, argv) => {

  const config = {

    devServer: {
      allowedHosts: ['localhost'],
      historyApiFallback: true,
      hot: true,
      // Service Workers are able to run with VALID certificates.
      https: true,
      port: 443,
      public: 'localhost:443',
      host: process.env.HOST || '0.0.0.0'
    },

    plugins: [
      // WORKER_NAME will be used in our application.
      new webpack.DefinePlugin({
        WORKER_NAME: JSON.stringify(workerName)
      }),
      // Manifest file is used to cache and differentioate between asset versions.
      new WorkboxPlugin.InjectManifest({
        swSrc: path.resolve(__dirname, './workers/sw.js'),
        swDest: workerName
      })
    ],
  };

  return config;
};