feat(build) migrate to webpack 5

karma.conf.js

@@ -10,7 +10,7 @@ module.exports = function(config) {
 
         // frameworks to use
         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: [ 'jasmine' ],
+        frameworks: [ 'jasmine', 'webpack' ],
 
         // list of files / patterns to load in the browser
         files: [
@@ -60,6 +60,6 @@ module.exports = function(config) {
         // if true, Karma captures browsers, runs the tests and exits
         singleRun: true,
 
-        webpack: require('./webpack-shared-config')
+        webpack: require('./webpack-shared-config')(false /* minimize */, false /* analyzeBundle */)
     });
 };

package.json

@@ -52,15 +52,16 @@
     "karma-chrome-launcher": "3.1.0",
     "karma-jasmine": "3.1.1",
     "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "4.0.2",
-    "string-replace-loader": "2.1.1",
-    "webpack": "4.43.0",
-    "webpack-bundle-analyzer": "3.4.1",
-    "webpack-cli": "3.3.11"
+    "karma-webpack": "5.0.0",
+    "process": "0.11.10",
+    "string-replace-loader": "3.0.3",
+    "webpack": "5.57.1",
+    "webpack-bundle-analyzer": "4.4.2",
+    "webpack-cli": "4.9.0"
   },
   "scripts": {
     "lint": "eslint .",
-    "postinstall": "webpack -p",
+    "postinstall": "webpack",
     "test": "karma start karma.conf.js",
     "test-watch": "karma start karma.conf.js --no-single-run",
     "validate": "npm ls",

webpack-shared-config.js

@@ -1,90 +1,94 @@
 /* global __dirname */
 
 const process = require('process');
+const { ProvidePlugin } = require('webpack');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
-const analyzeBundle = process.argv.indexOf('--analyze-bundle') !== -1;
 
-const minimize
-    = process.argv.indexOf('-p') !== -1
-        || process.argv.indexOf('--optimize-minimize') !== -1;
+module.exports = (minimize, analyzeBundle) => {
+    return {
+        // The inline-source-map is used to allow debugging the unit tests with Karma
+        devtool: minimize ? 'source-map' : 'inline-source-map',
+        mode: minimize ? 'production' : 'development',
+        module: {
+            rules: [ {
+                // Version this build of the lib-jitsi-meet library.
 
-module.exports = {
-    // The inline-source-map is used to allow debugging the unit tests with Karma
-    devtool: minimize ? 'source-map' : 'inline-source-map',
-    mode: minimize ? 'production' : 'development',
-    module: {
-        rules: [ {
-            // Version this build of the lib-jitsi-meet library.
+                loader: 'string-replace-loader',
+                options: {
+                    flags: 'g',
+                    replace:
+                        process.env.LIB_JITSI_MEET_COMMIT_HASH || 'development',
+                    search: '{#COMMIT_HASH#}'
+                },
+                test: `${__dirname}/JitsiMeetJS.js`
+            }, {
+                // Transpile ES2015 (aka ES6) to ES5.
 
-            loader: 'string-replace-loader',
-            options: {
-                flags: 'g',
-                replace:
-                    process.env.LIB_JITSI_MEET_COMMIT_HASH || 'development',
-                search: '{#COMMIT_HASH#}'
-            },
-            test: `${__dirname}/JitsiMeetJS.js`
-        }, {
-            // Transpile ES2015 (aka ES6) to ES5.
-
-            loader: 'babel-loader',
-            options: {
-                presets: [
-                    [
-                        '@babel/preset-env',
+                exclude: [
+                    new RegExp(`${__dirname}/node_modules/(?!@jitsi/js-utils)`)
+                ],
+                loader: 'babel-loader',
+                options: {
+                    presets: [
+                        [
+                            '@babel/preset-env',
 
-                        // Tell babel to avoid compiling imports into CommonJS
-                        // so that webpack may do tree shaking.
-                        {
-                            modules: false,
+                            // Tell babel to avoid compiling imports into CommonJS
+                            // so that webpack may do tree shaking.
+                            {
+                                modules: false,
 
-                            // Specify our target browsers so no transpiling is
-                            // done unnecessarily. For browsers not specified
-                            // here, the ES2015+ profile will be used.
-                            targets: {
-                                chrome: 58,
-                                electron: 2,
-                                firefox: 54,
-                                safari: 11
+                                // Specify our target browsers so no transpiling is
+                                // done unnecessarily. For browsers not specified
+                                // here, the ES2015+ profile will be used.
+                                targets: {
+                                    chrome: 58,
+                                    electron: 2,
+                                    firefox: 54,
+                                    safari: 11
+                                }
                             }
-                        }
+                        ]
+                    ],
+                    plugins: [
+                        '@babel/plugin-proposal-class-properties',
+                        '@babel/plugin-proposal-optional-chaining',
+                        '@babel/plugin-proposal-export-namespace-from',
+                        '@babel/plugin-proposal-nullish-coalescing-operator'
                     ]
-                ],
-                plugins: [
-                    '@babel/plugin-proposal-class-properties',
-                    '@babel/plugin-proposal-optional-chaining',
-                    '@babel/plugin-proposal-export-namespace-from',
-                    '@babel/plugin-proposal-nullish-coalescing-operator'
-                ]
-            },
-            test: /\.js$/
-        } ]
-    },
-    node: {
-        // Allow the use of the real filename of the module being executed. By
-        // default Webpack does not leak path-related information and provides a
-        // value that is a mock (/index.js).
-        __filename: true
-    },
-    optimization: {
-        concatenateModules: minimize
-    },
-    output: {
-        filename: `[name]${minimize ? '.min' : ''}.js`,
-        path: process.cwd(),
-        sourceMapFilename: `[name].${minimize ? 'min' : 'js'}.map`
-    },
-    performance: {
-        hints: minimize ? 'error' : false,
-        maxAssetSize: 750 * 1024,
-        maxEntrypointSize: 750 * 1024
-    },
-    plugins: [
-        analyzeBundle
-            && new BundleAnalyzerPlugin({
-                analyzerMode: 'disabled',
-                generateStatsFile: true
-            })
-    ].filter(Boolean)
+                },
+                test: /\.js$/
+            } ]
+        },
+        node: {
+            // Allow the use of the real filename of the module being executed. By
+            // default Webpack does not leak path-related information and provides a
+            // value that is a mock (/index.js).
+            __filename: true
+        },
+        optimization: {
+            concatenateModules: minimize
+        },
+        output: {
+            filename: `[name]${minimize ? '.min' : ''}.js`,
+            sourceMapFilename: `[name].${minimize ? 'min' : 'js'}.map`
+        },
+        performance: {
+            hints: minimize ? 'error' : false,
+            maxAssetSize: 750 * 1024,
+            maxEntrypointSize: 750 * 1024
+        },
+        plugins: [
+            analyzeBundle
+                && new BundleAnalyzerPlugin({
+                    analyzerMode: 'disabled',
+                    generateStatsFile: true
+                }),
+            !minimize
+                && new ProvidePlugin({
+                    process: 'process/browser'
+                })
+        ].filter(Boolean)
+    };
 };

webpack.config.js

@@ -1,28 +1,36 @@
 const process = require('process');
 
-const config = require('./webpack-shared-config');
+const sharedConfig = require('./webpack-shared-config');
 
-module.exports = [
-    Object.assign({}, config, {
-        entry: {
-            'lib-jitsi-meet': './index.js'
-        },
-        output: Object.assign({}, config.output, {
-            library: 'JitsiMeetJS',
-            libraryTarget: 'umd'
-        })
-    }),
-    {
-        entry: {
-            worker: './modules/e2ee/Worker.js'
-        },
-        mode: 'production',
-        output: {
-            filename: 'lib-jitsi-meet.e2ee-worker.js',
-            path: process.cwd()
-        },
-        optimization: {
-            minimize: false
+module.exports = (_env, argv) => {
+    // Despite what whe docs say calling webpack with no arguments results in mode not being set.
+    const mode = typeof argv.mode === 'undefined' ? 'production' : argv.mode;
+    const config
+        = sharedConfig(mode === 'production' /* minimize */, Boolean(process.env.ANALYZE_BUNDLE) /* analyzeBundle */);
+
+    return [
+        Object.assign({}, config, {
+            entry: {
+                'lib-jitsi-meet': './index.js'
+            },
+            output: Object.assign({}, config.output, {
+                library: 'JitsiMeetJS',
+                libraryTarget: 'umd',
+                path: process.cwd()
+            })
+        }),
+        {
+            entry: {
+                worker: './modules/e2ee/Worker.js'
+            },
+            mode,
+            output: {
+                filename: 'lib-jitsi-meet.e2ee-worker.js',
+                path: process.cwd()
+            },
+            optimization: {
+                minimize: false
+            }
         }
-    }
-];
+    ];
+};