webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const WorkerPlugin = require('worker-plugin');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
const Dotenv = require('dotenv-webpack');
const TerserPlugin = require("terser-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');

const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/public/index.html',
    filename: 'index.html',
    inject: 'body',
});


const CopyWebpackPluginConfig = new CopyWebpackPlugin([
    { from: 'public/', to: '', exclude: 'index.html'},
    { from: "public/js", to: ''},
    { from: "node_modules/@microblink/blinkid-imagecapture-in-browser-sdk/resources", to: '' }
]);

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const ProgressBarPluginConfig = new ProgressBarPlugin();
const WorkerPluginConfig =  new WorkerPlugin();


module.exports = smp.wrap({
    mode: 'development',
    target: 'web',
    devtool: "eval-source-map",
    devServer: {
        inline: true,
        compress: true
    },
    output: {
        chunkLoading: false,
        wasmLoading: false,
    },
    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin({
            parallel: true,
            cache: true,
            sourceMap: true,
            terserOptions: {
                output: {
                    comments: false,
                }
            },
        }
    )],
  },
    externals: ['fs'],
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'awesome-typescript-loader',
                exclude: '/node_modules/',
            },
            // Handle workers
            {
                test: /\.worker\.js$/,
                use: { loader: "worker-loader" },
            },
            {
                test: /\.opencv.js$/,
                use: ['script-loader']
            },
            {
                test: /\.css$/,
                exclude: /[/\\]src[/\\]/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    { loader: 'css-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$/,
                exclude: /[/\\](node_modules|public)[/\\]/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: '[path]___[name]__[local]___[hash:base64:5]'
                        }
                    }
                ]
            },
            {
                test: /\.html$/,
                exclude: /[/\\](node_modules|public)[/\\]/,
                use: { loader: 'html-loader' }
            },
        ]
    },
    resolve: { 
        extensions: [".web.ts", ".web.js", ".ts", ".js"],
        fallback: {
            fs: "empty",
            "crypto": false,
        }
    },
    
    plugins: [
        HTMLWebpackPluginConfig,
        CopyWebpackPluginConfig,
        ProgressBarPluginConfig,
        WorkerPluginConfig,
        new Dotenv(),
    ]
});