Webpack configs

Webpack configs.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const globSync = require('glob').sync;

module.exports = (env, options) => ({
    entry: ["./src/index.js"],
    devServer: {
        contentBase: "./dist"
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    options.mode !== "production" ?
                        "style-loader" : {
                            loader: MiniCssExtractPlugin.loader,
                            options: {
                                publicPath: "../"
                            }
                        },
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: function () {
                                return [
                                    require('precss'),
                                    require('autoprefixer')
                                ];
                            }
                        }
                    },
                    "sass-loader"
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath: "img/",
                            esModule: false,
                        }
                    }
                ]
            },
            {
                test: /\.(html)$/,
                use: {
                    loader: "html-srcsets-loader",
                    options: {
                        attrs: [":src", ':srcset'],
                        interpolate: true,
                    }
                }
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            },
            {
                test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                // Limiting the size of the woff fonts breaks font-awesome ONLY for the extract text plugin
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000, // if less than 100 kb, add base64 encoded image to css
                        name: "[name].[ext]", // if more than 10 kb move to this folder in build using file-loader
                        outputPath: "fonts/",
                    }
                }
            },
            {
                test: /\.(ttf|eot)(\?[\s\S]+)?$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: "[name].[ext]",
                        outputPath: "fonts/",
                    }
                }
            },
        ]
    },
    plugins: [

        new MiniCssExtractPlugin({
            filename: "css/[name].[contenthash].css"
        }),
        new CleanWebpackPlugin(),
        ...globSync("src/html/**/*.html").map(fileName => {
            return new HtmlWebpackPlugin({
                template: fileName,
                inject: "body",
                filename: fileName.replace("src/html/", "")
            });
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.$': 'jquery',
            "window.jQuery": "jquery",
            Popper: ["popper.js", "default"],
            Util: "exports-loader?Util!bootstrap/js/dist/util",
            Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown"
        })
    ],
    optimization:
        {
            minimizer: [
                new TerserPlugin({
                    parallel: true,
                    terserOptions: {
                        ecma: 6,
                    },
                }),
                new CompressionPlugin({
                    test: /\.js$|\.css(\?.*)?$/i
                }),
                new OptimizeCSSAssetsPlugin({})
            ]
        }
    ,
    output: {
        filename: "[name].js",
        path:
            path.resolve(__dirname, "dist"),
        publicPath:
            ""
    }
})
;