feat: publicPath output

lib/Server.js

@@ -2899,7 +2899,10 @@ class Server {
         return msg;
       },
     };
-    const useColor = getColorsOption(this.getCompilerOptions());
+
+    const compilerOptions = this.getCompilerOptions();
+
+    const useColor = getColorsOption(compilerOptions);
 
     const server = /** @type {S} */ (this.server);
 
@@ -2914,8 +2917,19 @@ class Server {
        * @param {string} newHostname
        * @returns {string}
        */
-      const prettyPrintURL = (newHostname) =>
-        url.format({ protocol, hostname: newHostname, port, pathname: "/" });
+      const prettyPrintURL = (newHostname) => {
+        const publicPath = compilerOptions.output.publicPath;
+
+        return url.format({
+          protocol,
+          hostname: newHostname,
+          port,
+          pathname:
+            typeof publicPath === "function" || publicPath === "auto"
+              ? "/"
+              : publicPath,
+        });
+      };
 
       let host;
       let localhost;
@@ -3062,6 +3076,12 @@ class Server {
         `Broadcasting "${bonjourProtocol}" with subtype of "webpack" via ZeroConf DNS (Bonjour)`,
       );
     }
+
+    if (typeof compilerOptions.output.publicPath === "function") {
+      this.logger.info(
+        `You probably have a custom public path, please navigate in your browser to the point that you required`,
+      );
+    }
   }
 
   /**

test/cli/__snapshots__/basic.test.js.snap.webpack5

@@ -8,6 +8,21 @@ exports[`basic basic should accept the promise function of webpack.config.js: st
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
+exports[`basic basic should respect output.publicPath config option in URL's output: stderr 1`] = `
+"<i> [webpack-dev-server] Project is running at:
+<i> Loopback: http://localhost:<port>/, http://<ip-v4>:<port>/, http://[<ip-v6>]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://<ip-v4>:<port>/foo/
+<i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`basic basic should show info message when output.publicPath is function: stderr 1`] = `
+"<i> [webpack-dev-server] Project is running at:
+<i> Loopback: http://localhost:<port>/, http://<ip-v4>:<port>/, http://[<ip-v6>]:<port>/
+<i> [webpack-dev-server] On Your Network (IPv4): http://<ip-v4>:<port>/
+<i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory
+<i> [webpack-dev-server] You probably have a custom public path, please navigate in your browser to the point that you required"
+`;
+
 exports[`basic basic should work using "--host localhost --port <port>": stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> Loopback: http://localhost:<port>/, http://<ip-v4>:<port>/, http://[<ip-v6>]:<port>/

test/cli/__snapshots__/server-option.test.js.snap.webpack5

@@ -1,8 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`"server" CLI options should work using "--no-server-options-request-cert" 1`] = `
-"<i> [webpack-dev-server] Generating SSL certificate...
-<i> [webpack-dev-server] SSL certificate: <cwd>/node_modules/.cache/webpack-dev-server/server.pem
+"<i> [webpack-dev-server] SSL certificate: <cwd>/node_modules/.cache/webpack-dev-server/server.pem
 <i> [webpack-dev-server] Project is running at:
 <i> Loopback: https://localhost:<port>/, https://<ip-v4>:<port>/, https://[<ip-v6>]:<port>/
 <i> [webpack-dev-server] On Your Network (IPv4): https://<ip-v4>:<port>/

test/cli/basic.test.js

@@ -57,6 +57,36 @@ describe("basic", () => {
       expect(normalizeStderr(stderr, { ipv6: true })).toMatchSnapshot("stderr");
     });
 
+    it("should respect output.publicPath config option in URL's output", async () => {
+      const { exitCode, stderr } = await testBin([
+        "--config",
+        path.resolve(
+          __dirname,
+          "../fixtures/cli-output-public-path-config/webpack.config.js",
+        ),
+        "--port",
+        port,
+      ]);
+
+      expect(exitCode).toEqual(0);
+      expect(normalizeStderr(stderr)).toMatchSnapshot("stderr");
+    });
+
+    it("should show info message when output.publicPath is function", async () => {
+      const { exitCode, stderr } = await testBin([
+        "--config",
+        path.resolve(
+          __dirname,
+          "../fixtures/cli-output-public-path-function-config/webpack.config.js",
+        ),
+        "--port",
+        port,
+      ]);
+
+      expect(exitCode).toEqual(0);
+      expect(normalizeStderr(stderr)).toMatchSnapshot("stderr");
+    });
+
     it("should work using multi compiler mode", async () => {
       const { exitCode, stderr } = await testBin([
         "--config",

test/fixtures/cli-output-public-path-config/foo.js

@@ -0,0 +1,3 @@
+"use strict";
+
+console.log("i am foo!");

test/fixtures/cli-output-public-path-config/webpack.config.js

@@ -0,0 +1,11 @@
+"use strict";
+
+const { join } = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: join(__dirname, "foo.js"),
+  output: {
+    publicPath: "/foo/",
+  },
+};

test/fixtures/cli-output-public-path-function-config/foo.js

@@ -0,0 +1,3 @@
+"use strict";
+
+console.log("i am foo!");

test/fixtures/cli-output-public-path-function-config/webpack.config.js

@@ -0,0 +1,11 @@
+"use strict";
+
+const { join } = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: join(__dirname, "foo.js"),
+  output: {
+    publicPath: () => "/any-public-path",
+  },
+};