dash-wooden-clock/webpack.config.babel.js

import HtmlWebpackPlugin from 'html-webpack-plugin';
import CspHtmlWebpackPlugin from 'csp-html-webpack-plugin';
import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

import AutoprefixerPostCSSPlugin from 'autoprefixer';
import SystemUIFontFamilyPostCSSPlugin from 'postcss-font-family-system-ui';
import PostCSSEnvPreset from 'postcss-preset-env';

import path from 'path';

const sourceDirectory = path.resolve(__dirname, 'src');

export default (env, { mode }) => {
  const development = mode === 'development';
  const production = !development;

  return ({
    optimization: {
      runtimeChunk: {
        name: 'wp',
      },
    },

    plugins: [
      new MiniCssExtractPlugin(),
      new HtmlWebpackPlugin({
        template: './src/index.html',
        inject: 'head',
        viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
        minify: production,
        xhtml: true,
      }),
      production && new CspHtmlWebpackPlugin({
        'base-uri': "'self'",
        'object-src': "'none'",
        'script-src': ["'self'", 'nonce-uGo4I9ydb2hP393boc/24Vu7diUk/Mf84w9khcZkynk='],
        'style-src': ["'self'"],
      }),
      production && new ScriptExtHtmlWebpackPlugin({
        defaultAttribute: 'defer',
        custom: [
          {
            test: /./,
            attribute: 'nonce',
            value: 'uGo4I9ydb2hP393boc/24Vu7diUk/Mf84w9khcZkynk=',
          },
        ],
      }),
    ].filter(v => v),

    module: {
      rules: [
        {
          test: /\.js$/i,
          include: sourceDirectory,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/env', {
                    targets: {
                    },
                  }],
                ],
              },
            },
          ],
        },

        {
          test: /\.css$/i,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: true,
                camelCase: true,
                importLoaders: 1,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  PostCSSEnvPreset(),
                  SystemUIFontFamilyPostCSSPlugin(),
                  AutoprefixerPostCSSPlugin(),
                ],
              },
            },
          ],
        },


        {
          test: /\.styl$/i,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                modules: true,
                camelCase: true,
                importLoaders: 3,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  PostCSSEnvPreset(),
                  SystemUIFontFamilyPostCSSPlugin(),
                  AutoprefixerPostCSSPlugin(),
                ],
              },
            },
            'resolve-url-loader',
            {
              loader: 'stylus-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        },
      ],
    },
  });
};