dashboard/webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
const TerserPlugin = require('terser-webpack-plugin');

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

    return {
        entry: {
            app: ['./src/index.ts'],
        },
        resolve: {
            extensions: ['.js', '.ts', '.elm'],
        },
        devServer: {
            contentBase: './bundle',
            hot: false,
            inline: false,
        },
        devtool: 'eval-source-map',
        module: {
            rules: [
                {
                    test: /\.html$/,
                    use: [{ loader: 'file-loader?name=[name].[ext]' }],
                },
                {
                    test: [/\.elm$/],
                    exclude: [/elm-stuff/, /node_modules/],
                    use: [
                        { loader: 'elm-hot-webpack-loader' },
                        {
                            loader: 'elm-webpack-loader',
                            options: {
                                debug: isDebug,
                                optimize: isProduction,
                                forceWatch: false,
                            },
                        },
                    ],
                },
                { test: /\.ts$/, loader: 'ts-loader' },
                {
                    test: /\.(png)$/,
                    loader: 'file-loader',
                },
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                },
            ],
        },
        mode: 'development',
        watch: isDebug,
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'bundle'),
            publicPath: '/',
        },
        optimization: {
            minimize: isProduction,
            minimizer: [new TerserPlugin()],
        },
        plugins: [
            new CopyWebpackPlugin({
                patterns: [{ from: './*.html' }, { from: './images/*.svg' }],
            }),
            new webpack.ProvidePlugin({
                process: 'process/browser.js',
                Buffer: ['buffer', 'Buffer'],
            }),
            new Serve({
                historyFallback: true,
                port: 55553,
                host: 'localhost',
            }),
        ],
    };
};