csslayout/webpack.config.js

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlWebPackPlugin = require("html-webpack-plugin");

const plugins = [
    new HtmlWebPackPlugin({
        template: './client/index.html',
        filename: './index.html',
    }),
];
  
if (process.env.NODE_ENV === "analyse") {
    plugins.push(new BundleAnalyzerPlugin());
}

module.exports = {
    entry: './client/index.jsx',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        // It's very important
        // All the chunk generated by webpack then will be loaded such as
        // <script charset="utf-8" src="/[chunk-name].bundle.js"></script>
        // The script is accessible from any page that exported by a 3rd party such as react-snap
        publicPath: '/',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    devtool: 'cheap-module-eavl-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        historyApiFallback: true,
    },
    plugins,
    // See https://webpack.js.org/guides/caching/
    optimization: {
        runtimeChunk: 'single',
        moduleIds: 'hashed',
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                vendor: {
                    // sync + async chunks
                    chunks: 'all',
                    name: 'vendors',
                    // import file path containing node_modules
                    test: /[\\/]node_modules[\\/]/,
                    priority: 20,
                },
                /*
                common: {
                    name: 'common',
                    minChunks: 2,
                    chunks: 'all',
                    priority: 10,
                    reuseExistingChunk: true,
                    enforce: true,
                },
                */
            },
        },
    }, 
};