client/src/webpack.config.js

const path = require('path');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: {
        start: './ts/start.ts',
        compare: './ts/compare.ts'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true // Faster compilation, type checking done by ForkTsCheckerWebpackPlugin
                    }
                }
            },
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            api: 'modern'
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 20000 // inline <= 20kb
                    }
                }
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 20000 // inline <= 20kb
                    }
                },
                generator: {
                    dataUrl: {
                        mimetype: 'application/font-woff'
                    }
                }
            },
            {
                test: /\.svg(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10000 // inline <= 10kb
                    }
                },
                generator: {
                    dataUrl: {
                        mimetype: 'image/svg+xml'
                    }
                }
            },
            {
                test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                type: 'asset/resource'
            },
            {
                test: /\.html$/,
                exclude: /index\.html|compare\.html/,
                type: 'asset/source'
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            // filename: "style.css",
            // chunkFilename: "chunk.css"
        }),
        new ForkTsCheckerWebpackPlugin({
            typescript: {
                diagnosticOptions: {
                    semantic: true,
                    syntactic: true,
                },
                memoryLimit: 4096 // Increase memory limit
            },
        }),
        new CopyWebpackPlugin({
            patterns: [
                // Demo JSON files now live under data/demo and are served by the backend,
                // so we only need to copy the HTML shell into the dist folder.
                { from: 'index.html', to: 'index.html' },
                { from: 'compare.html', to: 'compare.html' }
            ]
        }),
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /node_modules/,
                    chunks: "initial",
                    name: "vendor",
                    priority: 10,
                    enforce: true
                }
            }
        }
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, '../dist/'),
        clean: true // Clean output directory before emit
    },
    performance: {
        hints: false, // Disable performance hints
        maxEntrypointSize: 512000, // 500KB
        maxAssetSize: 512000 // 500KB
    },
    devServer: {
        port: 8090,
        proxy: {
            '/api': {
                target: 'http://localhost:5001',
                secure: false,
                ws: true
            }
        }
    }
};