feat: <url> pattern for open

README.md

@@ -137,8 +137,7 @@ Options:
   --open [value...]                         Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser).
                                             https://webpack.js.org/configuration/dev-server/#devserveropen
   --no-open                                 Negative 'open' option.
-  --open-target [value...]                  Opens specified page in browser.
-  --no-open-target                          Negative 'open-target' option.
+  --open-target <value...>                  Opens specified page in browser.
   --open-app-name <value...>                Open specified browser.
   --open-app <value...>                     Open specified browser.
   --open-reset                              Clear all items provided in 'open' configuration. Allows to configure dev server to open the browser(s) and page(s) after server had been started

bin/cli-flags.js

@@ -575,12 +575,6 @@ module.exports = {
   },
   'open-target': {
     configs: [
-      {
-        type: 'boolean',
-        multiple: true,
-        description: 'Opens specified page in browser.',
-        path: 'open[].target',
-      },
       {
         type: 'string',
         multiple: true,

lib/Server.js

@@ -643,78 +643,30 @@ class Server {
     });
   }
 
-  openBrowser(uri) {
+  openBrowser(defaultOpenTarget) {
     const isAbsoluteUrl = require('is-absolute-url');
     const open = require('open');
 
-    // https://github.com/webpack/webpack-dev-server/issues/1990
-    const defaultOpenOptions = { wait: false };
-    const openTasks = [];
-
-    const getOpenTask = (item) => {
-      if (typeof item === 'boolean') {
-        return [{ target: uri, options: defaultOpenOptions }];
-      }
-
-      if (typeof item === 'string') {
-        return [{ target: item, options: defaultOpenOptions }];
-      }
-
-      let targets;
-
-      if (item.target) {
-        targets = Array.isArray(item.target) ? item.target : [item.target];
-      } else {
-        targets = [uri];
-      }
-
-      return targets.map((target) => {
-        const openOptions = defaultOpenOptions;
-
-        if (item.app) {
-          if (typeof item.app === 'string') {
-            openOptions.app = { name: item.app };
-          } else {
-            openOptions.app = item.app;
-          }
-        }
-
-        return { target, options: openOptions };
-      });
-    };
-
-    if (Array.isArray(this.options.open)) {
-      this.options.open.forEach((item) => {
-        openTasks.push(...getOpenTask(item));
-      });
-    } else {
-      openTasks.push(...getOpenTask(this.options.open));
-    }
-
     Promise.all(
-      openTasks.map((openTask) => {
+      this.options.open.map((item) => {
         let openTarget;
 
-        if (openTask.target) {
-          if (typeof openTask.target === 'boolean') {
-            openTarget = uri;
-          } else {
-            openTarget = isAbsoluteUrl(openTask.target)
-              ? openTask.target
-              : new URL(openTask.target, uri).toString();
-          }
+        if (item.target === '<url>') {
+          openTarget = defaultOpenTarget;
         } else {
-          openTarget = uri;
+          openTarget = isAbsoluteUrl(item.target)
+            ? item.target
+            : new URL(item.target, defaultOpenTarget).toString();
         }
 
-        return open(openTarget, openTask.options).catch(() => {
+        return open(openTarget, item.options).catch(() => {
           this.logger.warn(
             `Unable to open "${openTarget}" page${
               // eslint-disable-next-line no-nested-ternary
-              openTask.options.app
-                ? ` in "${openTask.options.app.name}" app${
-                    openTask.options.app.arguments
-                      ? ` with "${openTask.options.app.arguments.join(
+              item.options.app
+                ? ` in "${item.options.app.name}" app${
+                    item.options.app.arguments
+                      ? ` with "${item.options.app.arguments.join(
                           ' '
                         )}" arguments`
                       : ''
@@ -766,7 +718,7 @@ class Server {
     } else {
       const protocol = this.options.https ? 'https' : 'http';
       const { address, port } = this.server.address();
-      const prettyPrintUrl = (newHostname) =>
+      const prettyPrintURL = (newHostname) =>
         url.format({ protocol, hostname: newHostname, port, pathname: '/' });
 
       let server;
@@ -778,7 +730,7 @@ class Server {
 
       if (this.options.host) {
         if (this.options.host === 'localhost') {
-          localhost = prettyPrintUrl('localhost');
+          localhost = prettyPrintURL('localhost');
         } else {
           let isIP;
 
@@ -789,41 +741,41 @@ class Server {
           }
 
           if (!isIP) {
-            server = prettyPrintUrl(this.options.host);
+            server = prettyPrintURL(this.options.host);
           }
         }
       }
 
       const parsedIP = ipaddr.parse(address);
 
       if (parsedIP.range() === 'unspecified') {
-        localhost = prettyPrintUrl('localhost');
+        localhost = prettyPrintURL('localhost');
 
         const networkIPv4 = internalIp.v4.sync();
 
         if (networkIPv4) {
-          networkUrlIPv4 = prettyPrintUrl(networkIPv4);
+          networkUrlIPv4 = prettyPrintURL(networkIPv4);
         }
 
         const networkIPv6 = internalIp.v6.sync();
 
         if (networkIPv6) {
-          networkUrlIPv6 = prettyPrintUrl(networkIPv6);
+          networkUrlIPv6 = prettyPrintURL(networkIPv6);
         }
       } else if (parsedIP.range() === 'loopback') {
         if (parsedIP.kind() === 'ipv4') {
-          loopbackIPv4 = prettyPrintUrl(parsedIP.toString());
+          loopbackIPv4 = prettyPrintURL(parsedIP.toString());
         } else if (parsedIP.kind() === 'ipv6') {
-          loopbackIPv6 = prettyPrintUrl(parsedIP.toString());
+          loopbackIPv6 = prettyPrintURL(parsedIP.toString());
         }
       } else {
         networkUrlIPv4 =
           parsedIP.kind() === 'ipv6' && parsedIP.isIPv4MappedAddress()
-            ? prettyPrintUrl(parsedIP.toIPv4Address().toString())
-            : prettyPrintUrl(address);
+            ? prettyPrintURL(parsedIP.toIPv4Address().toString())
+            : prettyPrintURL(address);
 
         if (parsedIP.kind() === 'ipv6') {
-          networkUrlIPv6 = prettyPrintUrl(address);
+          networkUrlIPv6 = prettyPrintURL(address);
         }
       }
 
@@ -854,8 +806,8 @@ class Server {
         );
       }
 
-      if (this.options.open) {
-        const openTarget = prettyPrintUrl(this.options.host || 'localhost');
+      if (this.options.open.length > 0) {
+        const openTarget = prettyPrintURL(this.options.host || 'localhost');
 
         this.openBrowser(openTarget);
       }

lib/options.json

@@ -379,9 +379,6 @@
                 "type": "string"
               }
             },
-            {
-              "type": "boolean"
-            },
             {
               "type": "string"
             }

lib/utils/normalizeOptions.js

@@ -230,6 +230,54 @@ function normalizeOptions(compiler, options, logger, cacheDir) {
   options.liveReload =
     typeof options.liveReload !== 'undefined' ? options.liveReload : true;
 
+  // https://github.com/webpack/webpack-dev-server/issues/1990
+  const defaultOpenOptions = { wait: false };
+  const getOpenItemsFromObject = ({ target, ...rest }) => {
+    const normalizedOptions = { ...defaultOpenOptions, ...rest };
+
+    if (typeof normalizedOptions.app === 'string') {
+      normalizedOptions.app = {
+        name: normalizedOptions.app,
+      };
+    }
+
+    const normalizedTarget = typeof target === 'undefined' ? '<url>' : target;
+
+    if (Array.isArray(normalizedTarget)) {
+      return normalizedTarget.map((singleTarget) => {
+        return { target: singleTarget, options: normalizedOptions };
+      });
+    }
+
+    return [{ target: normalizedTarget, options: normalizedOptions }];
+  };
+
+  if (typeof options.open === 'undefined') {
+    options.open = [];
+  } else if (typeof options.open === 'boolean') {
+    options.open = options.open
+      ? [{ target: '<url>', options: defaultOpenOptions }]
+      : [];
+  } else if (typeof options.open === 'string') {
+    options.open = [{ target: options.open, options: defaultOpenOptions }];
+  } else if (Array.isArray(options.open)) {
+    const result = [];
+
+    options.open.forEach((item) => {
+      if (typeof item === 'string') {
+        result.push({ target: item, options: defaultOpenOptions });
+
+        return;
+      }
+
+      result.push(...getOpenItemsFromObject(item));
+    });
+
+    options.open = result;
+  } else {
+    options.open = [...getOpenItemsFromObject(options.open)];
+  }
+
   if (typeof options.port === 'string' && options.port !== 'auto') {
     options.port = Number(options.port);
   }

test/__snapshots__/validate-options.test.js.snap.webpack4

@@ -450,12 +450,11 @@ exports[`options validate should throw an error on the "open" option with '{"tar
    -> Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser). https://webpack.js.org/configuration/dev-server/#devserveropen
    Details:
     * options.open.target should be one of these:
-      [string, ...] | boolean | string
+      [string, ...] | string
       -> Opens specified page in browser.
       Details:
        * options.open.target should be an array:
          [string, ...]
-       * options.open.target should be a boolean.
        * options.open.target should be a string."
 `;
 

test/__snapshots__/validate-options.test.js.snap.webpack5

@@ -450,12 +450,11 @@ exports[`options validate should throw an error on the "open" option with '{"tar
    -> Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser). https://webpack.js.org/configuration/dev-server/#devserveropen
    Details:
     * options.open.target should be one of these:
-      [string, ...] | boolean | string
+      [string, ...] | string
       -> Opens specified page in browser.
       Details:
        * options.open.target should be an array:
          [string, ...]
-       * options.open.target should be a boolean.
        * options.open.target should be a string."
 `;
 

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

@@ -87,8 +87,7 @@ Options:
   --no-live-reload                          Disables reload/refresh the page(s) when file changes are detected (enabled by default)
   --open [value...]                         Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser). https://webpack.js.org/configuration/dev-server/#devserveropen
   --no-open                                 Does not open the default browser.
-  --open-target [value...]                  Opens specified page in browser.
-  --no-open-target                          Does not open specified page in browser.
+  --open-target <value...>                  Opens specified page in browser.
   --open-app-name <value...>                Open specified browser.
   --open-app <value...>                     Open specified browser.
   --open-reset                              Clear all items provided in 'open' configuration. Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser). https://webpack.js.org/configuration/dev-server/#devserveropen

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

@@ -87,8 +87,7 @@ Options:
   --no-live-reload                          Negative 'live-reload' option.
   --open [value...]                         Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser). https://webpack.js.org/configuration/dev-server/#devserveropen
   --no-open                                 Negative 'open' option.
-  --open-target [value...]                  Opens specified page in browser.
-  --no-open-target                          Negative 'open-target' option.
+  --open-target <value...>                  Opens specified page in browser.
   --open-app-name <value...>                Open specified browser.
   --open-app <value...>                     Open specified browser.
   --open-reset                              Clear all items provided in 'open' configuration. Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser). https://webpack.js.org/configuration/dev-server/#devserveropen

test/cli/__snapshots__/host-option.test.js.snap.webpack4

@@ -14,6 +14,12 @@ exports[`"host" CLI option should work using "--host ::1" (IPv6): stderr 1`] = `
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
+exports[`"host" CLI option should work using "--host ::1" (IPv6): stderr 2`] = `
+"<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[`"host" CLI option should work using "--host <IPv4>": stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
@@ -28,13 +34,6 @@ exports[`"host" CLI option should work using "--host 0.0.0.0" (IPv4): stderr 1`]
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
-exports[`"host" CLI option should work using "--host 0:0:0:0:0:FFFF:7F00:0001" (IPv6): stderr 1`] = `
-"<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[`"host" CLI option should work using "--host 127.0.0.1" (IPv4): stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: http://127.0.0.1:<port>/

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

@@ -14,6 +14,12 @@ exports[`"host" CLI option should work using "--host ::1" (IPv6): stderr 1`] = `
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
+exports[`"host" CLI option should work using "--host ::1" (IPv6): stderr 2`] = `
+"<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[`"host" CLI option should work using "--host <IPv4>": stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] On Your Network (IPv4): http://<network-ip-v4>:<port>/
@@ -28,13 +34,6 @@ exports[`"host" CLI option should work using "--host 0.0.0.0" (IPv4): stderr 1`]
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
-exports[`"host" CLI option should work using "--host 0:0:0:0:0:FFFF:7F00:0001" (IPv6): stderr 1`] = `
-"<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[`"host" CLI option should work using "--host 127.0.0.1" (IPv4): stderr 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: http://127.0.0.1:<port>/