Migrate to Webpack v5

https://webpack.js.org/migrate/5/

Author: mwiencek

.circleci/config.yml

@@ -45,7 +45,8 @@ jobs:
           rm /etc/service/{postgresql,redis}/down && sv start postgresql redis
           sudo -E -H -u musicbrainz carton exec -- ./script/create_test_db.sh
           sudo -E -H -u musicbrainz make -C po all_quiet deploy
-          NODE_ENV=test WEBPACK_MODE=development sudo -E -H -u musicbrainz carton exec -- ./script/compile_resources.sh server web-tests
+          NODE_ENV=test WEBPACK_MODE=development NO_PROGRESS=1 sudo -E -H -u musicbrainz carton exec -- \
+              ./script/compile_resources.sh client server web-tests
           sudo -E -H -u musicbrainz ./node_modules/.bin/flow --quiet
           sudo -E -H -u musicbrainz ./node_modules/.bin/eslint --max-warnings 0 .
           rm /etc/service/chrome/down && sv start chrome

docker/musicbrainz-tests/run_selenium_tests.sh

@@ -52,7 +52,7 @@ sv start artwork-indexer artwork-redirect ssssss
 # Compile static resources.
 sudo -E -H -u musicbrainz yarn
 sudo -E -H -u musicbrainz make -C po all_quiet deploy
-NODE_ENV=test WEBPACK_MODE=development \
+NODE_ENV=test WEBPACK_MODE=development NO_PROGRESS=1 \
      sudo -E -H -u musicbrainz carton exec -- ./script/compile_resources.sh
 
 # Add mbtest host alias to work around NO_PROXY restriction.

docker/templates/macros.m4

