webpack.config.js

const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => ({
    entry: './src/index.js',
    output: {
        filename: 'validator-client.js',
        chunkFilename: '[name].validator-client.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            // Babel follows the webpack mode (otherwise, without NODE_ENV, the JSX is compiled for
            // development and calls jsxDEV, which is missing from the production build of React)
            options: { envName: argv.mode },
        },
        {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
        },
        {
            test: /\.md$/i,
            type: 'asset/source',
        }]
    },
    optimization: {
        // Single entry point (validator-client.js, including the webpack runtime and the synchronous
        // dependencies) so that integrations only need one <script> tag. Lazy-loaded chunks
        // (swagger-ui) get stable names from their webpackChunkName comment and are not split further.
        splitChunks: false,
        minimizer: [new TerserPlugin({
            extractComments: false,
        })],
    },
    // The single bundle (React included) and the lazy-loaded swagger-ui chunk exceed webpack's
    // default 244 KiB budget by design : warn only if the main bundle grows significantly.
    performance: {
        assetFilter: (assetFilename) => assetFilename === 'validator-client.js',
        maxAssetSize: 600 * 1024,
        maxEntrypointSize: 600 * 1024,
    },
});