chore: support WDS v5 (#837)

Author: pmmmwh

.circleci/config.yml

@@ -2,15 +2,15 @@ version: 2.1
 
 anchors:
   - &node-version-enum
-    - '14.20'
-    - '16.17'
-    - '18.9'
+    - '18.20'
+    - '20.12'
+    - '22.0'
   - &webpack-version-enum
     - '4'
     - '5'
   - &node-version-param
     node-version:
-      default: '16.17'
+      default: '20.12'
       enum: *node-version-enum
       type: enum
   - &webpack-version-param
@@ -45,7 +45,7 @@ executors:
     parameters:
       <<: *node-version-param
     docker:
-      - image: pmmmwh/puppeteer:<< parameters.node-version >>
+      - image: cimg/node:<< parameters.node-version >>-browsers
         auth:
           username: $DOCKER_LOGIN
           password: $DOCKER_PASSWORD

package.json

@@ -101,13 +101,14 @@
     "type-fest": "^4.0.0",
     "typescript": "~5.1.6",
     "webpack": "^5.76.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-cli.legacy": "npm:[email protected]",
-    "webpack-dev-server": "^4.2.1",
-    "webpack-dev-server.legacy": "npm:[email protected]",
+    "webpack-cli": "^5.1.4",
+    "webpack-cli-v4": "npm:[email protected]",
+    "webpack-dev-server": "^5.0.4",
+    "webpack-dev-server-v3": "npm:[email protected]",
+    "webpack-dev-server-v4": "npm:[email protected]",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-plugin-serve": "^1.4.1",
-    "webpack.legacy": "npm:[email protected]",
+    "webpack-v4": "npm:[email protected]",
     "yalc": "^1.0.0-pre.53",
     "yn": "^4.0.0"
   },
@@ -117,7 +118,7 @@
     "sockjs-client": "^1.4.0",
     "type-fest": ">=0.17.0 <5.0.0",
     "webpack": ">=4.43.0 <6.0.0",
-    "webpack-dev-server": "3.x || 4.x",
+    "webpack-dev-server": "3.x || 4.x || 5.x",
     "webpack-hot-middleware": "2.x",
     "webpack-plugin-serve": "0.x || 1.x"
   },
@@ -146,5 +147,6 @@
   },
   "engines": {
     "node": ">= 10.13"
-  }
+  },
+  "packageManager": "[email protected]+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

scripts/test.js

