webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';

  return {
    entry: {
      app: './src/index.ts'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      // Cache busting with contenthash
      filename: isProduction ? 'js/[name].[contenthash:8].js' : 'js/[name].js',
      chunkFilename: isProduction ? 'js/[name].[contenthash:8].chunk.js' : 'js/[name].chunk.js',
      clean: true,
      publicPath: '/'
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: 'ts-loader'
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        },
        {
          test: /\.css$/,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader'
          ]
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
        filename: 'index.html',
        inject: 'body',
        minify: isProduction ? {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
        } : false
      }),
      new MiniCssExtractPlugin({
        // Cache busting for CSS
        filename: isProduction ? 'css/[name].[contenthash:8].css' : 'css/[name].css',
        chunkFilename: isProduction ? 'css/[name].[contenthash:8].chunk.css' : 'css/[name].chunk.css'
      }),
      new CopyWebpackPlugin({
        patterns: [
          { from: 'src/docs.html', to: 'docs/index.html' },
          { from: 'src/docs.css', to: 'docs/docs.css' },
          { from: 'src/favicon.svg', to: 'favicon.svg' },
          { from: '../internal/api/openapi.yaml', to: 'openapi.yaml' }
        ]
      })
    ],
    optimization: {
      minimizer: [
        '...',
        new CssMinimizerPlugin()
      ],
      splitChunks: {
        cacheGroups: {
          // qrcode is only used during MFA enrollment (dynamic import).
          // Give it its own async chunk so it never lands in vendors.js.
          qrcode: {
            test: /[\\/]node_modules[\\/]qrcode[\\/]/,
            name: 'qrcode',
            chunks: 'async',
            priority: 20,
            enforce: true
          },
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            // 'initial' means only synchronously-imported packages go here;
            // async-only deps (e.g. qrcode) stay in their own lazy chunks.
            chunks: 'initial',
            priority: 10
          }
        }
      }
    },
    devtool: isProduction ? 'hidden-source-map' : 'eval-source-map',
    performance: {
      hints: isProduction ? 'warning' : false,
      maxEntrypointSize: 512000,
      maxAssetSize: 512000
    },
    stats: {
      colors: true,
      modules: false
    }
  };
};