fix: assign distinct automatic ports in dev server plugin mode

Author: bjohansebas

package-lock.json

@@ -35,6 +35,7 @@
     "commander": "^14.0.3",
     "cross-spawn": "^7.0.6",
     "envinfo": "^7.21.0",
+    "get-port": "^7.2.0",
     "import-local": "^3.2.0",
     "interpret": "^3.1.1",
     "rechoir": "^0.8.0",

packages/webpack-cli/package.json

@@ -2240,6 +2240,20 @@ class WebpackCLI {
         const compilersForDevServer =
           possibleCompilers.length > 0 ? possibleCompilers : [compilers[0]];
         const usedPorts: number[] = [];
+        const devServerConfigurations: DevServerConfiguration[] = [];
+        const validatePort = ({ port }: DevServerConfiguration): void => {
+          if (port && port !== "auto") {
+            const portNumber = Number(port);
+
+            if (usedPorts.includes(portNumber)) {
+              throw new Error(
+                "Unique ports must be specified for each devServer option in your webpack configuration. Alternatively, run only 1 devServer config using the --config-name flag to specify your desired config.",
+              );
+            }
+
+            usedPorts.push(portNumber);
+          }
+        };
         // @ts-expect-error different versions of the `Schema` type
         const devServerArgs = this.#getArguments(webpack, devServer.schema);
         let appliedDevServers = 0;
@@ -2273,20 +2287,45 @@ class WebpackCLI {
             this.#processArguments(webpack, args, devServerConfiguration, values);
           }
 
-          if (devServerConfiguration.port) {
-            const portNumber = Number(devServerConfiguration.port);
+          if (isDevServerPlugin) {
+            validatePort(devServerConfiguration);
+          }
 
-            if (usedPorts.includes(portNumber)) {
-              throw new Error(
-                "Unique ports must be specified for each devServer option in your webpack configuration. Alternatively, run only 1 devServer config using the --config-name flag to specify your desired config.",
-              );
-            }
+          devServerConfigurations.push(devServerConfiguration);
+        }
 
-            usedPorts.push(portNumber);
+        for (const devServerConfiguration of devServerConfigurations) {
+          if (!isDevServerPlugin) {
+            validatePort(devServerConfiguration);
           }
 
           try {
             if (isDevServerPlugin) {
+              let { port } = devServerConfiguration;
+
+              if (
+                devServerConfigurations.length > 1 &&
+                !devServerConfiguration.ipc &&
+                (typeof port === "undefined" || port === "auto")
+              ) {
+                const { default: getPort, portNumbers } = await import("get-port");
+                const basePort = Number.parseInt(
+                  process.env.WEBPACK_DEV_SERVER_BASE_PORT ?? "8080",
+                  10,
+                );
+                const host = devServerConfiguration.host
+                  ? await DevServer.getHostname(devServerConfiguration.host)
+                  : undefined;
+
+                // Plugins select ports before any server starts listening.
+                port = await getPort({
+                  port: portNumbers(basePort, 65535),
+                  host,
+                  exclude: usedPorts,
+                });
+                usedPorts.push(port);
+              }
+
               // v5 typings lack the plugin constructor.
               const DevServerPlugin = DevServer as unknown as new (
                 options: DevServerConfiguration,
@@ -2295,6 +2334,7 @@ class WebpackCLI {
               // Serve all child compilers, regardless of which defines devServer.
               new DevServerPlugin({
                 ...devServerConfiguration,
+                port,
                 setupExitSignals: false,
               }).apply(compiler);
             } else {

packages/webpack-cli/src/webpack-cli.ts

@@ -0,0 +1,72 @@
+/* eslint-disable jest/require-top-level-describe -- Version-gated describe */
+
+const net = require("node:net");
+const [devServerVersion] = require("webpack-dev-server/package.json").version;
+const { runWatch } = require("../../utils/test-utils");
+
+const getGetPort = () => import("get-port");
+
+const describeDevServer6 = devServerVersion === "5" ? describe.skip : describe;
+
+describeDevServer6("automatic dev server ports", () => {
+  let occupied;
+  let basePort;
+
+  beforeEach(async () => {
+    occupied = net.createServer();
+    basePort = await (await getGetPort()).default();
+    await new Promise((resolve, reject) => {
+      occupied.once("error", reject);
+      occupied.listen(basePort, "127.0.0.1", resolve);
+    });
+  });
+
+  afterEach(async () => {
+    await new Promise((resolve, reject) => {
+      occupied.close((error) => (error ? reject(error) : resolve()));
+    });
+  });
+
+  test.each(["omitted", "auto", "explicit"])(
+    "should assign distinct available ports with %s ports",
+    async (mode) => {
+      const explicitPort = await (await getGetPort()).default();
+      const args = ["serve", "--watch-options-stdin"];
+
+      if (mode === "auto") {
+        args.push("--env", "auto=true");
+      } else if (mode === "explicit") {
+        args.push("--env", `explicit=${explicitPort}`);
+      }
+
+      const { exitCode, stdout, stderr } = await runWatch(__dirname, args, {
+        env: {
+          WEBPACK_DEV_SERVER_BASE_PORT: String(mode === "explicit" ? explicitPort : basePort),
+        },
+        handler: (proc) => {
+          let output = "";
+          let stopping = false;
+          proc.stdout.on("data", (chunk) => {
+            output += chunk.toString();
+
+            if (!stopping && [...output.matchAll(/Listening \d: \d+\n/g)].length === 2) {
+              stopping = true;
+              proc.stdin.end();
+            }
+          });
+        },
+      });
+
+      const ports = [...stdout.matchAll(/Listening \d: (\d+)/g)].map((match) => Number(match[1]));
+      expect(exitCode).toBe(0);
+      expect(ports).toHaveLength(2);
+      expect(new Set(ports).size).toBe(2);
+      expect(ports).not.toContain(basePort);
+      expect(stderr).not.toContain("EADDRINUSE");
+
+      if (mode === "explicit") {
+        expect(ports).toContain(explicitPort);
+      }
+    },
+  );
+});

test/serve/automatic-ports/automatic-ports.test.js

@@ -0,0 +1,18 @@
+module.exports = (env) =>
+  [0, 1].map((index) => ({
+    name: `server-${index}`,
+    mode: "development",
+    entry: "../rebuild/src/index.js",
+    output: { filename: `server-${index}.js` },
+    devServer: {
+      host: "127.0.0.1",
+      static: false,
+      hot: false,
+      client: false,
+      ...(env.explicit && index === 1 ? { port: Number(env.explicit) } : {}),
+      ...(env.auto ? { port: "auto" } : {}),
+      onListening(server) {
+        console.log(`Listening ${index}: ${server.server.address().port}`);
+      },
+    },
+  }));