From 1dd779e9971b91941c6b9e3ad864321c59d8f266 Mon Sep 17 00:00:00 2001
From: Anshuman Verma <anshu.av97@gmail.com>
Date: Thu, 17 Jun 2021 22:40:42 +0530
Subject: [PATCH 1/8] feat: allow username and password in clientURL

---
 lib/options.json                              |  8 ++
 lib/utils/DevServerPlugin.js                  | 21 ++++-
 lib/utils/normalizeOptions.js                 |  2 +
 .../validate-options.test.js.snap.webpack4    | 14 ++-
 .../validate-options.test.js.snap.webpack5    | 14 ++-
 test/e2e/web-socket-server-url.test.js        | 88 ++++++++++++++++++-
 test/ports-map.js                             |  2 +-
 .../normalizeOptions.test.js.snap.webpack4    | 38 ++++++++
 .../normalizeOptions.test.js.snap.webpack5    | 38 ++++++++
 test/server/utils/normalizeOptions.test.js    | 13 +++
 test/validate-options.test.js                 |  6 ++
 11 files changed, 239 insertions(+), 5 deletions(-)

diff --git a/lib/options.json b/lib/options.json
index 52cd0e9eba..4d9fd6be38 100644
--- a/lib/options.json
+++ b/lib/options.json
@@ -154,6 +154,14 @@
               "description": "Tells clients connected to devServer to use the provided path to connect.",
               "type": "string"
             },