@@ -32,7 +32,7 @@ if (yn(process.env.DEBUG)) {
 
 if (parseInt(process.env.WEBPACK_VERSION || 5, 10) === 4) {
   // Apply Webpack npm aliases in Jest's module system
-  argv.push(`--moduleNameMapper="${JSON.stringify({ '^webpack($|/.*)': 'webpack.legacy$1' })}"`);
+  argv.push(`--moduleNameMapper="${JSON.stringify({ '^webpack($|/.*)': 'webpack-v4$1' })}"`);
 }
 
 void jest.run(argv);

test/helpers/sandbox/aliasLegacyWebpack.js

@@ -1,3 +1,3 @@
 const moduleAlias = require('module-alias');
 
-moduleAlias.addAliases({ 'webpack-dev-server': 'webpack-dev-server.legacy' });
+moduleAlias.addAliases({ 'webpack-dev-server': 'webpack-dev-server-v3' });

test/helpers/sandbox/aliasLegacyWebpackDevServer.js renamed to test/helpers/sandbox/aliasWDSv3.js

@@ -0,0 +1,3 @@
+const moduleAlias = require('module-alias');
+
+moduleAlias.addAliases({ 'webpack-dev-server': 'webpack-dev-server-v4' });

test/helpers/sandbox/aliasWDSv4.js

@@ -0,0 +1,3 @@
+const moduleAlias = require('module-alias');
+
+moduleAlias.addAliases({ webpack: 'webpack-v4' });

test/helpers/sandbox/aliasWebpackv4.js

@@ -85,8 +85,9 @@ module.exports = {
   resolve: {
     alias: ${JSON.stringify(
       {
-        ...(WEBPACK_VERSION === 4 && { webpack: 'webpack.legacy' }),
-        ...(WDS_VERSION === 3 && { 'webpack-dev-server': 'webpack-dev-server.legacy' }),
+        ...(WEBPACK_VERSION === 4 && { webpack: 'webpack-v4' }),
+        ...(WDS_VERSION === 3 && { 'webpack-dev-server': 'webpack-dev-server-v3' }),
+        ...(WDS_VERSION === 4 && { 'webpack-dev-server': 'webpack-dev-server-v4' }),
       },
       null,
       2

test/helpers/sandbox/configs.js

@@ -8,15 +8,14 @@ const isOpenSSL3 = semver.gte(process.versions.node, '17.0.0');
  * @param {string} packageName
  * @returns {string}
  */
-function getPackageExecutable(packageName) {
+function getPackageExecutable(packageName, binName) {
   let { bin: binPath } = require(`${packageName}/package.json`);
-  if (!binPath) {
-    throw new Error(`Package ${packageName} does not have an executable!`);
-  }
-
   // "bin": { "package": "bin.js" }
   if (typeof binPath === 'object') {
-    binPath = binPath[packageName];
+    binPath = binPath[binName || packageName];
+  }
+  if (!binPath) {
+    throw new Error(`Package ${packageName} does not have an executable!`);
   }
 
   return require.resolve(path.join(packageName, binPath));
@@ -133,13 +132,21 @@ function spawnTestProcess(processPath, argv, options = {}) {
  * @returns {Promise<import('child_process').ChildProcess | void>}
  */
 function spawnWebpackServe(port, dirs, options = {}) {
-  const webpackBin = getPackageExecutable('webpack-cli');
+  const webpackBin = getPackageExecutable(
+    WDS_VERSION === 4 ? 'webpack-cli-v4' : 'webpack-cli',
+    'webpack-cli'
+  );
 
   const NODE_OPTIONS = [
-    // This requires a script to alias `webpack` and `webpack-cli` -
-    // both v4 and v5 is installed side by side,
-    // so we have to ensure that they resolve to the `legacy` variant.
-    WEBPACK_VERSION === 4 && `--require "${require.resolve('./aliasLegacyWebpack')}"`,
+    // This requires a script to alias `webpack` -
+    // both v4 and v5 are installed,
+    // so we have to ensure that they resolve to the correct variant.
+    WEBPACK_VERSION === 4 && `--require "${require.resolve('./aliasWebpackv4')}"`,
+    // This requires a script to alias `webpack-dev-server` -
+    // both v3, v4 and v5 are installed,
+    // so we have to ensure that they resolve to the correct variant.
+    WDS_VERSION === 3 && `--require "${require.resolve('./aliasWDSv3')}"`,
+    WDS_VERSION === 4 && `--require "${require.resolve('./aliasWDSv4')}"`,
     // This make Node.js use the legacy OpenSSL provider -
     // it is necessary as OpenSSL 3.0 removed support for MD4,
     // which is the default hashing algorithm used in Webpack 4.

test/helpers/sandbox/spawn.js

@@ -9,7 +9,12 @@ class SandboxEnvironment extends NodeEnvironment {
 
     this.global.__DEBUG__ = yn(process.env.DEBUG);
     this.global.WEBPACK_VERSION = parseInt(process.env.WEBPACK_VERSION || '5', 10);
-    this.global.WDS_VERSION = semver.major(process.version) < 12 ? 3 : 4;
+    this.global.WDS_VERSION =
+      semver.major(process.version) < 12
+        ? 3
+        : semver.major(process.version) < 18 || this.global.WEBPACK_VERSION === 4
+          ? 4
+          : 5;
 
     const wsEndpoint = process.env.PUPPETEER_WS_ENDPOINT;
     if (!wsEndpoint) {