feat: publicPath output

Author: adubrouski

lib/Server.js

@@ -2868,7 +2868,10 @@ class Server {
         return msg;
       },
     };
-    const useColor = getColorsOption(this.getCompilerOptions());
+
+    const compilerOptions = this.getCompilerOptions();
+
+    const useColor = getColorsOption(compilerOptions);
 
     const server = /** @type {S} */ (this.server);
 
@@ -2883,8 +2886,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;

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

@@ -8,6 +8,13 @@ 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 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/basic.test.js

@@ -57,6 +57,21 @@ 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 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/",
+  },
+};