webpack.config.js

const path = require('path');
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

const options = {};

const TerserJSPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env, argv) => {
    const isProduction = argv.mode === "production";
    const isDevelopment = !isProduction;

    return {
        mode: isProduction ? argv.mode : 'development',
        entry: {
            app: path.resolve(__dirname, './src/index.js'),
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            publicPath: '/dist/',
            filename: 'bundle.js',
          //  clean: true,
            assetModuleFilename: '[name][ext]'
        },

        devtool: 'source-map',
        devServer: {
            contentBase: path.resolve(__dirname, 'dist'),
            port: 443,
           //  open: true,
           //  hot: true,
           //  compress: true,
           // historyApiFallback: true,
            writeToDisk: true
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.s[ac]ss$/i,
                    use: [
                        // Creates `style` nodes from JS strings
                        "style-loader",
                        // Translates CSS into CommonJS
                        "css-loader",
                        // Compiles Sass to CSS
                        "sass-loader",
                    ],
                },
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/,
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images',
                            // publicPath: '/assets/images/',
                        }
                    },
                },
                {
                    test: /\.(ttf|eot|svg|woff|woff2)(\?[\s\S]+)?$/,
                    include: path.resolve(__dirname, './node_modules/@fortawesome/fontawesome-free/webfonts'),
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'dist',
                            publicPath: '/dist/webfonts/',
                        }
                    }
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new WebpackManifestPlugin(options),
            new MiniCssExtractPlugin({
                ignoreOrder: false
            })
           /* new HtmlWebpackPlugin({
                title: 'ZAP-Suite Login Webpack',
                filename: '../index.html',
                template: './src/template.html'
            }) */
        ],
        optimization: {
            minimizer: [
                new TerserJSPlugin({}),
                new CssMinimizerPlugin()
            ],
        },
        performance: {
            maxEntrypointSize: 1024000,
            maxAssetSize: 1024000
        },
        watchOptions: {
            ignored: ['./node_modules/']
        }
    }
};

Video Tutorial

I have followed the following tutorial on Youtube: