assemble/webpack.config.js

const {resolve} = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const isProduction = process.argv[process.argv.indexOf('--mode') + 1] === 'production';

module.exports = {
    entry:[
        resolve(__dirname,"ui/index.js")
    ],
    output:{
        path: resolve(__dirname,"./public/assets"),
        filename: "bundle.js",
        chunkFilename: isProduction ? "[contenthash:16].js" : "[name]-[contenthash:5].js",
        publicPath: "",
        clean: true
    },
    resolve: {
        extensions: [
            '.js',
            '.jsx',
            '.ts',
            '.tsx',
            '.css',
            '.scss',
            '.jpg',
            '.jpeg',
            '.png',
            '.svg'
        ]
    },
    optimization:{
        splitChunks:{
            chunks: 'async'
        },
        chunkIds: "size",
        moduleIds: "size",
        mangleExports: "size"
    },
    stats: {
        logging: 'warn',
    },
    cache: {
        type: 'filesystem',
        cacheLocation: resolve(__dirname, '.cache'),
        cacheDirectory: resolve(__dirname, '.cache')
    },
    devtool: isProduction ? undefined : 'eval',
    target:"web",
    module: {
        rules: [{
            test: /\.ttf/i,
            exclude: /node_modules/,
            loader:"file-loader",
            options: {
                name: 'fonts/ttf/[name].[ext]',
            },
        },{
            test: /\.woff2?/i,
            exclude: /node_modules/,
            loader:"file-loader",
            options: {
                name: 'fonts/woff2/[name].[ext]',
            },
        },{
            test: /\.eot$/i,
            exclude: /node_modules/,
            loader:"file-loader",
            options: {
                name: 'fonts/eot/[name].[ext]',
            },
        },{
            test: /\.(jpe?g|png|svg|web[pm])$/i,
            exclude: /node_modules/,
            loader:"file-loader",
            options: {
                name: 'images/[name].[ext]',
            },
        },{
            test: /.jsx?$/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                    [
                        "@babel/preset-env",
                        {
                            "targets": {
                                "browsers": ["last 2 Chrome versions"]
                            }
                        }
                    ],
                    "@babel/preset-react"
                ],
                plugins: [
                    "@babel/plugin-transform-runtime",
                    ["@babel/plugin-proposal-class-properties", { "loose": true }]
                ]
              }
            }
        },{
            test: /\.s[ac]ss$|\.css$/i,
            exclude: /node_modules/,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        },{
            test: /\.tsx?$/i,
            exclude: /node_modules/,
            use: {
                loader: 'ts-loader',
                options: {
                    transpileOnly: true
                }
            }
        }]
    }
}