@@ -38,7 +38,6 @@ install_javascript(`$1')
 
 copy_mb(``root/ root/'')
 copy_mb(``script/compile_resources.sh script/dbdefs_to_js.pl script/start_renderer.pl script/xgettext.js script/'')
-copy_mb(``webpack.client.config.js webpack.server.config.js webpack.tests.config.js ./'')
 copy_mb(``webpack/ webpack/'')
 
 ENV NODE_ENV production

package.json

@@ -25,7 +25,7 @@
     "@popperjs/core": "2.5.3",
     "@sentry/browser": "5.10.2",
     "@sentry/node": "5.10.2",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.2.2",
     "balanced-match": "0.2.0",
     "canonical-json": "0.0.4",
     "cookie": "0.4.0",
@@ -35,15 +35,15 @@
     "filesize": "2.0.4",
     "generic-diff": "1.0.1",
     "he": "1.1.1",
-    "imports-loader": "1.2.0",
+    "imports-loader": "3.0.0",
     "jed": "git://github.com/mwiencek/Jed.git#cd3f71b",
     "jquery": "1.11.2",
     "knockout": "git://github.com/mwiencek/knockout.git#a09f077",
     "knockout-arraytransforms": "git://github.com/mwiencek/knockout-arraytransforms.git#9673e91",
     "leaflet": "1.6.0",
     "leaflet.markercluster": "1.4.1",
     "less": "4.1.1",
-    "less-loader": "7.3.0",
+    "less-loader": "10.0.1",
     "less-plugin-clean-css": "1.5.1",
     "leven": "2.0.0",
     "mutate-cow": "4.0.3",
@@ -60,10 +60,8 @@
     "shelljs": "0.8.4",
     "sliced": "1.0.1",
     "tablesorter": "2.31.3",
-    "terser-webpack-plugin": "4.2.3",
-    "webpack": "4.46.0",
-    "webpack-cli": "3.3.12",
-    "webpack-manifest-plugin": "2.2.0",
+    "terser-webpack-plugin": "5.1.4",
+    "webpack": "5.50.0",
     "webpack-node-externals": "3.0.0",
     "whatwg-fetch": "3.4.0",
     "yargs": "3.10.0"
@@ -72,6 +70,7 @@
     "@babel/cli": "7.14.8",
     "@babel/eslint-parser": "7.15.0",
     "babel-plugin-istanbul": "5.2.0",
+    "buffer": "6.0.3",
     "chrome-remote-interface": "0.27.0",
     "eslint": "7.9.0",
     "eslint-plugin-fb-flow": "0.0.2",
@@ -86,7 +85,10 @@
     "jsdom": "13.2.0",
     "json5": "2.1.3",
     "nyc": "14.1.1",
+    "path-browserify": "1.0.1",
+    "process": "0.11.10",
     "selenium-webdriver": "4.0.0-alpha.5",
+    "stream-browserify": "3.0.0",
     "tap-difflet": "0.7.2",
     "tap-junit": "3.1.0",
     "tape": "4.7.0",

root/static/scripts/common.js

@@ -38,16 +38,12 @@ require('./common/MB/Control/SelectAll');
 require('./common/components/TagEditor');
 require('./common/components/sidebar/AcousticBrainz');
 
-import(
-  /* webpackChunkName: "common-artwork-viewer" */ './common/artworkViewer'
-);
-import(/* webpackChunkName: "common-dialogs" */ './common/dialogs');
-import(/* webpackChunkName: "common-filter" */ './common/components/Filter');
-import(/* webpackChunkName: "common-menu" */ './common/MB/Control/Menu');
-import(
-  /* webpackChunkName: "common-edit-search" */ './common/MB/edit_search'
-);
-import(/* webpackChunkName: "common-ratings" */ './common/ratings');
-import(/* webpackChunkName: "common-tagger" */ './common/tagger');
-import(/* webpackChunkName: "common-cover-art" */ './common/coverart');
-import(/* webpackChunkName: "common-banner" */ './common/banner');
+import('./common/artworkViewer');
+import('./common/dialogs');
+import('./common/components/Filter');
+import('./common/MB/Control/Menu');
+import('./common/MB/edit_search');
+import('./common/ratings');
+import('./common/tagger');
+import('./common/coverart');
+import('./common/banner');

root/static/scripts/empty.js

@@ -1,7 +1,7 @@
 /*
  * Modules that are not meant to execute the server (jQuery, Popper.js, ...)
  * yet are imported from isomorphic components are mapped to here. See the
- * `NormalModuleReplacementPlugin` configuration in webpack.server.config.js.
+ * `NormalModuleReplacementPlugin` configuration in webpack/server.config.js.
  *
  * The named `noop` exports prevent Webpack from warning about missing
  * exports at build time.

script/compile_resources.sh

@@ -37,6 +37,7 @@ if [ -f lib/DBDefs.pm ]; then
     ./script/dbdefs_to_js.pl
 fi
 
+RUN_ARGS=''
 BUILD_CLIENT=0
 BUILD_SERVER=0
 BUILD_TESTS=0
@@ -88,37 +89,24 @@ else
     done
 fi
 
-REV_MANIFEST="$BUILD_DIR/rev-manifest.json"
-
 if [[ "$BUILD_CLIENT" == "1" ]]; then
-    ./node_modules/.bin/webpack --config webpack.client.config.js &
-    check_trap_jobs
-
-    if [[ "$BUILD_SERVER" == "1" ]]; then
-        sleep 5
-        while [[ ! -f "$REV_MANIFEST" ]]; do
-            echo 'Waiting for rev-manifest.json before building server JS ...'
-            sleep 3
-        done
-    fi
+    RUN_ARGS="$RUN_ARGS client"
 fi
 
 if [[ "$BUILD_SERVER" == "1" ]]; then
-    if [[ ! -f "$REV_MANIFEST" ]]; then
-        echo '{}' > "$REV_MANIFEST"
-    fi
-    ./node_modules/.bin/webpack --config webpack.server.config.js &
-    check_trap_jobs
+    RUN_ARGS="$RUN_ARGS server"
 fi
 
 if [[ "$BUILD_TESTS" == "1" ]]; then
+    RUN_ARGS="$RUN_ARGS tests"
     if ./script/database_exists TEST 2> /dev/null; then
         ./script/dump_js_type_info.pl
     else
         echo 'Skipping typeInfo.js dump; no running TEST database?'
     fi
-    ./node_modules/.bin/webpack --config webpack.tests.config.js &
-    check_trap_jobs
 fi
 
+"$MB_SERVER_ROOT"/webpack/run.js $RUN_ARGS &
+check_trap_jobs
+
 if [[ "$WATCH_MODE" == "1" ]]; then wait; fi

webpack/browserConfig.js

@@ -12,10 +12,7 @@ const webpack = require('webpack');
 const definePluginConfig = require('./definePluginConfig');
 
 module.exports = {
-  node: {
-    fs: 'empty',
-    path: true,
-  },
+  node: false,
 
   plugins: [
     new webpack.DefinePlugin(definePluginConfig),
@@ -40,4 +37,6 @@ module.exports = {
       jquery$: path.resolve(__dirname, '../node_modules/jquery'),
     },
   },
+
+  target: ['web', 'es5'],
 };

webpack/cacheConfig.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (C) 2021 MetaBrainz Foundation
+ *
+ * This file is part of MusicBrainz, the open internet music database,
+ * and is licensed under the GPL version 2, or (at your option) any
+ * later version: http://www.gnu.org/licenses/gpl-2.0.txt
+ */
+
+const path = require('path');
+
+const constants = require('./constants');
+const dirs = require('./dirs');
+
+module.exports = {
+  type: 'filesystem',
+  buildDependencies: {
+    config: [path.resolve(dirs.CHECKOUT, 'webpack') + path.sep],
+  },
+  version: (
+    constants.WEBPACK_MODE + '-' +
+    String(process.env.NODE_ENV) + '-' +
+    String(process.env.MUSICBRAINZ_RUNNING_TESTS)
+  ),
+};

webpack.client.config.js webpack/client.config.js

@@ -8,26 +8,27 @@
 
 const canonicalJson = require('canonical-json');
 const fs = require('fs');
-const ManifestPlugin = require('webpack-manifest-plugin');
 const path = require('path');
 const shell = require('shelljs');
 const shellQuote = require('shell-quote');
 const TerserPlugin = require('terser-webpack-plugin');
 const webpack = require('webpack');
 
-const poFile = require('./root/server/gettext/poFile');
-const browserConfig = require('./webpack/browserConfig');
+const poFile = require('../root/server/gettext/poFile');
+const {cloneObjectDeep} =
+  require('../root/static/scripts/common/utility/cloneDeep');
+const jedDataTemplate = require('../root/static/scripts/jed-data');
+
+const browserConfig = require('./browserConfig');
+const cacheConfig = require('./cacheConfig');
 const {
   dirs,
   GETTEXT_DOMAINS,
   PRODUCTION_MODE,
   WEBPACK_MODE,
-} = require('./webpack/constants');
-const moduleConfig = require('./webpack/moduleConfig');
-const providePluginConfig = require('./webpack/providePluginConfig');
-const {cloneObjectDeep} =
-  require('./root/static/scripts/common/utility/cloneDeep');
-const jedDataTemplate = require('./root/static/scripts/jed-data');
+} = require('./constants');
+const moduleConfig = require('./moduleConfig');
+const providePluginConfig = require('./providePluginConfig');
 
 const entries = [
   'account/applications/register',
@@ -212,19 +213,23 @@ plugins.push(new webpack.ProvidePlugin(providePluginConfig));
 
 if (PRODUCTION_MODE) {
   plugins.push(
-    new webpack.HashedModuleIdsPlugin({
+    new webpack.ids.HashedModuleIdsPlugin({
       hashDigestLength: 7,
     }),
   );
 }
 
-plugins.push.apply(plugins, [
-  new ManifestPlugin({
-    fileName: 'rev-manifest.json',
-  }),
-]);
+if (String(process.env.NO_PROGRESS) !== '1') {
+  plugins.push(
+    new webpack.ProgressPlugin({
+      activeModules: true,
+    }),
+  );
+}
 
 module.exports = {
+  cache: cacheConfig,
+
   context: dirs.CHECKOUT,
 
   devtool: 'source-map',
@@ -235,10 +240,13 @@ module.exports = {
 
   module: moduleConfig,
 
-  node: browserConfig.node,
+  name: 'client-bundles',
+
+  node: false,
 
   optimization: {
     runtimeChunk: 'single',
+
     splitChunks: {
       cacheGroups: {
         'common-chunks': {
@@ -250,6 +258,16 @@ module.exports = {
         },
       },
     },
+
+    ...(PRODUCTION_MODE ? {
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            safari10: true,
+          },
+        }),
+      ],
+    } : null),
   },
 
   output: {
@@ -265,18 +283,3 @@ module.exports = {
 
   resolve: browserConfig.resolve,
 };
-
-if (String(process.env.WATCH_MODE) === '1') {
-  Object.assign(module.exports, require('./webpack/watchConfig'));
-}
-
-if (PRODUCTION_MODE) {
-  module.exports.optimization.minimizer = [
-    new TerserPlugin({
-      sourceMap: true,
-      terserOptions: {
-        safari10: true,
-      },
-    }),
-  ];
-}