webpack.config.js

const CopyPlugin = require('copy-webpack-plugin');
const Critters = require('critters-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/scripts/main.js',
  output: {
    clean: true,
    filename: '[name].[contenthash].js',
    chunkFilename: '[id].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  optimization: {
    minimizer: [
      '...',
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new CopyPlugin({
      patterns: [
        { from: './src/assets', to: 'assets' },
        { from: './src/pages' },
      ]
    }),
    new HtmlWebpackPlugin({
      minify: true,
      inject: 'body',
      favicon: './src/favicon.ico',
      template: './src/index.html',
    }),

    /**
     * Compress output assets using Brotli algorithm.
     * Support - https://caniuse.com/brotli
     * https://webpack.js.org/plugins/compression-webpack-plugin/#using-brotli
     */
    new CompressionPlugin({
      algorithm: 'brotliCompress',
    }),

    /**
     * Inline critical CSS.
     * https://github.com/GoogleChromeLabs/critters
     */
    new Critters({
      pruneSource: true, // Remove inlined rules from the external stylesheet.
    }),

    /**
     * Progressive Web Application.
     * https://webpack.js.org/guides/progressive-web-application/
     * https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/
     */
    new WorkboxPlugin.GenerateSW({
      skipWaiting: true,
      clientsClaim: true,

      /**
       * Pre-caching with Workbox:
       * https://developer.chrome.com/docs/workbox/precaching-with-workbox/
       * 
       * Pre-caching dos and don'ts:
       * https://developer.chrome.com/docs/workbox/precaching-dos-and-donts/
       */
      additionalManifestEntries: [
        'contact/', // Contact page will be pre-cached.
      ],

      // Pre-cache CSS and JS files generated by webpack before activating the service worker.
      manifestTransforms: [
        manifestEntries => ({
          manifest: manifestEntries.filter(entry => /.(css|js)$/.test(entry.url)),
        })
      ],

      // Configure which requests should be intercepted and how to handle them.
      runtimeCaching: [
        {
          urlPattern: ({ request }) => request.destination === 'document',
          handler: 'StaleWhileRevalidate',
          options: {
            cacheName: 'pages',
          },
        },
        {
          urlPattern: ({ request }) => request.destination === 'image',
          handler: 'NetworkFirst',
          options: {
            cacheName: 'images',
            expiration: {
              maxEntries: 20,
              purgeOnQuotaError: true,
            },
          },
        },
      ],
    }),
  ],
};