webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

const isDevelopment = process.env.NODE_ENV === "development";

module.exports = {
    entry: {
        main: "./src/index.js"
    },
    output: {
        filename: isDevelopment ? "[name].js" : "[name].[contentHash].js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader"
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {
                            minimize: true
                        }
                    }
                ]
            },
            {
                test: /\.(svg|png|jpg|jpeg|webp|bmp|gif)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            esModule: false,    //https://github.com/webpack-contrib/html-loader/issues/203
                            name: isDevelopment ? "[name].[ext]" : "[name].[contentHash].[ext]",
                            outputPath: "assets/img"
                        }
                    }
                ]
            },
            {
                test: /\.module\.s[ac]ss$/,
                use: [
                    isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            modules: false,
                            sourceMap: isDevelopment
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: isDevelopment
                        }
                    }
                ]
            },
            {
                test: /\.s[ac]ss$/,
                exclude: /\.module.s([ac]ss)$/,
                use: [
                    isDevelopment ? "style-loader" : MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            modules: false,
                            sourceMap: isDevelopment
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: isDevelopment
                        }
                    }
                ]
            },
            {
                test: /\.worker\.js$/,
                use: [{loader: "worker-loader"}]
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".scss"]
    },
    plugins: [
        isDevelopment ? null : new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        }),
        new MiniCssExtractPlugin({
            filename: isDevelopment ? "[name].css" : "[name].[hash].css",
            chunkFilename: isDevelopment ? "[id].css" : "[id].[hash].css"
        })
    ]
};