Webpack config for TypeScript + React + DevServer + Hot Reload + Sass + AutoPrefixer

webpack.config.dev.js

const webpack = require('webpack');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { CheckerPlugin } = require('awesome-typescript-loader');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const prefixer = require('autoprefixer');

const path = require('path');

const rootFolder = process.cwd();

const ext = {
    ts: /\.tsx?$/,
    js: /\.js$/,
    sass: /\.sass$/
};

const dev = {
    mode: 'development',

    context: `${rootFolder}`,

    entry: [
        'webpack-dev-server/client?http://localhost:3001',
        'webpack/hot/only-dev-server',
        path.join(rootFolder, '/src/index.tsx')
    ],

    output: {
        path: path.join(rootFolder, '/build/'),
        filename: '[name].js',
        publicPath: 'http://localhost:3001/'
    },

    module: {
        rules: [
            {
                test: ext.ts,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            configFileName: `${rootFolder}/tsconfig.json`,
                            forceIsolatedModules: true,
							useTranspileModule: true,
                        }
                    }
                ]
            },
            {
                enforce: "pre",
                test: ext.js,
                loader: "source-map-loader"
            },
            {
                test: ext.sass,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                prefixer({
                                    browsers: ['ie >= 9', 'last 10 version']
                                })
                            ],
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader'
                    }
                ]
            }
        ]
    },

    resolve: {
        modules: ["node_modules", "react"],
        extensions: ['.ts', '.tsx', ".js", ".jsx", ".json"]
    },

    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendors",
                    chunks: "all"
                }
            }
        }
    },

    devtool: 'source-map',

    plugins: [
        new CleanWebpackPlugin(['build']),

        new HtmlWebpackPlugin({
            filename: path.resolve(rootFolder, 'build/index.html'),
            template: path.resolve(rootFolder, 'src', 'index.html')
        }),

        new webpack.NamedModulesPlugin(),

        new webpack.HotModuleReplacementPlugin(),

        new CheckerPlugin(),
        
        new ForkTsCheckerWebpackPlugin()
    ],

    devServer: {
        hot: true,
        compress: false,
        contentBase: './build',
        port: 3001,
        allowedHosts: [
            '.',
        ]
    }
};

module.exports = dev;