fix: prefer to open the host option

lib/Server.js

@@ -586,92 +586,93 @@ class Server {
 
   showStatus() {
     const useColor = getColorsOption(getCompilerConfigArray(this.compiler));
-
     const protocol = this.options.https ? 'https' : 'http';
-    const { address: hostname, port } = this.server.address();
+    const { address, port } = this.server.address();
     const prettyPrintUrl = (newHostname) =>
       url.format({ protocol, hostname: newHostname, port, pathname: '/' });
 
-    let localhostForTerminal;
-    let networkUrlForTerminalIPv4;
-    let networkUrlForTerminalIPv6;
+    let server;
+    let localhost;
+    let loopbackIPv4;
+    let loopbackIPv6;
+    let networkUrlIPv4;
+    let networkUrlIPv6;
+
+    if (this.hostname) {
+      if (this.hostname === 'localhost') {
+        localhost = prettyPrintUrl('localhost');
+      } else {
+        let isIP;
+
+        try {
+          isIP = ipaddr.parse(this.hostname);
+        } catch (error) {
+          // Ignore
+        }
+
+        if (!isIP) {
+          server = prettyPrintUrl(this.hostname);
+        }
+      }
+    }
 
-    const parsedIP = ipaddr.parse(hostname);
-    const isUnspecified = parsedIP.range() === 'unspecified';
+    const parsedIP = ipaddr.parse(address);
 
-    if (isUnspecified) {
-      localhostForTerminal = prettyPrintUrl('localhost');
+    if (parsedIP.range() === 'unspecified') {
+      localhost = prettyPrintUrl('localhost');
 
       const networkIPv4 = internalIp.v4.sync();
 
       if (networkIPv4) {
-        networkUrlForTerminalIPv4 = prettyPrintUrl(networkIPv4);
+        networkUrlIPv4 = prettyPrintUrl(networkIPv4);
       }
 
-      if (hostname === '::') {
-        const networkIPv6 = internalIp.v6.sync();
+      const networkIPv6 = internalIp.v6.sync();
 
-        if (networkIPv6) {
-          networkUrlForTerminalIPv6 = prettyPrintUrl(networkIPv6);
-        }
+      if (networkIPv6) {
+        networkUrlIPv6 = prettyPrintUrl(networkIPv6);
       }
-    } else {
-      if (parsedIP.range() === 'loopback') {
-        localhostForTerminal = prettyPrintUrl('localhost');
+    } else if (parsedIP.range() === 'loopback') {
+      if (parsedIP.kind() === 'ipv4') {
+        loopbackIPv4 = prettyPrintUrl(parsedIP.toString());
+      } else if (parsedIP.kind() === 'ipv6') {
+        loopbackIPv6 = prettyPrintUrl(parsedIP.toString());
       }
+    } else {
+      networkUrlIPv4 =
+        parsedIP.kind() === 'ipv6' && parsedIP.isIPv4MappedAddress()
+          ? prettyPrintUrl(parsedIP.toIPv4Address().toString())
+          : prettyPrintUrl(address);
 
       if (parsedIP.kind() === 'ipv6') {
-        if (parsedIP.isIPv4MappedAddress()) {
-          networkUrlForTerminalIPv4 = prettyPrintUrl(
-            parsedIP.toIPv4Address().toString()
-          );
-        }
-      } else {
-        networkUrlForTerminalIPv4 = prettyPrintUrl(hostname);
+        networkUrlIPv6 = prettyPrintUrl(address);
       }
+    }
 
-      if (parsedIP.kind() === 'ipv6') {
-        networkUrlForTerminalIPv6 = prettyPrintUrl(hostname);
-      }
+    this.logger.info('Project is running at:');
+
+    if (server) {
+      this.logger.info(`Server: ${colors.info(useColor, server)}`);
     }
 
-    if (isUnspecified) {
-      this.logger.info('Project is running at:');
-      this.logger.info(`Local: ${colors.info(useColor, localhostForTerminal)}`);
-
-      const networkUrlsForTerminal = []
-        .concat(
-          networkUrlForTerminalIPv4
-            ? [`${colors.info(useColor, networkUrlForTerminalIPv4)} (IPv4)`]
-            : []
-        )
-        .concat(
-          networkUrlForTerminalIPv6
-            ? [`${colors.info(useColor, networkUrlForTerminalIPv6)} (IPv6)`]
-            : []
-        );
+    if (localhost || loopbackIPv4 || loopbackIPv6) {
+      const loopbacks = []
+        .concat(localhost ? [colors.info(useColor, localhost)] : [])
+        .concat(loopbackIPv4 ? [colors.info(useColor, loopbackIPv4)] : [])
+        .concat(loopbackIPv6 ? [colors.info(useColor, loopbackIPv6)] : []);
 
-      this.logger.info(`On Your Network: ${networkUrlsForTerminal.join(', ')}`);
-    } else {
-      const networkUrlsForTerminal = []
-        .concat(
-          localhostForTerminal
-            ? [`${colors.info(useColor, localhostForTerminal)}`]
-            : []
-        )
-        .concat(
-          networkUrlForTerminalIPv4
-            ? [`${colors.info(useColor, networkUrlForTerminalIPv4)} (IPv4)`]
-            : []
-        )
-        .concat(
-          networkUrlForTerminalIPv6
-            ? [`${colors.info(useColor, networkUrlForTerminalIPv6)} (IPv6)`]
-            : []
-        );
+      this.logger.info(`Loopback: ${loopbacks.join(', ')}`);
+    }
+
+    if (networkUrlIPv4) {
+      this.logger.info(
+        `On Your Network (IPv4): ${colors.info(useColor, networkUrlIPv4)}`
+      );
+    }
 
+    if (networkUrlIPv6) {
       this.logger.info(
-        `Project is running at ${networkUrlsForTerminal.join(', ')}`
+        `On Your Network (IPv6): ${colors.info(useColor, networkUrlIPv6)}`
       );
     }
 
@@ -716,12 +717,9 @@ class Server {
     }
 
     if (this.options.open || this.options.openPage) {
-      const uri =
-        localhostForTerminal ||
-        networkUrlForTerminalIPv4 ||
-        networkUrlForTerminalIPv6;
+      const openTarget = prettyPrintUrl(this.hostname || 'localhost');
 
-      runOpen(uri, this.options, this.logger);
+      runOpen(openTarget, this.options, this.logger);
     }
   }
 
@@ -740,7 +738,7 @@ class Server {
         .then((port) => {
           this.port = port;
 
-          return this.server.listen(port, hostname, (err) => {
+          return this.server.listen(port, hostname, (error) => {
             if (this.options.hot || this.options.liveReload) {
               this.createSocketServer();
             }
@@ -752,17 +750,17 @@ class Server {
             this.showStatus();
 
             if (fn) {
-              fn.call(this.server, err);
+              fn.call(this.server, error);
             }
 
             if (typeof this.options.onListening === 'function') {
               this.options.onListening(this);
             }
           });
         })
-        .catch((err) => {
+        .catch((error) => {
           if (fn) {
-            fn.call(this.server, err);
+            fn.call(this.server, error);
           }
         })
     );

test/cli/__snapshots__/cli.test.js.snap

@@ -2,51 +2,61 @@
 
 exports[`CLI --host :: (IPv6): stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
-<i> [webpack-dev-server] Local: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network: http://<network-ip-v4>:<port>/ (IPv4), http://[<network-ip-v6>]:<port>/ (IPv6)
+<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] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
 exports[`CLI --host ::1 (IPv6): stderr 1`] = `
-"<i> [webpack-dev-server] Project is running at http://localhost:<port>/, http://[::1]:<port>/ (IPv6)
+"<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] Loopback: http://[::1]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
 exports[`CLI --host <IPv4>: stderr 1`] = `
-"<i> [webpack-dev-server] Project is running at http://<network-ip-v4>:<port>/ (IPv4)
+"<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
 exports[`CLI --host 0.0.0.0 (IPv4): stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
-<i> [webpack-dev-server] Local: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network: http://<network-ip-v4>:<port>/ (IPv4)
+<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] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
 exports[`CLI --host 0:0:0:0:0:FFFF:7F00:0001 (IPv6): stderr 1`] = `
-"<i> [webpack-dev-server] Project is running at http://127.0.0.1:<port>/ (IPv4), http://[::ffff:127.0.0.1]:<port>/ (IPv6)
+"<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] On Your Network (IPv4): http://127.0.0.1:<port>/
+<i> [webpack-dev-server] On Your Network (IPv6): http://[::ffff:127.0.0.1]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
 exports[`CLI --host 127.0.0.1 (IPv4): stderr 1`] = `
-"<i> [webpack-dev-server] Project is running at http://localhost:<port>/, http://127.0.0.1:<port>/ (IPv4)
+"<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] Loopback: http://127.0.0.1:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
 exports[`CLI --host and --port are unspecified: stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
-<i> [webpack-dev-server] Local: http://localhost:<port>/
-<i> [webpack-dev-server] On Your Network: http://<network-ip-v4>:<port>/ (IPv4), http://[<network-ip-v6>]:<port>/ (IPv6)
+<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] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
 exports[`CLI --host localhost --port 9999: stderr 1`] = `
-"<i> [webpack-dev-server] Project is running at http://localhost:<port>/, http://127.0.0.1:<port>/ (IPv4)
+"<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] Loopback: http://localhost:<port>/, http://127.0.0.1:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
 exports[`CLI --host localhost: stderr 1`] = `
-"<i> [webpack-dev-server] Project is running at http://localhost:<port>/, http://127.0.0.1:<port>/ (IPv4)
+"<i> [webpack-dev-server] Project is running at:
+<i> [webpack-dev-server] Loopback: http://localhost:<port>/, http://127.0.0.1:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;

test/cli/cli.test.js

@@ -109,7 +109,9 @@ describe('CLI', () => {
   it('--host 0.0.0.0 (IPv4)', (done) => {
     testBin('--host 0.0.0.0')
       .then((output) => {
-        expect(normalizeStderr(output.stderr)).toMatchSnapshot('stderr');
+        expect(normalizeStderr(output.stderr, { ipv6: true })).toMatchSnapshot(
+          'stderr'
+        );
 
         done();
       })

test/helpers/test-bin.js

@@ -62,10 +62,19 @@ function normalizeStderr(stderr, options = {}) {
 
   if (options.ipv6 && !networkIPv6) {
     // Github Actions doesnt' support IPv6 on ubuntu in some cases
-    normalizedStderr = normalizedStderr.replace(
-      /\(IPv4\)/,
-      '(IPv4), http://[<network-ip-v6>]:<port>/ (IPv6)'
+    normalizedStderr = normalizedStderr.split('\n');
+
+    const ipv4MessageIndex = normalizedStderr.findIndex((item) =>
+      /On Your Network \(IPv4\)/.test(item)
     );
+
+    normalizedStderr.splice(
+      ipv4MessageIndex + 1,
+      0,
+      '<i> [webpack-dev-server] On Your Network (IPv6): http://[<network-ip-v6>]:<port>/'
+    );
+
+    normalizedStderr = normalizedStderr.join('\n');
   }
 
   return normalizedStderr;