+            "username": {
+              "description": "Tells clients connected to devServer to use the provided username to connect.",
+              "type": "string"
+            },
+            "password": {
+              "description": "Tells clients connected to devServer to use the provided password to connect.",
+              "type": "string"
+            },
             "port": {
               "description": "Tells clients connected to devServer to use the provided port.",
               "anyOf": [
diff --git a/lib/utils/DevServerPlugin.js b/lib/utils/DevServerPlugin.js
index 26e0181a74..11fbf2f1db 100644
--- a/lib/utils/DevServerPlugin.js
+++ b/lib/utils/DevServerPlugin.js
@@ -93,6 +93,7 @@ class DevServerPlugin {
     if (typeof options.client.webSocketURL.path !== 'undefined') {
       path = options.client.webSocketURL.path;
     }
+
     // Web socket server works on custom `path`
     else if (
       typeof options.webSocketServer.options.prefix !== 'undefined' ||
@@ -103,6 +104,22 @@ class DevServerPlugin {
         options.webSocketServer.options.path;
     }
 
+    /** @type {string} */
+    let username = '';
+
+    // We are proxying dev server and need to specify custom `path`
+    if (typeof options.client.webSocketURL.username !== 'undefined') {
+      username = options.client.webSocketURL.username;
+    }
+
+    /** @type {string} */
+    let password = '';
+
+    // We are proxying dev server and need to specify custom `path`
+    if (typeof options.client.webSocketURL.password !== 'undefined') {
+      password = options.client.webSocketURL.password;
+    }
+
     /** @type {Record<string, any>} */
     const searchParams = {};
 
@@ -112,7 +129,9 @@ class DevServerPlugin {
 
     return encodeURIComponent(
       new URL(
-        `${protocol}//${ipaddr.IPv6.isIPv6(host) ? `[${host}]` : host}${
+        `${protocol}//${
+          username && password ? `${username}:${password}@` : ''
+        }${ipaddr.IPv6.isIPv6(host) ? `[${host}]` : host}${
           port ? `:${port}` : ''
         }${path || '/'}${
           Object.keys(searchParams).length > 0
diff --git a/lib/utils/normalizeOptions.js b/lib/utils/normalizeOptions.js
index abcc5f40c8..50dc9121dc 100644
--- a/lib/utils/normalizeOptions.js
+++ b/lib/utils/normalizeOptions.js
@@ -124,6 +124,8 @@ function normalizeOptions(compiler, options, logger) {
       host: parsedURL.hostname,
       port: parsedURL.port.length > 0 ? Number(parsedURL.port) : '',
       path: parsedURL.pathname,
+      username: parsedURL.username,
+      password: parsedURL.password,
     };
   } else if (typeof options.client.webSocketURL.port === 'string') {
     options.client.webSocketURL.port = Number(options.client.webSocketURL.port);
diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack4 b/test/__snapshots__/validate-options.test.js.snap.webpack4
index ef404505a2..cab385cdf8 100644
--- a/test/__snapshots__/validate-options.test.js.snap.webpack4
+++ b/test/__snapshots__/validate-options.test.js.snap.webpack4
@@ -172,7 +172,7 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"port":true}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, port?, protocol? }
+   non-empty string | object { host?, path?, username?, password?, port?, protocol? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.port should be one of these:
@@ -183,6 +183,18 @@ exports[`options validate should throw an error on the "client" option with '{"w
        * options.client.webSocketURL.port should be a non-empty string."
 `;
 
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"username":123,"password":976}}' value 1`] = `
+"ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
+ - options.client.webSocketURL should be one of these:
+   non-empty string | object { host?, path?, username?, password?, port?, protocol? }
+   -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
+   Details:
+    * options.client.webSocketURL.username should be a string.
+      -> Tells clients connected to devServer to use the provided username to connect.
+    * options.client.webSocketURL.password should be a string.
+      -> Tells clients connected to devServer to use the provided password to connect."
+`;
+
 exports[`options validate should throw an error on the "client" option with 'whoops!' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client should be an object:
diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack5 b/test/__snapshots__/validate-options.test.js.snap.webpack5
index ef404505a2..cab385cdf8 100644
--- a/test/__snapshots__/validate-options.test.js.snap.webpack5
+++ b/test/__snapshots__/validate-options.test.js.snap.webpack5
@@ -172,7 +172,7 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"port":true}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, port?, protocol? }
+   non-empty string | object { host?, path?, username?, password?, port?, protocol? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.port should be one of these:
@@ -183,6 +183,18 @@ exports[`options validate should throw an error on the "client" option with '{"w
        * options.client.webSocketURL.port should be a non-empty string."
 `;
 
+exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"username":123,"password":976}}' value 1`] = `
+"ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
+ - options.client.webSocketURL should be one of these:
+   non-empty string | object { host?, path?, username?, password?, port?, protocol? }
+   -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
+   Details:
+    * options.client.webSocketURL.username should be a string.
+      -> Tells clients connected to devServer to use the provided username to connect.
+    * options.client.webSocketURL.password should be a string.
+      -> Tells clients connected to devServer to use the provided password to connect."
+`;
+
 exports[`options validate should throw an error on the "client" option with 'whoops!' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client should be an object:
diff --git a/test/e2e/web-socket-server-url.test.js b/test/e2e/web-socket-server-url.test.js
index e7165d9ab0..d83e6696e2 100644
--- a/test/e2e/web-socket-server-url.test.js
+++ b/test/e2e/web-socket-server-url.test.js
@@ -7,7 +7,8 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
 const Server = require('../../lib/Server');
 const config = require('../fixtures/client-config/webpack.config');
 const runBrowser = require('../helpers/run-browser');
-const [port1, port2, port3, port4] = require('../ports-map').ClientOptions;
+const [port1, port2, port3, port4, port5] =
+  require('../ports-map').ClientOptions;
 
 const webSocketServers = ['ws', 'sockjs'];
 
@@ -1187,6 +1188,91 @@ describe('web socket server URL', () => {
       });
     });
 
+    it(`should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("${webSocketServer}")`, async () => {
+      const compiler = webpack(config);
+      const devServerOptions = {
+        client: {
+          webSocketURL: {
+            username: 'zenitsu',
+            password: 'chuntaro',
+          },
+        },
+        webSocketServer,
+        port: port5,
+        host: '0.0.0.0',
+        allowedHosts: 'all',
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await new Promise((resolve, reject) => {
+        server.listen(devServerOptions.port, devServerOptions.host, (error) => {
+          if (error) {
+            reject(error);
+
+            return;
+          }
+
+          resolve();
+        });
+      });
+
+      const { page, browser } = await runBrowser();
+
+      const pageErrors = [];
+      const consoleMessages = [];
+
+      page
+        .on('console', (message) => {
+          consoleMessages.push(message);
+        })
+        .on('pageerror', (error) => {
+          pageErrors.push(error);
+        });
+
+      const webSocketRequests = [];
+
+      if (webSocketServer === 'ws') {
+        const client = page._client;
+
+        client.on('Network.webSocketCreated', (test) => {
+          webSocketRequests.push(test);
+        });
+      } else {
+        page.on('request', (request) => {
+          if (/\/ws\//.test(request.url())) {
+            webSocketRequests.push({ url: request.url() });
+          }
+        });
+      }
+
+      await page.goto(`http://127.0.0.1:${port5}/main`, {
+        waitUntil: 'networkidle0',
+      });
+
+      const webSocketRequest = webSocketRequests[0];
+
+      expect(webSocketRequest.url).toContain(
+        `${websocketURLProtocol}://127.0.0.1:${port5}/ws`
+      );
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        'console messages'
+      );
+      expect(pageErrors).toMatchSnapshot('page errors');
+
+      await browser.close();
+      await new Promise((resolve, reject) => {
+        server.close((error) => {
+          if (error) {
+            reject(error);
+
+            return;
+          }
+
+          resolve();
+        });
+      });
+    });
+
     it(`should work with the "client.webSocketURL.path" option and custom web socket server "path" ("${webSocketServer}")`, async () => {
       const compiler = webpack(config);
       const devServerOptions = {
diff --git a/test/ports-map.js b/test/ports-map.js
index dbffb5b182..ddfe57e1f3 100644
--- a/test/ports-map.js
+++ b/test/ports-map.js
@@ -8,7 +8,7 @@ const portsList = {
   SockJSServer: 1,
   'hot-and-live-reload': 1,
   Client: 1,
-  ClientOptions: 4,
+  ClientOptions: 5,
   logging: 1,
   overlay: 1,
   MultiCompiler: 1,
diff --git a/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack4 b/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack4
index 91a974cfcd..a4f16ef6e4 100644
--- a/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack4
+++ b/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack4
@@ -1418,6 +1418,44 @@ Object {
 }
 `;
 
+exports[`normalizeOptions username and password should set correct options 1`] = `
+Object {
+  "allowedHosts": "auto",
+  "client": Object {
+    "hotEntry": true,
+    "overlay": true,
+    "webSocketURL": Object {
+      "password": "chuntaro",
+      "username": "zenitsu",
+    },
+  },
+  "compress": true,
+  "devMiddleware": Object {},
+  "hot": true,
+  "liveReload": true,
+  "setupExitSignals": true,
+  "static": Array [
+    Object {
+      "directory": "CWD",
+      "publicPath": Array [
+        "/",
+      ],
+      "serveIndex": Object {
+        "icons": true,
+      },
+      "staticOptions": Object {},
+      "watch": Object {},
+    },
+  ],
+  "webSocketServer": Object {
+    "options": Object {
+      "path": "/ws",
+    },
+    "type": "ws",
+  },
+}
+`;
+
 exports[`normalizeOptions webSocketServer custom server class should set correct options 1`] = `
 Object {
   "allowedHosts": "auto",
diff --git a/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack5 b/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack5
index 91a974cfcd..a4f16ef6e4 100644
--- a/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack5
+++ b/test/server/utils/__snapshots__/normalizeOptions.test.js.snap.webpack5
@@ -1418,6 +1418,44 @@ Object {
 }
 `;
 
+exports[`normalizeOptions username and password should set correct options 1`] = `
+Object {
+  "allowedHosts": "auto",
+  "client": Object {
+    "hotEntry": true,
+    "overlay": true,
+    "webSocketURL": Object {
+      "password": "chuntaro",
+      "username": "zenitsu",
+    },
+  },
+  "compress": true,
+  "devMiddleware": Object {},
+  "hot": true,
+  "liveReload": true,
+  "setupExitSignals": true,
+  "static": Array [
+    Object {
+      "directory": "CWD",
+      "publicPath": Array [
+        "/",
+      ],
+      "serveIndex": Object {
+        "icons": true,
+      },
+      "staticOptions": Object {},
+      "watch": Object {},
+    },
+  ],
+  "webSocketServer": Object {
+    "options": Object {
+      "path": "/ws",
+    },
+    "type": "ws",
+  },
+}
+`;
+
 exports[`normalizeOptions webSocketServer custom server class should set correct options 1`] = `
 Object {
   "allowedHosts": "auto",
diff --git a/test/server/utils/normalizeOptions.test.js b/test/server/utils/normalizeOptions.test.js
index 28518a448f..a922ef5968 100644
--- a/test/server/utils/normalizeOptions.test.js
+++ b/test/server/utils/normalizeOptions.test.js
@@ -152,6 +152,19 @@ describe('normalizeOptions', () => {
       },
       optionsResults: null,
     },
+    {
+      title: 'username and password',
+      multiCompiler: false,
+      options: {
+        client: {
+          webSocketURL: {
+            username: 'zenitsu',
+            password: 'chuntaro',
+          },
+        },
+      },
+      optionsResults: null,
+    },
     {
       title: 'client path without leading/ending slashes',
       multiCompiler: false,
diff --git a/test/validate-options.test.js b/test/validate-options.test.js
index 9533c29976..e256bb4f4e 100644
--- a/test/validate-options.test.js
+++ b/test/validate-options.test.js
@@ -98,6 +98,9 @@ const tests = {
       {
         webSocketURL: { host: 'localhost', port: 8080, path: '/my-path/' },
       },
+      {
+        webSocketURL: { username: 'zoro', password: 'roronoa' },
+      },
     ],
     failure: [
       'whoops!',
@@ -155,6 +158,9 @@ const tests = {
       {
         webSocketURL: { port: '' },
       },
+      {
+        webSocketURL: { username: 123, password: 976 },
+      },
     ],
   },
   compress: {

From 53d7a05af31083eed6fcc2634ff2c85044a52364 Mon Sep 17 00:00:00 2001
From: Anshuman Verma <anshu.av97@gmail.com>
Date: Thu, 17 Jun 2021 23:59:40 +0530
Subject: [PATCH 2/8] feat: allow username and password in clientURL

---
 ...eb-socket-server-url.test.js.snap.webpack4 | 22 +++++++++++++++++++
 ...eb-socket-server-url.test.js.snap.webpack5 | 22 +++++++++++++++++++
 test/e2e/web-socket-server-url.test.js        |  2 +-
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack4 b/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack4
index 3fa7d6ecd7..f980e9aa0b 100644
--- a/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack4
@@ -436,3 +436,25 @@ Array [
 `;
 
 exports[`web socket server URL should work with the "client.webSocketURL.protocol" option using "http:" value and covert to "ws:" ("ws"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("sockjs"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("sockjs"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("ws"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("ws"): page errors 1`] = `Array []`;
diff --git a/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack5 b/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack5
index 3fa7d6ecd7..f980e9aa0b 100644
--- a/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack5
@@ -436,3 +436,25 @@ Array [
 `;
 
 exports[`web socket server URL should work with the "client.webSocketURL.protocol" option using "http:" value and covert to "ws:" ("ws"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("sockjs"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("sockjs"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("ws"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("ws"): page errors 1`] = `Array []`;
diff --git a/test/e2e/web-socket-server-url.test.js b/test/e2e/web-socket-server-url.test.js
index d83e6696e2..bdbb92d4e2 100644
--- a/test/e2e/web-socket-server-url.test.js
+++ b/test/e2e/web-socket-server-url.test.js
@@ -1252,7 +1252,7 @@ describe('web socket server URL', () => {
       const webSocketRequest = webSocketRequests[0];
 
       expect(webSocketRequest.url).toContain(
-        `${websocketURLProtocol}://127.0.0.1:${port5}/ws`
+        `${websocketURLProtocol}://zenitsu:chuntaro@127.0.0.1:${port5}/ws`
       );
       expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
         'console messages'

From 6490762f5cf7a9133c53dae271054844b2bcd24f Mon Sep 17 00:00:00 2001
From: Anshuman Verma <anshu.av97@gmail.com>
Date: Fri, 18 Jun 2021 01:39:43 +0530
Subject: [PATCH 3/8] feat: allow username and password in clientURL

---
 bin/cli-flags.js | 30 ++++++++++++++++++++++++++++++
 lib/options.json |  4 ++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/bin/cli-flags.js b/bin/cli-flags.js
index b2a71e92b8..8d3044cbee 100644
--- a/bin/cli-flags.js
+++ b/bin/cli-flags.js
@@ -275,6 +275,36 @@ module.exports = {
     multiple: false,
     simpleType: 'string',
   },
+  'client-web-socket-url-username': {
+    configs: [
+      {
+        type: 'string',
+        multiple: false,
+        description:
+          'Tells clients connected to devServer to use the provided username to authenticate.',
+        path: 'client.webSocketURL.username',
+      },
+    ],
+    description:
+      'Tells clients connected to devServer to use the provided username to authenticate.',
+    simpleType: 'string',
+    multiple: false,
+  },
+  'client-web-socket-url-password': {
+    configs: [
+      {
+        type: 'string',
+        multiple: false,
+        description:
+          'Tells clients connected to devServer to use the provided password to authenticate.',
+        path: 'client.webSocketURL.password',
+      },
+    ],
+    description:
+      'Tells clients connected to devServer to use the provided password to authenticate.',
+    simpleType: 'string',
+    multiple: false,
+  },
   'web-socket-server': {
     configs: [
       {
diff --git a/lib/options.json b/lib/options.json
index 4d9fd6be38..08c19d8e53 100644
--- a/lib/options.json
+++ b/lib/options.json
@@ -155,11 +155,11 @@
               "type": "string"
             },
             "username": {
-              "description": "Tells clients connected to devServer to use the provided username to connect.",
+              "description": "Tells clients connected to devServer to use the provided username to authenticate.",
               "type": "string"
             },
             "password": {
-              "description": "Tells clients connected to devServer to use the provided password to connect.",
+              "description": "Tells clients connected to devServer to use the provided password to authenticate.",
               "type": "string"
             },
             "port": {

From d7cb671dd3fcfab6d418bb98854861403384dd84 Mon Sep 17 00:00:00 2001
From: Anshuman Verma <anshu.av97@gmail.com>
Date: Fri, 18 Jun 2021 01:52:21 +0530
Subject: [PATCH 4/8] feat: allow username and password in clientURL

---
 test/__snapshots__/validate-options.test.js.snap.webpack4 | 4 ++--
 test/__snapshots__/validate-options.test.js.snap.webpack5 | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack4 b/test/__snapshots__/validate-options.test.js.snap.webpack4
index cab385cdf8..34a94a4976 100644
--- a/test/__snapshots__/validate-options.test.js.snap.webpack4
+++ b/test/__snapshots__/validate-options.test.js.snap.webpack4
@@ -190,9 +190,9 @@ exports[`options validate should throw an error on the "client" option with '{"w
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.username should be a string.
-      -> Tells clients connected to devServer to use the provided username to connect.
+      -> Tells clients connected to devServer to use the provided username to authenticate.
     * options.client.webSocketURL.password should be a string.
-      -> Tells clients connected to devServer to use the provided password to connect."
+      -> Tells clients connected to devServer to use the provided password to authenticate."
 `;
 
 exports[`options validate should throw an error on the "client" option with 'whoops!' value 1`] = `
diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack5 b/test/__snapshots__/validate-options.test.js.snap.webpack5
index cab385cdf8..34a94a4976 100644
--- a/test/__snapshots__/validate-options.test.js.snap.webpack5
+++ b/test/__snapshots__/validate-options.test.js.snap.webpack5
@@ -190,9 +190,9 @@ exports[`options validate should throw an error on the "client" option with '{"w
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.username should be a string.
-      -> Tells clients connected to devServer to use the provided username to connect.
+      -> Tells clients connected to devServer to use the provided username to authenticate.
     * options.client.webSocketURL.password should be a string.
-      -> Tells clients connected to devServer to use the provided password to connect."
+      -> Tells clients connected to devServer to use the provided password to authenticate."
 `;
 
 exports[`options validate should throw an error on the "client" option with 'whoops!' value 1`] = `

From 618ad784dd0443f880ab68fc42b1f139972067af Mon Sep 17 00:00:00 2001
From: evilebottnawi <sheo13666q@gmail.com>
Date: Fri, 18 Jun 2021 03:40:06 +0300
Subject: [PATCH 5/8] fix: code

---
 lib/utils/DevServerPlugin.js                  |   4 +-
 .../__snapshots__/cli.test.js.snap.webpack4   | 211 +-----------------
 test/cli/cli.test.js                          |   2 +-
 ...eb-socket-server-url.test.js.snap.webpack4 |  44 ++++
 ...eb-socket-server-url.test.js.snap.webpack5 |  44 ++++
 test/e2e/web-socket-server-url.test.js        | 171 ++++++++++++++
 6 files changed, 264 insertions(+), 212 deletions(-)

diff --git a/lib/utils/DevServerPlugin.js b/lib/utils/DevServerPlugin.js
index 11fbf2f1db..f12b373f10 100644
--- a/lib/utils/DevServerPlugin.js
+++ b/lib/utils/DevServerPlugin.js
@@ -129,8 +129,8 @@ class DevServerPlugin {
 
     return encodeURIComponent(
       new URL(
-        `${protocol}//${
-          username && password ? `${username}:${password}@` : ''
+        `${protocol}//${username}${password ? `:${password}` : ''}${
+          username || password ? `@` : ''
         }${ipaddr.IPv6.isIPv6(host) ? `[${host}]` : host}${
           port ? `:${port}` : ''
         }${path || '/'}${
diff --git a/test/cli/__snapshots__/cli.test.js.snap.webpack4 b/test/cli/__snapshots__/cli.test.js.snap.webpack4
index d9e3274eaf..15448393ab 100644
--- a/test/cli/__snapshots__/cli.test.js.snap.webpack4
+++ b/test/cli/__snapshots__/cli.test.js.snap.webpack4
@@ -73,6 +73,8 @@ Options:
   --client-web-socket-url-port <value>      Tells clients connected to devServer to use the provided port.
   --client-web-socket-url-path <value>      Tells clients connected to devServer to use the provided path to connect.
   --client-web-socket-url-protocol <value>  Tells clients connected to devServer to use the provided protocol.
+  --client-web-socket-url-username <value>  Tells clients connected to devServer to use the provided username to authenticate.
+  --client-web-socket-url-password <value>  Tells clients connected to devServer to use the provided password to authenticate.
   --web-socket-server <value>               Allows to set web socket server and options (by default 'ws'). https://webpack.js.org/configuration/dev-server/#devserverwebsocketserver
   --compress                                Enables gzip compression for everything served. https://webpack.js.org/configuration/dev-server/#devservercompress
   --no-compress                             Disables gzip compression for everything served.
@@ -147,79 +149,6 @@ exports[`CLI historyApiFallback option --no-history-api-fallback 1`] = `
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
-exports[`CLI host and port options --host and --port are unspecified: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI host and port options --host localhost --port 9999: stderr 1`] = `
-"<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 option --host :: (IPv6): 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI host option --host ::1 (IPv6): stderr 1`] = `
-"<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 option --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>/
-<i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI host option --host <local-ip>: stderr 1`] = `
-"<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 option --host <local-ipv4>: stderr 1`] = `
-"<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 option --host 0.0.0.0 (IPv4): 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI host option --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[`CLI host option --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>/
-<i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI host option --host localhost: stderr 1`] = `
-"<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 http2 option --http2 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: https://localhost:<port>/
@@ -283,139 +212,3 @@ exports[`CLI https option https options 1`] = `
 <i> [webpack-dev-server] On Your Network (IPv6): https://[<network-ip-v6>]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
-
-exports[`CLI port option --port is auto: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI port option --port is string: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI static option --no-static-serve-index: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI static option --no-static-watch: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI static option --static <value> --static <other-value>: 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] Content not from webpack is served from 'new-static, other-static' directory"
-`;
-
-exports[`CLI static option --static <value>: 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] Content not from webpack is served from 'new-static' directory"
-`;
-
-exports[`CLI static option --static: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI static option --static-directory: 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] Content not from webpack is served from 'static-dir' directory"
-`;
-
-exports[`CLI static option --static-public-path: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI static option --static-public-path-reset: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI static option --static-reset --static-directory <value>: 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] Content not from webpack is served from 'new-static-directory' directory"
-`;
-
-exports[`CLI static option --static-reset: 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] Content not from webpack is served from 'new-static-after-reset' directory"
-`;
-
-exports[`CLI static option --static-serve-index: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI static option --static-watch: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI watchFiles option --watch-files <value> --watch-files <other-value>: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI watchFiles option --watch-files <value>: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
-
-exports[`CLI watchFiles option --watch-files-reset: 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] Content not from webpack is served from '<cwd>/public' directory"
-`;
diff --git a/test/cli/cli.test.js b/test/cli/cli.test.js
index 0fbcd8a15f..7859d0ef8d 100644
--- a/test/cli/cli.test.js
+++ b/test/cli/cli.test.js
@@ -40,7 +40,7 @@ describe('CLI', () => {
     );
   });
 
-  describe('help', () => {
+  describe.only('help', () => {
     (isMacOS ? it.skip : it)('should generate correct cli flags', async () => {
       const { exitCode, stdout } = await testBin(['--help']);
 
diff --git a/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack4 b/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack4
index f980e9aa0b..dfcf94d80b 100644
--- a/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack4
@@ -261,6 +261,28 @@ Array [
 
 exports[`web socket server URL should work with the "client.webSocketURL.host" option using "0.0.0.0" value ("ws"): page errors 1`] = `Array []`;
 
+exports[`web socket server URL should work with the "client.webSocketURL.password" option ("sockjs"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.password" option ("sockjs"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.password" option ("ws"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.password" option ("ws"): page errors 1`] = `Array []`;
+
 exports[`web socket server URL should work with the "client.webSocketURL.path" option ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
@@ -458,3 +480,25 @@ Array [
 `;
 
 exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("ws"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" option ("sockjs"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" option ("sockjs"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" option ("ws"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" option ("ws"): page errors 1`] = `Array []`;
diff --git a/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack5 b/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack5
index f980e9aa0b..dfcf94d80b 100644
--- a/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/web-socket-server-url.test.js.snap.webpack5
@@ -261,6 +261,28 @@ Array [
 
 exports[`web socket server URL should work with the "client.webSocketURL.host" option using "0.0.0.0" value ("ws"): page errors 1`] = `Array []`;
 
+exports[`web socket server URL should work with the "client.webSocketURL.password" option ("sockjs"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.password" option ("sockjs"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.password" option ("ws"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.password" option ("ws"): page errors 1`] = `Array []`;
+
 exports[`web socket server URL should work with the "client.webSocketURL.path" option ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
@@ -458,3 +480,25 @@ Array [
 `;
 
 exports[`web socket server URL should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("ws"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" option ("sockjs"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" option ("sockjs"): page errors 1`] = `Array []`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" option ("ws"): console messages 1`] = `
+Array [
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
+]
+`;
+
+exports[`web socket server URL should work with the "client.webSocketURL.username" option ("ws"): page errors 1`] = `Array []`;
diff --git a/test/e2e/web-socket-server-url.test.js b/test/e2e/web-socket-server-url.test.js
index bdbb92d4e2..84ba55ab17 100644
--- a/test/e2e/web-socket-server-url.test.js
+++ b/test/e2e/web-socket-server-url.test.js
@@ -1188,6 +1188,177 @@ describe('web socket server URL', () => {
       });
     });
 
+    it(`should work with the "client.webSocketURL.username" option ("${webSocketServer}")`, async () => {
+      const compiler = webpack(config);
+      const devServerOptions = {
+        client: {
+          webSocketURL: {
+            username: 'zenitsu',
+          },
+        },
+        webSocketServer,
+        port: port5,
+        host: '0.0.0.0',
+        allowedHosts: 'all',
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await new Promise((resolve, reject) => {
+        server.listen(devServerOptions.port, devServerOptions.host, (error) => {
+          if (error) {
+            reject(error);
+
+            return;
+          }
+
+          resolve();
+        });
+      });
+
+      const { page, browser } = await runBrowser();
+
+      const pageErrors = [];
+      const consoleMessages = [];
+
+      page
+        .on('console', (message) => {
+          consoleMessages.push(message);
+        })
+        .on('pageerror', (error) => {
+          pageErrors.push(error);
+        });
+
+      const webSocketRequests = [];
+
+      if (webSocketServer === 'ws') {
+        const client = page._client;
+
+        client.on('Network.webSocketCreated', (test) => {
+          webSocketRequests.push(test);
+        });
+      } else {
+        page.on('request', (request) => {
+          if (/\/ws\//.test(request.url())) {
+            webSocketRequests.push({ url: request.url() });
+          }
+        });
+      }
+
+      await page.goto(`http://127.0.0.1:${port5}/main`, {
+        waitUntil: 'networkidle0',
+      });
+
+      const webSocketRequest = webSocketRequests[0];
+
+      expect(webSocketRequest.url).toContain(
+        `${websocketURLProtocol}://zenitsu@127.0.0.1:${port5}/ws`
+      );
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        'console messages'
+      );
+      expect(pageErrors).toMatchSnapshot('page errors');
+
+      await browser.close();
+      await new Promise((resolve, reject) => {
+        server.close((error) => {
+          if (error) {
+            reject(error);
+
+            return;
+          }
+
+          resolve();
+        });
+      });
+    });
+
+    it(`should work with the "client.webSocketURL.password" option ("${webSocketServer}")`, async () => {
+      const compiler = webpack(config);
+      const devServerOptions = {
+        client: {
+          webSocketURL: {
+            password: 'chuntaro',
+          },
+        },
+        webSocketServer,
+        port: port5,
+        host: '0.0.0.0',
+        allowedHosts: 'all',
+      };
+      const server = new Server(devServerOptions, compiler);
+
+      await new Promise((resolve, reject) => {
+        server.listen(devServerOptions.port, devServerOptions.host, (error) => {
+          if (error) {
+            reject(error);
+
+            return;
+          }
+
+          resolve();
+        });
+      });
+
+      const { page, browser } = await runBrowser();
+
+      const pageErrors = [];
+      const consoleMessages = [];
+
+      page
+        .on('console', (message) => {
+          consoleMessages.push(message);
+        })
+        .on('pageerror', (error) => {
+          pageErrors.push(error);
+        });
+
+      const webSocketRequests = [];
+
+      if (webSocketServer === 'ws') {
+        const client = page._client;
+
+        client.on('Network.webSocketCreated', (test) => {
+          webSocketRequests.push(test);
+        });
+      } else {
+        page.on('request', (request) => {
+          if (/\/ws\//.test(request.url())) {
+            webSocketRequests.push({ url: request.url() });
+          }
+        });
+      }
+
+      await page.goto(`http://127.0.0.1:${port5}/main`, {
+        waitUntil: 'networkidle0',
+      });
+
+      const webSocketRequest = webSocketRequests[0];
+
+      expect(webSocketRequest.url).toContain(
+        // "sockjs" has bug with parsing URL
+        webSocketServer === 'ws'
+          ? `${websocketURLProtocol}://:chuntaro@127.0.0.1:${port5}/ws`
+          : `${websocketURLProtocol}://127.0.0.1:${port5}/ws`
+      );
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        'console messages'
+      );
+      expect(pageErrors).toMatchSnapshot('page errors');
+
+      await browser.close();
+      await new Promise((resolve, reject) => {
+        server.close((error) => {
+          if (error) {
+            reject(error);
+
+            return;
+          }
+
+          resolve();
+        });
+      });
+    });
+
     it(`should work with the "client.webSocketURL.username" and "client.webSocketURL.password" option ("${webSocketServer}")`, async () => {
       const compiler = webpack(config);
       const devServerOptions = {

From 14444886f2f855f84d430f657ede12e5ad697bcf Mon Sep 17 00:00:00 2001
From: evilebottnawi <sheo13666q@gmail.com>
Date: Fri, 18 Jun 2021 04:02:33 +0300
Subject: [PATCH 6/8] refactor: code

---
 lib/options.json             |  8 ++++----
 lib/utils/DevServerPlugin.js | 17 +++++------------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/lib/options.json b/lib/options.json
index 08c19d8e53..12076138db 100644
--- a/lib/options.json
+++ b/lib/options.json
@@ -154,10 +154,6 @@
               "description": "Tells clients connected to devServer to use the provided path to connect.",
               "type": "string"
             },
-            "username": {
-              "description": "Tells clients connected to devServer to use the provided username to authenticate.",
-              "type": "string"
-            },
             "password": {
               "description": "Tells clients connected to devServer to use the provided password to authenticate.",
               "type": "string"
@@ -185,6 +181,10 @@
                   "minLength": 1
                 }
               ]
+            },
+            "username": {
+              "description": "Tells clients connected to devServer to use the provided username to authenticate.",
+              "type": "string"
             }
           }
         }
diff --git a/lib/utils/DevServerPlugin.js b/lib/utils/DevServerPlugin.js
index f12b373f10..12e5f21e3c 100644
--- a/lib/utils/DevServerPlugin.js
+++ b/lib/utils/DevServerPlugin.js
@@ -107,7 +107,6 @@ class DevServerPlugin {
     /** @type {string} */
     let username = '';
 
-    // We are proxying dev server and need to specify custom `path`
     if (typeof options.client.webSocketURL.username !== 'undefined') {
       username = options.client.webSocketURL.username;
     }
@@ -115,31 +114,25 @@ class DevServerPlugin {
     /** @type {string} */
     let password = '';
 
-    // We are proxying dev server and need to specify custom `path`
     if (typeof options.client.webSocketURL.password !== 'undefined') {
       password = options.client.webSocketURL.password;
     }
 
-    /** @type {Record<string, any>} */
-    const searchParams = {};
+    const searchParams = new URLSearchParams();
 
     if (typeof options.client.logging !== 'undefined') {
-      searchParams.logging = options.client.logging;
+      searchParams.set('logging', options.client.logging);
     }
 
+    const searchParamsString = searchParams.toString();
+
     return encodeURIComponent(
       new URL(
         `${protocol}//${username}${password ? `:${password}` : ''}${
           username || password ? `@` : ''
         }${ipaddr.IPv6.isIPv6(host) ? `[${host}]` : host}${
           port ? `:${port}` : ''
-        }${path || '/'}${
-          Object.keys(searchParams).length > 0
-            ? `?${Object.entries(searchParams)
-                .map(([key, value]) => `${key}=${value}`)
-                .join('&')}`
-            : ''
-        }`
+        }${path || '/'}${searchParamsString ? `?${searchParamsString}` : ''}`
       ).toString()
     ).replace(
       /[!'()*]/g,

From d9e27cca9d3cf3a5033e3236f5982305b6a8e798 Mon Sep 17 00:00:00 2001
From: evilebottnawi <sheo13666q@gmail.com>
Date: Fri, 18 Jun 2021 04:10:59 +0300
Subject: [PATCH 7/8] test: update

---
 .../validate-options.test.js.snap.webpack5             | 10 +++++-----
 test/cli/__snapshots__/cli.test.js.snap.webpack5       |  2 ++
 test/cli/cli.test.js                                   |  2 +-
 test/server/__snapshots__/Server.test.js.snap.webpack5 |  8 ++++----
 .../WebsocketServer.test.js.snap.webpack5              |  2 +-
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack5 b/test/__snapshots__/validate-options.test.js.snap.webpack5
index 34a94a4976..ed0aa8280f 100644
--- a/test/__snapshots__/validate-options.test.js.snap.webpack5
+++ b/test/__snapshots__/validate-options.test.js.snap.webpack5
@@ -172,7 +172,7 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"port":true}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, username?, password?, port?, protocol? }
+   non-empty string | object { host?, path?, password?, port?, protocol?, username? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.port should be one of these:
@@ -186,13 +186,13 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"username":123,"password":976}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, username?, password?, port?, protocol? }
+   non-empty string | object { host?, path?, password?, port?, protocol?, username? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
-    * options.client.webSocketURL.username should be a string.
-      -> Tells clients connected to devServer to use the provided username to authenticate.
     * options.client.webSocketURL.password should be a string.
-      -> Tells clients connected to devServer to use the provided password to authenticate."
+      -> Tells clients connected to devServer to use the provided password to authenticate.
+    * options.client.webSocketURL.username should be a string.
+      -> Tells clients connected to devServer to use the provided username to authenticate."
 `;
 
 exports[`options validate should throw an error on the "client" option with 'whoops!' value 1`] = `
diff --git a/test/cli/__snapshots__/cli.test.js.snap.webpack5 b/test/cli/__snapshots__/cli.test.js.snap.webpack5
index a1428f6c9c..46dfae8119 100644
--- a/test/cli/__snapshots__/cli.test.js.snap.webpack5
+++ b/test/cli/__snapshots__/cli.test.js.snap.webpack5
@@ -72,8 +72,10 @@ Options:
   --client-web-socket-url <value>           Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
   --client-web-socket-url-host <value>      Tells clients connected to devServer to use the provided host.
   --client-web-socket-url-path <value>      Tells clients connected to devServer to use the provided path to connect.
+  --client-web-socket-url-password <value>  Tells clients connected to devServer to use the provided password to authenticate.
   --client-web-socket-url-port <value>      Tells clients connected to devServer to use the provided port.
   --client-web-socket-url-protocol <value>  Tells clients connected to devServer to use the provided protocol.
+  --client-web-socket-url-username <value>  Tells clients connected to devServer to use the provided username to authenticate.
   --compress                                Enables gzip compression for everything served. https://webpack.js.org/configuration/dev-server/#devservercompress
   --no-compress                             Negative 'compress' option.
   --history-api-fallback                    Allows to proxy requests through a specified index page (by default 'index.html'), useful for Single Page Applications that utilise the HTML5 History API. https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback
diff --git a/test/cli/cli.test.js b/test/cli/cli.test.js
index 7859d0ef8d..0fbcd8a15f 100644
--- a/test/cli/cli.test.js
+++ b/test/cli/cli.test.js
@@ -40,7 +40,7 @@ describe('CLI', () => {
     );
   });
 
-  describe.only('help', () => {
+  describe('help', () => {
     (isMacOS ? it.skip : it)('should generate correct cli flags', async () => {
       const { exitCode, stdout } = await testBin(['--help']);
 
diff --git a/test/server/__snapshots__/Server.test.js.snap.webpack5 b/test/server/__snapshots__/Server.test.js.snap.webpack5
index f2c83d038c..f0ce2c6599 100644
--- a/test/server/__snapshots__/Server.test.js.snap.webpack5
+++ b/test/server/__snapshots__/Server.test.js.snap.webpack5
@@ -4,7 +4,7 @@ exports[`Server DevServerPlugin add hot option 1`] = `
 Array [
   Array [
     "client",
-    "index.js?ws%3A%2F%2Flocalhost%3A8104%2Fws",
+    "index.js?ws%3A%2F%2Flocalhost%3A8105%2Fws",
   ],
   Array [
     "node_modules",
@@ -22,7 +22,7 @@ exports[`Server DevServerPlugin add hot-only option 1`] = `
 Array [
   Array [
     "client",
-    "index.js?ws%3A%2F%2Flocalhost%3A8104%2Fws",
+    "index.js?ws%3A%2F%2Flocalhost%3A8105%2Fws",
   ],
   Array [
     "node_modules",
@@ -40,7 +40,7 @@ exports[`Server DevServerPlugin should create and run server with old parameters
 Array [
   Array [
     "client",
-    "index.js?ws%3A%2F%2Flocalhost%3A8104%2Fws",
+    "index.js?ws%3A%2F%2Flocalhost%3A8105%2Fws",
   ],
   Array [
     "node_modules",
@@ -54,4 +54,4 @@ Array [
 ]
 `;
 
-exports[`Server getFreePort should throws the error when the port isn't found 1`] = `"busy"`;
+exports[`Server getFreePort should throws the error when the port isn't found 1`] = `"listen EADDRINUSE: address already in use :::8080"`;
diff --git a/test/server/servers/__snapshots__/WebsocketServer.test.js.snap.webpack5 b/test/server/servers/__snapshots__/WebsocketServer.test.js.snap.webpack5
index 16b78745af..64f2a65dc9 100644
--- a/test/server/servers/__snapshots__/WebsocketServer.test.js.snap.webpack5
+++ b/test/server/servers/__snapshots__/WebsocketServer.test.js.snap.webpack5
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`WebsocketServer should receive connection, send message, and close client 1`] = `"localhost:8130"`;
+exports[`WebsocketServer should receive connection, send message, and close client 1`] = `"localhost:8131"`;
 
 exports[`WebsocketServer should receive connection, send message, and close client 2`] = `
 Array [

From 84c95197ccd6b425c83068ad9eeded1874a27529 Mon Sep 17 00:00:00 2001
From: evilebottnawi <sheo13666q@gmail.com>
Date: Fri, 18 Jun 2021 04:14:39 +0300
Subject: [PATCH 8/8] test: update

---
 .../validate-options.test.js.snap.webpack4    |  10 +-
 .../__snapshots__/cli.test.js.snap.webpack4   | 209 ++++++++++++++++++
 .../Server.test.js.snap.webpack4              |   6 +-
 .../WebsocketServer.test.js.snap.webpack4     |   2 +-
 4 files changed, 218 insertions(+), 9 deletions(-)

diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack4 b/test/__snapshots__/validate-options.test.js.snap.webpack4
index 34a94a4976..ed0aa8280f 100644
--- a/test/__snapshots__/validate-options.test.js.snap.webpack4
+++ b/test/__snapshots__/validate-options.test.js.snap.webpack4
@@ -172,7 +172,7 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"port":true}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, username?, password?, port?, protocol? }
+   non-empty string | object { host?, path?, password?, port?, protocol?, username? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
     * options.client.webSocketURL.port should be one of these:
@@ -186,13 +186,13 @@ exports[`options validate should throw an error on the "client" option with '{"w
 exports[`options validate should throw an error on the "client" option with '{"webSocketURL":{"username":123,"password":976}}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.client.webSocketURL should be one of these:
-   non-empty string | object { host?, path?, username?, password?, port?, protocol? }
+   non-empty string | object { host?, path?, password?, port?, protocol?, username? }
    -> Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).
    Details:
-    * options.client.webSocketURL.username should be a string.
-      -> Tells clients connected to devServer to use the provided username to authenticate.
     * options.client.webSocketURL.password should be a string.
-      -> Tells clients connected to devServer to use the provided password to authenticate."
+      -> Tells clients connected to devServer to use the provided password to authenticate.
+    * options.client.webSocketURL.username should be a string.
+      -> Tells clients connected to devServer to use the provided username to authenticate."
 `;
 
 exports[`options validate should throw an error on the "client" option with 'whoops!' value 1`] = `
diff --git a/test/cli/__snapshots__/cli.test.js.snap.webpack4 b/test/cli/__snapshots__/cli.test.js.snap.webpack4
index 15448393ab..35b7f2675a 100644
--- a/test/cli/__snapshots__/cli.test.js.snap.webpack4
+++ b/test/cli/__snapshots__/cli.test.js.snap.webpack4
@@ -149,6 +149,79 @@ exports[`CLI historyApiFallback option --no-history-api-fallback 1`] = `
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
 
+exports[`CLI host and port options --host and --port are unspecified: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI host and port options --host localhost --port 9999: stderr 1`] = `
+"<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 option --host :: (IPv6): 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI host option --host ::1 (IPv6): stderr 1`] = `
+"<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 option --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>/
+<i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI host option --host <local-ip>: stderr 1`] = `
+"<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 option --host <local-ipv4>: stderr 1`] = `
+"<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 option --host 0.0.0.0 (IPv4): 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI host option --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[`CLI host option --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>/
+<i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI host option --host localhost: stderr 1`] = `
+"<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 http2 option --http2 1`] = `
 "<i> [webpack-dev-server] Project is running at:
 <i> [webpack-dev-server] Loopback: https://localhost:<port>/
@@ -212,3 +285,139 @@ exports[`CLI https option https options 1`] = `
 <i> [webpack-dev-server] On Your Network (IPv6): https://[<network-ip-v6>]:<port>/
 <i> [webpack-dev-server] Content not from webpack is served from '<cwd>/public' directory"
 `;
+
+exports[`CLI port option --port is auto: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI port option --port is string: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI static option --no-static-serve-index: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI static option --no-static-watch: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI static option --static <value> --static <other-value>: 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] Content not from webpack is served from 'new-static, other-static' directory"
+`;
+
+exports[`CLI static option --static <value>: 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] Content not from webpack is served from 'new-static' directory"
+`;
+
+exports[`CLI static option --static: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI static option --static-directory: 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] Content not from webpack is served from 'static-dir' directory"
+`;
+
+exports[`CLI static option --static-public-path: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI static option --static-public-path-reset: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI static option --static-reset --static-directory <value>: 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] Content not from webpack is served from 'new-static-directory' directory"
+`;
+
+exports[`CLI static option --static-reset: 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] Content not from webpack is served from 'new-static-after-reset' directory"
+`;
+
+exports[`CLI static option --static-serve-index: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI static option --static-watch: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI watchFiles option --watch-files <value> --watch-files <other-value>: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI watchFiles option --watch-files <value>: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
+
+exports[`CLI watchFiles option --watch-files-reset: 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] Content not from webpack is served from '<cwd>/public' directory"
+`;
diff --git a/test/server/__snapshots__/Server.test.js.snap.webpack4 b/test/server/__snapshots__/Server.test.js.snap.webpack4
index f2c83d038c..a0ee40d377 100644
--- a/test/server/__snapshots__/Server.test.js.snap.webpack4
+++ b/test/server/__snapshots__/Server.test.js.snap.webpack4
@@ -4,7 +4,7 @@ exports[`Server DevServerPlugin add hot option 1`] = `
 Array [
   Array [
     "client",
-    "index.js?ws%3A%2F%2Flocalhost%3A8104%2Fws",
+    "index.js?ws%3A%2F%2Flocalhost%3A8105%2Fws",
   ],
   Array [
     "node_modules",
@@ -22,7 +22,7 @@ exports[`Server DevServerPlugin add hot-only option 1`] = `
 Array [
   Array [
     "client",
-    "index.js?ws%3A%2F%2Flocalhost%3A8104%2Fws",
+    "index.js?ws%3A%2F%2Flocalhost%3A8105%2Fws",
   ],
   Array [
     "node_modules",
@@ -40,7 +40,7 @@ exports[`Server DevServerPlugin should create and run server with old parameters
 Array [
   Array [
     "client",
-    "index.js?ws%3A%2F%2Flocalhost%3A8104%2Fws",
+    "index.js?ws%3A%2F%2Flocalhost%3A8105%2Fws",
   ],
   Array [
     "node_modules",
diff --git a/test/server/servers/__snapshots__/WebsocketServer.test.js.snap.webpack4 b/test/server/servers/__snapshots__/WebsocketServer.test.js.snap.webpack4
index 16b78745af..64f2a65dc9 100644
--- a/test/server/servers/__snapshots__/WebsocketServer.test.js.snap.webpack4
+++ b/test/server/servers/__snapshots__/WebsocketServer.test.js.snap.webpack4
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`WebsocketServer should receive connection, send message, and close client 1`] = `"localhost:8130"`;
+exports[`WebsocketServer should receive connection, send message, and close client 1`] = `"localhost:8131"`;
 
 exports[`WebsocketServer should receive connection, send message, and close client 2`] = `
 Array [