refactor: support devServer: false (#4045)

Author: alexander-akait

package.json

@@ -75,7 +75,6 @@
     "execa": "^5.0.0",
     "get-port": "^5.1.1",
     "husky": "^9.1.4",
-    "internal-ip": "^6.2.0",
     "jest": "^29.4.1",
     "jest-watch-typeahead": "^2.2.2",
     "lerna": "^8.1.8",
@@ -95,6 +94,6 @@
     "typescript": "^5.0.4",
     "webpack": "^5.94.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-dev-server": "^5.0.2"
+    "webpack-dev-server": "^5.1.0"
   }
 }

packages/serve/src/index.ts

@@ -66,6 +66,7 @@ class ServeCommand {
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const processors: Array<(opts: Record<string, any>) => void> = [];
+
         for (const optionName in options) {
           const kebabedOption = cli.toKebabCase(optionName);
           const isBuiltInOption = builtInOptions.find(
@@ -89,6 +90,7 @@ class ServeCommand {
             devServerCLIOptions[optionName] = options[optionName];
           }
         }
+
         for (const processor of processors) {
           processor(devServerCLIOptions);
         }
@@ -103,11 +105,13 @@ class ServeCommand {
         };
 
         webpackCLIOptions.isWatchingLikeCommand = true;
+
         const compiler = await cli.createCompiler(webpackCLIOptions);
 
         if (!compiler) {
           return;
         }
+
         const servers: (typeof DevServer)[] = [];
 
         if (cli.needWatchStdin(compiler)) {
@@ -144,6 +148,12 @@ class ServeCommand {
         const usedPorts: number[] = [];
 
         for (const compilerForDevServer of compilersForDevServer) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          if (compilerForDevServer.options.devServer === false) {
+            continue;
+          }
+
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           const args = devServerFlags.reduce((accumulator: Record<string, any>, flag: any) => {
             accumulator[flag.name] = flag;
@@ -203,6 +213,7 @@ class ServeCommand {
           }
 
           const devServerOptions: WebpackDevServerOptions = result as WebpackDevServerOptions;
+
           if (devServerOptions.port) {
             const portNumber = Number(devServerOptions.port);
 
@@ -231,6 +242,11 @@ class ServeCommand {
             process.exit(2);
           }
         }
+
+        if (servers.length === 0) {
+          cli.logger.error("No dev server configurations to run");
+          process.exit(2);
+        }
       },
     );
   }

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

@@ -2391,14 +2391,12 @@ class WebpackCLI implements IWebpackCLI {
     } else if (typeof options.nodeEnv === "string") {
       process.env.NODE_ENV = options.nodeEnv;
     }
+
     let config = await this.loadConfig(options);
     config = await this.buildConfig(config, options);
-    const { devServer } = config.options as boolean | WebpackDevServerOptions["options"];
-    const devServerIsFalse = devServer !== undefined && devServer === false;
-    if (devServerIsFalse && options.argv && options.argv.env && options.argv.env.WEBPACK_SERVE) {
-      process.exit(0);
-    }
+
     let compiler: WebpackCompiler;
+
     try {
       compiler = this.webpack(
         config.options as WebpackConfiguration,

test/serve/basic/__snapshots__/serve-basic.test.js.snap.devServer4.webpack5

@@ -0,0 +1,21 @@
+const WebpackCLITestPlugin = require("../../utils/webpack-cli-test-plugin");
+
+module.exports = [
+  {
+    name: "app",
+    dependencies: ["worker"],
+    mode: "development",
+    devtool: false,
+    target: "web",
+    entry: "./src/index.js",
+    plugins: [new WebpackCLITestPlugin(["mode"], false, "hooks.compilation.taps")],
+  },
+  {
+    name: "worker",
+    mode: "development",
+    devtool: false,
+    target: "webworker",
+    entry: "./src/worker.js",
+    devServer: false,
+  },
+];

test/serve/basic/__snapshots__/serve-basic.test.js.snap.devServer5.webpack5

@@ -123,7 +123,21 @@ describe("basic serve usage", () => {
       normalStdKillOptions,
     );
     expect(stdout).toBeFalsy();
-    expect(stderr).toBeFalsy();
+    expect(stderr).toContain("No dev server configurations to run");
+  });
+
+  it("should not start dev server when supplied false #1", async () => {
+    const { stderr, stdout } = await runWatch(
+      __dirname,
+      ["serve", "--config", "dev-server-false.multi.config.js"],
+      normalStdKillOptions,
+    );
+
+    expect(normalizeStderr(stderr)).toMatchSnapshot("stderr");
+    expect(stdout).toContain("app:");
+    expect(stdout).toContain("worker:");
+    expect(stdout).toContain("HotModuleReplacementPlugin");
+    expect(stdout).toContain("compiled successfully");
   });
 
   it('should work with the "--stats" option', async () => {

test/serve/basic/dev-server-false.multi.config.js

@@ -0,0 +1 @@
+console.log("Worker");

test/serve/basic/serve-basic.test.js

@@ -3,7 +3,7 @@
 exports[`serve variable compiles without flags and export variable 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/serve-variable/public' directory"
 `;

test/serve/basic/src/worker.js

@@ -2,8 +2,8 @@
 
 exports[`serve variable compiles without flags and export variable 1`] = `
 "<i> [webpack-dev-server] Project is running at:
-<i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] Loopback: http://localhost:<port>/, http://[::1]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/serve-variable/public' directory"
 `;

test/serve/serve-variable/__snapshots__/serve-variable.test.js.snap.devServer4.webpack5

@@ -3,31 +3,31 @@
 exports[`serve with devServer in config Passing hot flag works alongside other server config: stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/with-custom-port/public' directory"
 `;
 
 exports[`serve with devServer in config Port flag should override the config port: stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/with-custom-port/public' directory"
 `;
 
 exports[`serve with devServer in config Should pick up the host and port from config: stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/with-custom-port/public' directory"
 `;
 
 exports[`serve with devServer in config works fine when no-hot flag is passed alongside other server config: stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/with-custom-port/public' directory"
 `;

test/serve/serve-variable/__snapshots__/serve-variable.test.js.snap.devServer5.webpack5

@@ -2,32 +2,32 @@
 
 exports[`serve with devServer in config Passing hot flag works alongside other server config: stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
-<i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] Loopback: http://localhost:<port>/, http://[::1]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/with-custom-port/public' directory"
 `;
 
 exports[`serve with devServer in config Port flag should override the config port: stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
-<i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] Loopback: http://localhost:<port>/, http://[::1]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/with-custom-port/public' directory"
 `;
 
 exports[`serve with devServer in config Should pick up the host and port from config: stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
-<i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] Loopback: http://localhost:<port>/, http://[::1]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/with-custom-port/public' directory"
 `;
 
 exports[`serve with devServer in config works fine when no-hot flag is passed alongside other server config: stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
-<i> [webpack-dev-server] Loopback: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
-<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/
+<i> [webpack-dev-server] Loopback: http://localhost:<port>/, http://[::1]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://x.x.x.x:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/test/serve/with-custom-port/public' directory"
 `;

test/serve/with-custom-port/__snapshots__/serve-custom-config.test.js.snap.devServer4.webpack5

@@ -5,7 +5,6 @@ const stripAnsi = require("strip-ansi");
 const path = require("path");
 const fs = require("fs");
 const execa = require("execa");
-const internalIp = require("internal-ip");
 const { exec } = require("child_process");
 const { node: execaNode } = execa;
 const { Writable } = require("readable-stream");
@@ -272,6 +271,9 @@ const normalizeStdout = (stdout) => {
   return normalizedStdout;
 };
 
+const IPV4 = /(25[0-5]|2[0-4][0-9]|1?[0-9][0-9]{1,2})(\.(25[0-5]|2[0-4][0-9]|1?[0-9]{1,2})){3}/g;
+const IPV6 = /([0-9a-f]){1,4}(:([0-9a-f]){1,4}){7}/gi;
+
 const normalizeStderr = (stderr) => {
   if (typeof stderr !== "string") {
     return stderr;
@@ -284,18 +286,8 @@ const normalizeStderr = (stderr) => {
   let normalizedStderr = stripAnsi(stderr);
   normalizedStderr = normalizeCwd(normalizedStderr);
 
-  const networkIPv4 = internalIp.v4.sync();
-
-  if (networkIPv4) {
-    normalizedStderr = normalizedStderr.replace(new RegExp(networkIPv4, "g"), "<network-ip-v4>");
-  }
-
-  const networkIPv6 = internalIp.v6.sync();
-
-  if (networkIPv6) {
-    normalizedStderr = normalizedStderr.replace(new RegExp(networkIPv6, "g"), "<network-ip-v6>");
-  }
-
+  normalizedStderr = normalizedStderr.replace(IPV4, "x.x.x.x");
+  normalizedStderr = normalizedStderr.replace(IPV6, "[x:x:x:x:x:x:x:x]");
   normalizedStderr = normalizedStderr.replace(/:[0-9]+\//g, ":<port>/");
 
   if (!/On Your Network \(IPv6\)/.test(stderr)) {
@@ -310,7 +302,7 @@ const normalizeStderr = (stderr) => {
       normalizedStderr.splice(
         ipv4MessageIndex + 1,
         0,
-        "<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/",
+        "<i> [webpack-dev-server] On Your Network (IPv6): http://[x:x:x:x:x:x:x:x]:<port>/",
       );
     }