webpack.config.js

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const plugins = [
    new HtmlWebPackPlugin({
        template: './client/index.html',
        filename: './index.html',
    }),
    new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css',
        ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
];

module.exports = {
    entry: {
        'vendor-styles': [
            './vendors/highlight.js@9.12.0/theme.min.css',
            './vendors/tailwind@1.1.4/tailwind.css',
        ],
        // The CSS for client should come after `vendor-styles`
        client: './client/index.tsx',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        chunkFilename: '[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: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: process.env.NODE_ENV === 'development',
                        },
                    },
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('tailwindcss'),
                                require('cssnano'),
                            ],
                        },
                    },
                ],
            },
            {
                test: /\.ts(x?)$/,
                exclude: /node_modules/,
                // The order of loaders are very important
                // It will make the @loadable/component work
                use: ['babel-loader', 'ts-loader'],
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: 'source-map-loader',
            },
            {
                test: /\.md$/,
                loader: 'raw-loader',
            }
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.md'],
    },
    devtool: 'cheap-module-eavl-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        historyApiFallback: true,
        port: 8080,
    },
    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,
                },
            },
        },
    },
};