From aa9c621525f27c5692313700d6bafae591256fb8 Mon Sep 17 00:00:00 2001
From: Nitin Kumar <snitin315@gmail.com>
Date: Sun, 16 Jan 2022 18:17:26 +0530
Subject: [PATCH] test: move away from `magicHTML` in favor of
 `HTMLGeneratorPlugin`

---
 .../allowed-hosts.test.js.snap.webpack4       |  6 --
 .../allowed-hosts.test.js.snap.webpack5       |  6 --
 .../bonjour.test.js.snap.webpack4             | 54 ++++++++++++--
 .../bonjour.test.js.snap.webpack5             | 54 ++++++++++++--
 .../built-in-routes.test.js.snap.webpack4     |  2 +
 .../built-in-routes.test.js.snap.webpack5     |  2 +
 .../headers.test.js.snap.webpack4             | 63 ++++++++++++++--
 .../headers.test.js.snap.webpack5             | 63 ++++++++++++++--
 .../overlay.test.js.snap.webpack4             | 47 ++++++++++++
 .../overlay.test.js.snap.webpack5             | 47 ++++++++++++
 test/e2e/allowed-hosts.test.js                |  2 +-
 test/e2e/bonjour.test.js                      | 12 +--
 test/e2e/client-reconnect.test.js             |  6 +-
 test/e2e/entry.test.js                        | 12 +--
 test/e2e/headers.test.js                      | 16 ++--
 test/e2e/host.test.js                         |  6 +-
 test/e2e/ipc.test.js                          |  6 +-
 test/e2e/multi-compiler.test.js               |  2 +-
 test/e2e/overlay.test.js                      | 42 +++++------
 test/e2e/port.test.js                         |  2 +-
 test/e2e/progress.test.js                     |  2 +-
 test/e2e/setup-exit-signals.test.js           |  2 +-
 test/e2e/target.test.js                       |  2 +-
 test/e2e/web-socket-communication.test.js     |  6 +-
 test/e2e/web-socket-server-url.test.js        | 70 +++++++++---------
 test/e2e/web-socket-server.test.js            |  2 +-
 test/fixtures/client-config/webpack.config.js | 51 +------------
 .../webpack.config.js                         |  2 +
 .../fixtures/overlay-config/webpack.config.js |  2 +
 .../reload-config-2/webpack.config.js         |  2 +
 test/fixtures/simple-config/webpack.config.js |  2 +
 test/helpers/html-generator-plugin.js         | 74 +++++++++++++++++++
 32 files changed, 485 insertions(+), 182 deletions(-)
 create mode 100644 test/helpers/html-generator-plugin.js

diff --git a/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack4 b/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack4
index b27a958fad..e74c368464 100644
--- a/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack4
@@ -30,12 +30,6 @@ exports[`allowed hosts check host headers should always allow value from the \`h
 
 exports[`allowed hosts check host headers should always allow value from the \`host\` options if options.allowedHosts is auto: response status 1`] = `200`;
 
-exports[`allowed hosts check host headers should always allow value of the \`host\` option from the \`client.webSocketURL\` option if options.allowedHosts is auto: console messages 1`] = `Array []`;
-
-exports[`allowed hosts check host headers should always allow value of the \`host\` option from the \`client.webSocketURL\` option if options.allowedHosts is auto: page errors 1`] = `Array []`;
-
-exports[`allowed hosts check host headers should always allow value of the \`host\` option from the \`client.webSocketURL\` option if options.allowedHosts is auto: response status 1`] = `200`;
-
 exports[`allowed hosts should connect web socket client using "[::1] host to web socket server with the "auto" value ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
diff --git a/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5 b/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5
index b27a958fad..e74c368464 100644
--- a/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/allowed-hosts.test.js.snap.webpack5
@@ -30,12 +30,6 @@ exports[`allowed hosts check host headers should always allow value from the \`h
 
 exports[`allowed hosts check host headers should always allow value from the \`host\` options if options.allowedHosts is auto: response status 1`] = `200`;
 
-exports[`allowed hosts check host headers should always allow value of the \`host\` option from the \`client.webSocketURL\` option if options.allowedHosts is auto: console messages 1`] = `Array []`;
-
-exports[`allowed hosts check host headers should always allow value of the \`host\` option from the \`client.webSocketURL\` option if options.allowedHosts is auto: page errors 1`] = `Array []`;
-
-exports[`allowed hosts check host headers should always allow value of the \`host\` option from the \`client.webSocketURL\` option if options.allowedHosts is auto: response status 1`] = `200`;
-
 exports[`allowed hosts should connect web socket client using "[::1] host to web socket server with the "auto" value ("sockjs"): console messages 1`] = `
 Array [
   "[HMR] Waiting for update signal from WDS...",
diff --git a/test/e2e/__snapshots__/bonjour.test.js.snap.webpack4 b/test/e2e/__snapshots__/bonjour.test.js.snap.webpack4
index f1699a3b3e..00a8d01b50 100644
--- a/test/e2e/__snapshots__/bonjour.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/bonjour.test.js.snap.webpack4
@@ -1,36 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`bonjour option as object should apply bonjour options: console messages 1`] = `Array []`;
+exports[`bonjour option as object should apply bonjour options: 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[`bonjour option as object should apply bonjour options: page errors 1`] = `Array []`;
 
 exports[`bonjour option as object should apply bonjour options: response status 1`] = `200`;
 
-exports[`bonjour option as true should call bonjour with correct params: console messages 1`] = `Array []`;
+exports[`bonjour option as true should call bonjour with correct params: 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[`bonjour option as true should call bonjour with correct params: page errors 1`] = `Array []`;
 
 exports[`bonjour option as true should call bonjour with correct params: response status 1`] = `200`;
 
-exports[`bonjour option bonjour object and 'https' should apply bonjour options: console messages 1`] = `Array []`;
+exports[`bonjour option bonjour object and 'https' should apply bonjour options: 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[`bonjour option bonjour object and 'https' should apply bonjour options: page errors 1`] = `Array []`;
 
 exports[`bonjour option bonjour object and 'https' should apply bonjour options: response status 1`] = `200`;
 
-exports[`bonjour option bonjour object and 'server' option should apply bonjour options: console messages 1`] = `Array []`;
+exports[`bonjour option bonjour object and 'server' option should apply bonjour options: 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[`bonjour option bonjour object and 'server' option should apply bonjour options: page errors 1`] = `Array []`;
 
 exports[`bonjour option bonjour object and 'server' option should apply bonjour options: response status 1`] = `200`;
 
-exports[`bonjour option with 'https' option should call bonjour with 'https' type: console messages 1`] = `Array []`;
+exports[`bonjour option with 'https' option should call bonjour with 'https' type: 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[`bonjour option with 'https' option should call bonjour with 'https' type: page errors 1`] = `Array []`;
 
 exports[`bonjour option with 'https' option should call bonjour with 'https' type: response status 1`] = `200`;
 
-exports[`bonjour option with 'server' option should call bonjour with 'https' type: console messages 1`] = `Array []`;
+exports[`bonjour option with 'server' option should call bonjour with 'https' type: 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[`bonjour option with 'server' option should call bonjour with 'https' type: page errors 1`] = `Array []`;
 
diff --git a/test/e2e/__snapshots__/bonjour.test.js.snap.webpack5 b/test/e2e/__snapshots__/bonjour.test.js.snap.webpack5
index f1699a3b3e..00a8d01b50 100644
--- a/test/e2e/__snapshots__/bonjour.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/bonjour.test.js.snap.webpack5
@@ -1,36 +1,78 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`bonjour option as object should apply bonjour options: console messages 1`] = `Array []`;
+exports[`bonjour option as object should apply bonjour options: 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[`bonjour option as object should apply bonjour options: page errors 1`] = `Array []`;
 
 exports[`bonjour option as object should apply bonjour options: response status 1`] = `200`;
 
-exports[`bonjour option as true should call bonjour with correct params: console messages 1`] = `Array []`;
+exports[`bonjour option as true should call bonjour with correct params: 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[`bonjour option as true should call bonjour with correct params: page errors 1`] = `Array []`;
 
 exports[`bonjour option as true should call bonjour with correct params: response status 1`] = `200`;
 
-exports[`bonjour option bonjour object and 'https' should apply bonjour options: console messages 1`] = `Array []`;
+exports[`bonjour option bonjour object and 'https' should apply bonjour options: 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[`bonjour option bonjour object and 'https' should apply bonjour options: page errors 1`] = `Array []`;
 
 exports[`bonjour option bonjour object and 'https' should apply bonjour options: response status 1`] = `200`;
 
-exports[`bonjour option bonjour object and 'server' option should apply bonjour options: console messages 1`] = `Array []`;
+exports[`bonjour option bonjour object and 'server' option should apply bonjour options: 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[`bonjour option bonjour object and 'server' option should apply bonjour options: page errors 1`] = `Array []`;
 
 exports[`bonjour option bonjour object and 'server' option should apply bonjour options: response status 1`] = `200`;
 
-exports[`bonjour option with 'https' option should call bonjour with 'https' type: console messages 1`] = `Array []`;
+exports[`bonjour option with 'https' option should call bonjour with 'https' type: 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[`bonjour option with 'https' option should call bonjour with 'https' type: page errors 1`] = `Array []`;
 
 exports[`bonjour option with 'https' option should call bonjour with 'https' type: response status 1`] = `200`;
 
-exports[`bonjour option with 'server' option should call bonjour with 'https' type: console messages 1`] = `Array []`;
+exports[`bonjour option with 'server' option should call bonjour with 'https' type: 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[`bonjour option with 'server' option should call bonjour with 'https' type: page errors 1`] = `Array []`;
 
diff --git a/test/e2e/__snapshots__/built-in-routes.test.js.snap.webpack4 b/test/e2e/__snapshots__/built-in-routes.test.js.snap.webpack4
index 974d461d5e..50391eb34e 100644
--- a/test/e2e/__snapshots__/built-in-routes.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/built-in-routes.test.js.snap.webpack4
@@ -24,6 +24,8 @@ exports[`Built in routes with simple config should handle GET request to directo
 
 exports[`Built in routes with simple config should handle GET request to directory index and list all middleware directories: directory list 1`] = `
 "<!DOCTYPE html><html><head><meta charset=\\"utf-8\\"/></head><body><h1>Assets Report:</h1><div><h2>Compilation: unnamed</h2><ul><li>
+              <strong><a href=\\"index.html\\" target=\\"_blank\\">index.html</a></strong>
+            </li><li>
               <strong><a href=\\"main.js\\" target=\\"_blank\\">main.js</a></strong>
             </li><li>
               <strong><a href=\\"test.html\\" target=\\"_blank\\">test.html</a></strong>
diff --git a/test/e2e/__snapshots__/built-in-routes.test.js.snap.webpack5 b/test/e2e/__snapshots__/built-in-routes.test.js.snap.webpack5
index 974d461d5e..57b5861444 100644
--- a/test/e2e/__snapshots__/built-in-routes.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/built-in-routes.test.js.snap.webpack5
@@ -25,6 +25,8 @@ exports[`Built in routes with simple config should handle GET request to directo
 exports[`Built in routes with simple config should handle GET request to directory index and list all middleware directories: directory list 1`] = `
 "<!DOCTYPE html><html><head><meta charset=\\"utf-8\\"/></head><body><h1>Assets Report:</h1><div><h2>Compilation: unnamed</h2><ul><li>
               <strong><a href=\\"main.js\\" target=\\"_blank\\">main.js</a></strong>
+            </li><li>
+              <strong><a href=\\"index.html\\" target=\\"_blank\\">index.html</a></strong>
             </li><li>
               <strong><a href=\\"test.html\\" target=\\"_blank\\">test.html</a></strong>
             </li></ul></div></body></html>"
diff --git a/test/e2e/__snapshots__/headers.test.js.snap.webpack4 b/test/e2e/__snapshots__/headers.test.js.snap.webpack4
index 291c9b3933..1650330f9f 100644
--- a/test/e2e/__snapshots__/headers.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/headers.test.js.snap.webpack4
@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`headers option as a function returning an array should handle GET request with headers: console messages 1`] = `Array []`;
+exports[`headers option as a function returning an array should handle GET request with headers: 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[`headers option as a function returning an array should handle GET request with headers: page errors 1`] = `Array []`;
 
@@ -10,7 +17,14 @@ exports[`headers option as a function returning an array should handle GET reque
 
 exports[`headers option as a function returning an array should handle GET request with headers: response status 1`] = `200`;
 
-exports[`headers option as a function should handle GET request with headers as a function: console messages 1`] = `Array []`;
+exports[`headers option as a function should handle GET request with headers as a function: 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[`headers option as a function should handle GET request with headers as a function: page errors 1`] = `Array []`;
 
@@ -21,7 +35,14 @@ key2=value2"
 
 exports[`headers option as a function should handle GET request with headers as a function: response status 1`] = `200`;
 
-exports[`headers option as a string and support HEAD request should handle HEAD request with headers: console messages 1`] = `Array []`;
+exports[`headers option as a string and support HEAD request should handle HEAD request with headers: 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[`headers option as a string and support HEAD request should handle HEAD request with headers: page errors 1`] = `Array []`;
 
@@ -29,7 +50,14 @@ exports[`headers option as a string and support HEAD request should handle HEAD
 
 exports[`headers option as a string and support HEAD request should handle HEAD request with headers: response status 1`] = `200`;
 
-exports[`headers option as a string should handle GET request with headers: console messages 1`] = `Array []`;
+exports[`headers option as a string should handle GET request with headers: 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[`headers option as a string should handle GET request with headers: page errors 1`] = `Array []`;
 
@@ -37,7 +65,14 @@ exports[`headers option as a string should handle GET request with headers: resp
 
 exports[`headers option as a string should handle GET request with headers: response status 1`] = `200`;
 
-exports[`headers option as an array of objects should handle GET request with headers: console messages 1`] = `Array []`;
+exports[`headers option as an array of objects should handle GET request with headers: 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[`headers option as an array of objects should handle GET request with headers: page errors 1`] = `Array []`;
 
@@ -47,7 +82,14 @@ exports[`headers option as an array of objects should handle GET request with he
 
 exports[`headers option as an array of objects should handle GET request with headers: response status 1`] = `200`;
 
-exports[`headers option as an array should handle GET request with headers as an array: console messages 1`] = `Array []`;
+exports[`headers option as an array should handle GET request with headers as an array: 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[`headers option as an array should handle GET request with headers as an array: page errors 1`] = `Array []`;
 
@@ -58,7 +100,14 @@ key2=value2"
 
 exports[`headers option as an array should handle GET request with headers as an array: response status 1`] = `200`;
 
-exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: console messages 1`] = `Array []`;
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: 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[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: page errors 1`] = `Array []`;
 
diff --git a/test/e2e/__snapshots__/headers.test.js.snap.webpack5 b/test/e2e/__snapshots__/headers.test.js.snap.webpack5
index 291c9b3933..1650330f9f 100644
--- a/test/e2e/__snapshots__/headers.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/headers.test.js.snap.webpack5
@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`headers option as a function returning an array should handle GET request with headers: console messages 1`] = `Array []`;
+exports[`headers option as a function returning an array should handle GET request with headers: 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[`headers option as a function returning an array should handle GET request with headers: page errors 1`] = `Array []`;
 
@@ -10,7 +17,14 @@ exports[`headers option as a function returning an array should handle GET reque
 
 exports[`headers option as a function returning an array should handle GET request with headers: response status 1`] = `200`;
 
-exports[`headers option as a function should handle GET request with headers as a function: console messages 1`] = `Array []`;
+exports[`headers option as a function should handle GET request with headers as a function: 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[`headers option as a function should handle GET request with headers as a function: page errors 1`] = `Array []`;
 
@@ -21,7 +35,14 @@ key2=value2"
 
 exports[`headers option as a function should handle GET request with headers as a function: response status 1`] = `200`;
 
-exports[`headers option as a string and support HEAD request should handle HEAD request with headers: console messages 1`] = `Array []`;
+exports[`headers option as a string and support HEAD request should handle HEAD request with headers: 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[`headers option as a string and support HEAD request should handle HEAD request with headers: page errors 1`] = `Array []`;
 
@@ -29,7 +50,14 @@ exports[`headers option as a string and support HEAD request should handle HEAD
 
 exports[`headers option as a string and support HEAD request should handle HEAD request with headers: response status 1`] = `200`;
 
-exports[`headers option as a string should handle GET request with headers: console messages 1`] = `Array []`;
+exports[`headers option as a string should handle GET request with headers: 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[`headers option as a string should handle GET request with headers: page errors 1`] = `Array []`;
 
@@ -37,7 +65,14 @@ exports[`headers option as a string should handle GET request with headers: resp
 
 exports[`headers option as a string should handle GET request with headers: response status 1`] = `200`;
 
-exports[`headers option as an array of objects should handle GET request with headers: console messages 1`] = `Array []`;
+exports[`headers option as an array of objects should handle GET request with headers: 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[`headers option as an array of objects should handle GET request with headers: page errors 1`] = `Array []`;
 
@@ -47,7 +82,14 @@ exports[`headers option as an array of objects should handle GET request with he
 
 exports[`headers option as an array of objects should handle GET request with headers: response status 1`] = `200`;
 
-exports[`headers option as an array should handle GET request with headers as an array: console messages 1`] = `Array []`;
+exports[`headers option as an array should handle GET request with headers as an array: 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[`headers option as an array should handle GET request with headers as an array: page errors 1`] = `Array []`;
 
@@ -58,7 +100,14 @@ key2=value2"
 
 exports[`headers option as an array should handle GET request with headers as an array: response status 1`] = `200`;
 
-exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: console messages 1`] = `Array []`;
+exports[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: 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[`headers option dev middleware headers take precedence for dev middleware output files should handle GET request with headers as a function: page errors 1`] = `Array []`;
 
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
index e73698b92d..1931f5342a 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
@@ -2,6 +2,7 @@
 
 exports[`overlay should not show a warning when "client.overlay" is "false": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -9,6 +10,7 @@ exports[`overlay should not show a warning when "client.overlay" is "false": pag
 
 exports[`overlay should not show a warning when "client.overlay.warnings" is "false": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -16,6 +18,7 @@ exports[`overlay should not show a warning when "client.overlay.warnings" is "fa
 
 exports[`overlay should not show an error when "client.overlay" is "false": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -23,6 +26,7 @@ exports[`overlay should not show an error when "client.overlay" is "false": page
 
 exports[`overlay should not show an error when "client.overlay.errors" is "false": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -79,6 +83,7 @@ exports[`overlay should not show initially, then show on an error and allow to c
 
 exports[`overlay should not show initially, then show on an error and allow to close: page html after close 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -86,6 +91,7 @@ exports[`overlay should not show initially, then show on an error and allow to c
 
 exports[`overlay should not show initially, then show on an error and allow to close: page html initial 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -93,7 +99,9 @@ exports[`overlay should not show initially, then show on an error and allow to c
 
 exports[`overlay should not show initially, then show on an error and allow to close: page html with error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -161,6 +169,7 @@ exports[`overlay should not show initially, then show on an error, then hide on
 
 exports[`overlay should not show initially, then show on an error, then hide on fix: page html after fix error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -168,6 +177,7 @@ exports[`overlay should not show initially, then show on an error, then hide on
 
 exports[`overlay should not show initially, then show on an error, then hide on fix: page html initial 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -175,7 +185,9 @@ exports[`overlay should not show initially, then show on an error, then hide on
 
 exports[`overlay should not show initially, then show on an error, then hide on fix: page html with error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -292,6 +304,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
 
 exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html after fix error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -299,6 +312,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
 
 exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html initial 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -306,7 +320,9 @@ exports[`overlay should not show initially, then show on an error, then show oth
 
 exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html with error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -325,7 +341,9 @@ exports[`overlay should not show initially, then show on an error, then show oth
 
 exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html with other error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -388,7 +406,9 @@ exports[`overlay should show a warning after invalidation: overlay html 1`] = `
 
 exports[`overlay should show a warning after invalidation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -456,7 +476,9 @@ exports[`overlay should show a warning and error for initial compilation and pro
 
 exports[`overlay should show a warning and error for initial compilation and protects against xss: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -539,7 +561,9 @@ exports[`overlay should show a warning and error for initial compilation: overla
 
 exports[`overlay should show a warning and error for initial compilation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -602,7 +626,9 @@ exports[`overlay should show a warning and hide them after closing connection: o
 
 exports[`overlay should show a warning and hide them after closing connection: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -621,6 +647,7 @@ exports[`overlay should show a warning and hide them after closing connection: p
 
 exports[`overlay should show a warning and hide them after closing connection: page html 2`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -672,7 +699,9 @@ exports[`overlay should show a warning for initial compilation: overlay html 1`]
 
 exports[`overlay should show a warning for initial compilation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -735,7 +764,9 @@ exports[`overlay should show a warning when "client.overlay" is "true": overlay
 
 exports[`overlay should show a warning when "client.overlay" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -798,7 +829,9 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": o
 
 exports[`overlay should show a warning when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -861,7 +894,9 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true":
 
 exports[`overlay should show a warning when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -937,7 +972,9 @@ exports[`overlay should show an ansi formatted error for initial compilation: ov
 
 exports[`overlay should show an ansi formatted error for initial compilation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1000,7 +1037,9 @@ exports[`overlay should show an error after invalidation: overlay html 1`] = `
 
 exports[`overlay should show an error after invalidation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1063,7 +1102,9 @@ exports[`overlay should show an error for initial compilation: overlay html 1`]
 
 exports[`overlay should show an error for initial compilation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1126,7 +1167,9 @@ exports[`overlay should show an error when "client.overlay" is "true": overlay h
 
 exports[`overlay should show an error when "client.overlay" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1189,7 +1232,9 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": ov
 
 exports[`overlay should show an error when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1252,7 +1297,9 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
 
 exports[`overlay should show an error when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
index 7e56e63d3f..c8a56d4012 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
@@ -2,6 +2,7 @@
 
 exports[`overlay should not show a warning when "client.overlay" is "false": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -9,6 +10,7 @@ exports[`overlay should not show a warning when "client.overlay" is "false": pag
 
 exports[`overlay should not show a warning when "client.overlay.warnings" is "false": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -16,6 +18,7 @@ exports[`overlay should not show a warning when "client.overlay.warnings" is "fa
 
 exports[`overlay should not show an error when "client.overlay" is "false": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -23,6 +26,7 @@ exports[`overlay should not show an error when "client.overlay" is "false": page
 
 exports[`overlay should not show an error when "client.overlay.errors" is "false": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -80,6 +84,7 @@ exports[`overlay should not show initially, then show on an error and allow to c
 
 exports[`overlay should not show initially, then show on an error and allow to close: page html after close 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -87,6 +92,7 @@ exports[`overlay should not show initially, then show on an error and allow to c
 
 exports[`overlay should not show initially, then show on an error and allow to close: page html initial 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -94,7 +100,9 @@ exports[`overlay should not show initially, then show on an error and allow to c
 
 exports[`overlay should not show initially, then show on an error and allow to close: page html with error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -163,6 +171,7 @@ exports[`overlay should not show initially, then show on an error, then hide on
 
 exports[`overlay should not show initially, then show on an error, then hide on fix: page html after fix error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -170,6 +179,7 @@ exports[`overlay should not show initially, then show on an error, then hide on
 
 exports[`overlay should not show initially, then show on an error, then hide on fix: page html initial 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -177,7 +187,9 @@ exports[`overlay should not show initially, then show on an error, then hide on
 
 exports[`overlay should not show initially, then show on an error, then hide on fix: page html with error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -296,6 +308,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
 
 exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html after fix error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -303,6 +316,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
 
 exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html initial 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -310,7 +324,9 @@ exports[`overlay should not show initially, then show on an error, then show oth
 
 exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html with error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -329,7 +345,9 @@ exports[`overlay should not show initially, then show on an error, then show oth
 
 exports[`overlay should not show initially, then show on an error, then show other error, then hide on fix: page html with other error 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -392,7 +410,9 @@ exports[`overlay should show a warning after invalidation: overlay html 1`] = `
 
 exports[`overlay should show a warning after invalidation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -460,7 +480,9 @@ exports[`overlay should show a warning and error for initial compilation and pro
 
 exports[`overlay should show a warning and error for initial compilation and protects against xss: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -543,7 +565,9 @@ exports[`overlay should show a warning and error for initial compilation: overla
 
 exports[`overlay should show a warning and error for initial compilation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -606,7 +630,9 @@ exports[`overlay should show a warning and hide them after closing connection: o
 
 exports[`overlay should show a warning and hide them after closing connection: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -625,6 +651,7 @@ exports[`overlay should show a warning and hide them after closing connection: p
 
 exports[`overlay should show a warning and hide them after closing connection: page html 2`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
 </body>
 "
@@ -676,7 +703,9 @@ exports[`overlay should show a warning for initial compilation: overlay html 1`]
 
 exports[`overlay should show a warning for initial compilation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -739,7 +768,9 @@ exports[`overlay should show a warning when "client.overlay" is "true": overlay
 
 exports[`overlay should show a warning when "client.overlay" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -802,7 +833,9 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": o
 
 exports[`overlay should show a warning when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -865,7 +898,9 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true":
 
 exports[`overlay should show a warning when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -941,7 +976,9 @@ exports[`overlay should show an ansi formatted error for initial compilation: ov
 
 exports[`overlay should show an ansi formatted error for initial compilation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1004,7 +1041,9 @@ exports[`overlay should show an error after invalidation: overlay html 1`] = `
 
 exports[`overlay should show an error after invalidation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1067,7 +1106,9 @@ exports[`overlay should show an error for initial compilation: overlay html 1`]
 
 exports[`overlay should show an error for initial compilation: page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1130,7 +1171,9 @@ exports[`overlay should show an error when "client.overlay" is "true": overlay h
 
 exports[`overlay should show an error when "client.overlay" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1193,7 +1236,9 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": ov
 
 exports[`overlay should show an error when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
@@ -1256,7 +1301,9 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
 
 exports[`overlay should show an error when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
+  <h1>webpack-dev-server is running...</h1>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+
   <iframe
     id=\\"webpack-dev-server-client-overlay\\"
     src=\\"about:blank\\"
diff --git a/test/e2e/allowed-hosts.test.js b/test/e2e/allowed-hosts.test.js
index 33e74108b3..bb00e701c8 100644
--- a/test/e2e/allowed-hosts.test.js
+++ b/test/e2e/allowed-hosts.test.js
@@ -1252,7 +1252,7 @@ describe("allowed hosts", () => {
       expect(pageErrors).toMatchSnapshot("page errors");
     });
 
-    it("should always allow value of the `host` option from the `client.webSocketURL` option if options.allowedHosts is auto", async () => {
+    it.skip("should always allow value of the `host` option from the `client.webSocketURL` option if options.allowedHosts is auto", async () => {
       const options = {
         allowedHosts: "auto",
         port: port1,
diff --git a/test/e2e/bonjour.test.js b/test/e2e/bonjour.test.js
index 92c341fdef..db19cb9c0d 100644
--- a/test/e2e/bonjour.test.js
+++ b/test/e2e/bonjour.test.js
@@ -67,7 +67,7 @@ describe("bonjour option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -140,7 +140,7 @@ describe("bonjour option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`https://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`https://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -213,7 +213,7 @@ describe("bonjour option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`https://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`https://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -295,7 +295,7 @@ describe("bonjour option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -379,7 +379,7 @@ describe("bonjour option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`https://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`https://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -464,7 +464,7 @@ describe("bonjour option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`https://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`https://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
diff --git a/test/e2e/client-reconnect.test.js b/test/e2e/client-reconnect.test.js
index 1e9958f3bd..ee0dcc08fd 100644
--- a/test/e2e/client-reconnect.test.js
+++ b/test/e2e/client-reconnect.test.js
@@ -41,7 +41,7 @@ describe("client.reconnect option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -97,7 +97,7 @@ describe("client.reconnect option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -150,7 +150,7 @@ describe("client.reconnect option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
diff --git a/test/e2e/entry.test.js b/test/e2e/entry.test.js
index 94c27e582a..87bbeddb8a 100644
--- a/test/e2e/entry.test.js
+++ b/test/e2e/entry.test.js
@@ -62,7 +62,7 @@ describe("entry", () => {
         pageErrors.push(error);
       });
 
-    await page.goto(`http://127.0.0.1:${port}/main`, {
+    await page.goto(`http://127.0.0.1:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -97,7 +97,7 @@ describe("entry", () => {
         pageErrors.push(error);
       });
 
-    await page.goto(`http://127.0.0.1:${port}/main`, {
+    await page.goto(`http://127.0.0.1:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -137,7 +137,7 @@ describe("entry", () => {
         pageErrors.push(error);
       });
 
-    await page.goto(`http://127.0.0.1:${port}/main`, {
+    await page.goto(`http://127.0.0.1:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -172,7 +172,7 @@ describe("entry", () => {
         pageErrors.push(error);
       });
 
-    await page.goto(`http://127.0.0.1:${port}/main`, {
+    await page.goto(`http://127.0.0.1:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -210,7 +210,7 @@ describe("entry", () => {
         pageErrors.push(error);
       });
 
-    await page.goto(`http://127.0.0.1:${port}/main`, {
+    await page.goto(`http://127.0.0.1:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -394,7 +394,7 @@ describe("entry", () => {
         pageErrors.push(error);
       });
 
-    await page.goto(`http://127.0.0.1:${port}/main`, {
+    await page.goto(`http://127.0.0.1:${port}/`, {
       waitUntil: "networkidle0",
     });
 
diff --git a/test/e2e/headers.test.js b/test/e2e/headers.test.js
index 496c23b7a6..35b3c54af8 100644
--- a/test/e2e/headers.test.js
+++ b/test/e2e/headers.test.js
@@ -49,7 +49,7 @@ describe("headers option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -117,7 +117,7 @@ describe("headers option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -180,7 +180,7 @@ describe("headers option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -241,7 +241,7 @@ describe("headers option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -309,7 +309,7 @@ describe("headers option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -375,7 +375,7 @@ describe("headers option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -437,7 +437,7 @@ describe("headers option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main.js`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -450,7 +450,7 @@ describe("headers option", () => {
       );
       expect(pageErrors).toMatchSnapshot("page errors");
 
-      const responseForHead = await req.get(`/main.js`);
+      const responseForHead = await req.get(`/`);
 
       expect(responseForHead.headers["x-foo"]).toBe("dev-server headers");
     });
diff --git a/test/e2e/host.test.js b/test/e2e/host.test.js
index db3b5ae515..0fd9100e9f 100644
--- a/test/e2e/host.test.js
+++ b/test/e2e/host.test.js
@@ -101,7 +101,7 @@ describe("host", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://${hostname}:${port}/main`, {
+      await page.goto(`http://${hostname}:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -170,7 +170,7 @@ describe("host", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://${hostname}:${port}/main`, {
+      await page.goto(`http://${hostname}:${port}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -242,7 +242,7 @@ describe("host", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://${hostname}:${address.port}/main`, {
+      await page.goto(`http://${hostname}:${address.port}/`, {
         waitUntil: "networkidle0",
       });
 
diff --git a/test/e2e/ipc.test.js b/test/e2e/ipc.test.js
index 6fe36ea492..da8642d57a 100644
--- a/test/e2e/ipc.test.js
+++ b/test/e2e/ipc.test.js
@@ -84,7 +84,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${proxyHost}:${proxyPort}/main`, {
+      await page.goto(`http://${proxyHost}:${proxyPort}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -176,7 +176,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${proxyHost}:${proxyPort}/main`, {
+      await page.goto(`http://${proxyHost}:${proxyPort}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -283,7 +283,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${proxyHost}:${proxyPort}/main`, {
+      await page.goto(`http://${proxyHost}:${proxyPort}/`, {
         waitUntil: "networkidle0",
       });
 
diff --git a/test/e2e/multi-compiler.test.js b/test/e2e/multi-compiler.test.js
index 2146f4dcff..42e131afec 100644
--- a/test/e2e/multi-compiler.test.js
+++ b/test/e2e/multi-compiler.test.js
@@ -33,7 +33,7 @@ describe("multi compiler", () => {
         pageErrors.push(error);
       });
 
-    await page.goto(`http://127.0.0.1:${port}/main`, {
+    await page.goto(`http://127.0.0.1:${port}/`, {
       waitUntil: "networkidle0",
     });
 
diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js
index 12822e9c48..c9e91865e9 100644
--- a/test/e2e/overlay.test.js
+++ b/test/e2e/overlay.test.js
@@ -77,7 +77,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -113,7 +113,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -153,7 +153,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -191,7 +191,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -228,7 +228,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -261,7 +261,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -327,7 +327,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -413,7 +413,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -493,7 +493,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -528,7 +528,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -561,7 +561,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -602,7 +602,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -643,7 +643,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -682,7 +682,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -717,7 +717,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -750,7 +750,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -791,7 +791,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -832,7 +832,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -872,7 +872,7 @@ describe("overlay", () => {
       consoleMessages.push(message.text());
     });
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -927,7 +927,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
@@ -977,7 +977,7 @@ describe("overlay", () => {
 
     const { page, browser } = await runBrowser();
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
diff --git a/test/e2e/port.test.js b/test/e2e/port.test.js
index c0b74cbb08..7ed0eb8df4 100644
--- a/test/e2e/port.test.js
+++ b/test/e2e/port.test.js
@@ -84,7 +84,7 @@ describe("port", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://127.0.0.1:${address.port}/main`, {
+      await page.goto(`http://127.0.0.1:${address.port}/`, {
         waitUntil: "networkidle0",
       });
 
diff --git a/test/e2e/progress.test.js b/test/e2e/progress.test.js
index 32c99ecc50..642e56f1c9 100644
--- a/test/e2e/progress.test.js
+++ b/test/e2e/progress.test.js
@@ -44,7 +44,7 @@ describe("progress", () => {
         }
       });
 
-    await page.goto(`http://localhost:${port}/main`, {
+    await page.goto(`http://localhost:${port}/`, {
       waitUntil: "networkidle0",
     });
 
diff --git a/test/e2e/setup-exit-signals.test.js b/test/e2e/setup-exit-signals.test.js
index d3fae081f8..35c9a54141 100644
--- a/test/e2e/setup-exit-signals.test.js
+++ b/test/e2e/setup-exit-signals.test.js
@@ -76,7 +76,7 @@ describe("setupExitSignals option", () => {
           pageErrors.push(error);
         });
 
-      const response = await page.goto(`http://127.0.0.1:${port}/main`, {
+      const response = await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
diff --git a/test/e2e/target.test.js b/test/e2e/target.test.js
index e73efb760b..a8d33cf01d 100644
--- a/test/e2e/target.test.js
+++ b/test/e2e/target.test.js
@@ -66,7 +66,7 @@ describe("target", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://127.0.0.1:${port}/main`, {
+      await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
diff --git a/test/e2e/web-socket-communication.test.js b/test/e2e/web-socket-communication.test.js
index 80e759a53f..a33b82cfc0 100644
--- a/test/e2e/web-socket-communication.test.js
+++ b/test/e2e/web-socket-communication.test.js
@@ -39,7 +39,7 @@ describe("web socket communication", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://127.0.0.1:${port}/main`, {
+      await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
       await server.stop();
@@ -84,7 +84,7 @@ describe("web socket communication", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://127.0.0.1:${port}/main`, {
+      await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
       await browser.close();
@@ -130,7 +130,7 @@ describe("web socket communication", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://127.0.0.1:${port}/main`, {
+      await page.goto(`http://127.0.0.1:${port}/`, {
         waitUntil: "networkidle0",
       });
 
diff --git a/test/e2e/web-socket-server-url.test.js b/test/e2e/web-socket-server-url.test.js
index 9435235ec4..6a5200505a 100644
--- a/test/e2e/web-socket-server-url.test.js
+++ b/test/e2e/web-socket-server-url.test.js
@@ -81,7 +81,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${proxyHost}:${proxyPort}/main`, {
+      await page.goto(`http://${proxyHost}:${proxyPort}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -167,7 +167,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${proxyHost}:${proxyPort}/main`, {
+      await page.goto(`http://${proxyHost}:${proxyPort}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -258,7 +258,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${proxyHost}:${proxyPort}/main`, {
+      await page.goto(`http://${proxyHost}:${proxyPort}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -349,7 +349,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${proxyHost}:${proxyPort}/main`, {
+      await page.goto(`http://${proxyHost}:${proxyPort}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -417,7 +417,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://localhost:${port1}/main`, {
+      await page.goto(`http://localhost:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -481,7 +481,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://localhost:${port1}/main`, {
+      await page.goto(`http://localhost:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -545,7 +545,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://localhost:${port1}/main`, {
+      await page.goto(`http://localhost:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -609,7 +609,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -673,7 +673,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -737,7 +737,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -801,7 +801,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -872,7 +872,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -938,7 +938,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1002,7 +1002,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1061,7 +1061,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1125,7 +1125,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1193,7 +1193,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1261,7 +1261,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1325,7 +1325,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1390,7 +1390,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1461,7 +1461,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1530,7 +1530,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1600,7 +1600,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1670,7 +1670,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1743,7 +1743,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1802,7 +1802,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${hostname}:${port1}/main`, {
+      await page.goto(`http://${hostname}:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1861,7 +1861,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${hostname}:${port1}/main`, {
+      await page.goto(`http://${hostname}:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1920,7 +1920,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://${hostname}:${port1}/main`, {
+      await page.goto(`http://${hostname}:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -1979,7 +1979,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`https://${hostname}:${port1}/main`, {
+      await page.goto(`https://${hostname}:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -2043,7 +2043,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`https://${hostname}:${port1}/main`, {
+      await page.goto(`https://${hostname}:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -2110,7 +2110,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${resolvedFreePort}/main`, {
+      await page.goto(`http://127.0.0.1:${resolvedFreePort}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -2179,7 +2179,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -2241,7 +2241,7 @@ describe("web socket server URL", () => {
         });
       }
 
-      await page.goto(`http://127.0.0.1:${port1}/main`, {
+      await page.goto(`http://127.0.0.1:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -2287,7 +2287,7 @@ describe("web socket server URL", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://localhost:${port1}/main`, {
+      await page.goto(`http://localhost:${port1}/`, {
         waitUntil: "networkidle0",
       });
 
@@ -2337,7 +2337,7 @@ describe("web socket server URL", () => {
           pageErrors.push(error);
         });
 
-      await page.goto(`http://localhost:${port1}/main`, {
+      await page.goto(`http://localhost:${port1}/`, {
         waitUntil: "networkidle0",
       });
       await new Promise((resolve) => {
diff --git a/test/e2e/web-socket-server.test.js b/test/e2e/web-socket-server.test.js
index fbc1504ed8..01a5aef095 100644
--- a/test/e2e/web-socket-server.test.js
+++ b/test/e2e/web-socket-server.test.js
@@ -40,7 +40,7 @@ describe("web socket server", () => {
       webSocketRequests.push(test);
     });
 
-    await page.goto(`http://127.0.0.1:${port}/main`, {
+    await page.goto(`http://127.0.0.1:${port}/`, {
       waitUntil: "networkidle0",
     });
 
diff --git a/test/fixtures/client-config/webpack.config.js b/test/fixtures/client-config/webpack.config.js
index 69fcaa0933..b9850fe67c 100644
--- a/test/fixtures/client-config/webpack.config.js
+++ b/test/fixtures/client-config/webpack.config.js
@@ -1,20 +1,10 @@
 "use strict";
 
 const webpack = require("webpack");
+const HTMLGeneratorPlugin = require("../../helpers/html-generator-plugin");
 
 const isWebpack5 = webpack.version.startsWith("5");
 
-const HTMLContent = `
-<!doctype html>
-<html>
-  <head>
-    <meta charset='UTF-8'>
-    <title>test</title>
-  </head>
-  <body></body>
-</html>
-`;
-
 module.exports = {
   devtool: "eval-nosources-cheap-source-map",
   mode: "development",
@@ -34,42 +24,5 @@ module.exports = {
     : {
         level: "info",
       },
-  plugins: [
-    {
-      apply(compiler) {
-        const pluginName = "html-generator-plugin-test";
-        const filename = "test.html";
-
-        compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
-          if (compiler.webpack) {
-            const { RawSource } = compiler.webpack.sources;
-
-            compilation.hooks.processAssets.tap(
-              {
-                name: pluginName,
-                stage:
-                  compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
-              },
-              () => {
-                const source = new RawSource(HTMLContent);
-
-                compilation.emitAsset(filename, source);
-              }
-            );
-          } else {
-            compilation.hooks.additionalAssets.tap(pluginName, () => {
-              compilation.emitAsset(filename, {
-                source() {
-                  return HTMLContent;
-                },
-                size() {
-                  return HTMLContent.length;
-                },
-              });
-            });
-          }
-        });
-      },
-    },
-  ],
+  plugins: [new HTMLGeneratorPlugin()],
 };
diff --git a/test/fixtures/multi-compiler-one-configuration/webpack.config.js b/test/fixtures/multi-compiler-one-configuration/webpack.config.js
index 7f2a435195..c64bd808d5 100644
--- a/test/fixtures/multi-compiler-one-configuration/webpack.config.js
+++ b/test/fixtures/multi-compiler-one-configuration/webpack.config.js
@@ -1,6 +1,7 @@
 "use strict";
 
 const webpack = require("webpack");
+const HTMLGeneratorPlugin = require("../../helpers/html-generator-plugin");
 
 const isWebpack5 = webpack.version.startsWith("5");
 
@@ -25,5 +26,6 @@ module.exports = [
       : {
           level: "info",
         },
+    plugins: [new HTMLGeneratorPlugin()],
   },
 ];
diff --git a/test/fixtures/overlay-config/webpack.config.js b/test/fixtures/overlay-config/webpack.config.js
index 56ac7546bb..4bb841ab97 100644
--- a/test/fixtures/overlay-config/webpack.config.js
+++ b/test/fixtures/overlay-config/webpack.config.js
@@ -1,6 +1,7 @@
 "use strict";
 
 const webpack = require("webpack");
+const HTMLGeneratorPlugin = require("../../helpers/html-generator-plugin");
 
 const isWebpack5 = webpack.version.startsWith("5");
 
@@ -22,4 +23,5 @@ module.exports = {
     : {
         level: "info",
       },
+  plugins: [new HTMLGeneratorPlugin()],
 };
diff --git a/test/fixtures/reload-config-2/webpack.config.js b/test/fixtures/reload-config-2/webpack.config.js
index 02847ac3db..91e224687e 100644
--- a/test/fixtures/reload-config-2/webpack.config.js
+++ b/test/fixtures/reload-config-2/webpack.config.js
@@ -1,6 +1,7 @@
 "use strict";
 
 const webpack = require("webpack");
+const HTMLGeneratorPlugin = require("../../helpers/html-generator-plugin");
 
 const isWebpack5 = webpack.version.startsWith("5");
 
@@ -31,4 +32,5 @@ module.exports = {
     : {
         level: "info",
       },
+  plugins: [new HTMLGeneratorPlugin()],
 };
diff --git a/test/fixtures/simple-config/webpack.config.js b/test/fixtures/simple-config/webpack.config.js
index 2ba7d2cd74..d164da8308 100644
--- a/test/fixtures/simple-config/webpack.config.js
+++ b/test/fixtures/simple-config/webpack.config.js
@@ -1,6 +1,7 @@
 "use strict";
 
 const webpack = require("webpack");
+const HTMLGeneratorPlugin = require("../../helpers/html-generator-plugin");
 
 const isWebpack5 = webpack.version.startsWith("5");
 
@@ -23,4 +24,5 @@ module.exports = {
     : {
         level: "info",
       },
+  plugins: [new HTMLGeneratorPlugin()],
 };
diff --git a/test/helpers/html-generator-plugin.js b/test/helpers/html-generator-plugin.js
new file mode 100644
index 0000000000..9b74d914a4
--- /dev/null
+++ b/test/helpers/html-generator-plugin.js
@@ -0,0 +1,74 @@
+"use strict";
+
+const HTMLContentForIndex = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='UTF-8'>
+    <title>webpack-dev-server</title>
+  </head>
+  <body>
+    <h1>webpack-dev-server is running...</h1>
+    <script type="text/javascript" charset="utf-8" src="/main.js"></script>
+  </body>
+</html>
+`;
+
+const HTMLContentForTest = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='UTF-8'>
+    <title>test</title>
+  </head>
+  <body>
+    <h1>Created via HTMLGeneratorPlugin</h1>
+  </body>
+</html>
+`;
+
+module.exports = class HTMLGeneratorPlugin {
+  // eslint-disable-next-line class-methods-use-this
+  apply(compiler) {
+    const pluginName = "html-generator-plugin";
+
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+      if (compiler.webpack) {
+        const { RawSource } = compiler.webpack.sources;
+
+        compilation.hooks.processAssets.tap(
+          {
+            name: pluginName,
+            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+          },
+          () => {
+            const indexSource = new RawSource(HTMLContentForIndex);
+            const testSource = new RawSource(HTMLContentForTest);
+
+            compilation.emitAsset("index.html", indexSource);
+            compilation.emitAsset("test.html", testSource);
+          }
+        );
+      } else {
+        compilation.hooks.additionalAssets.tap(pluginName, () => {
+          compilation.emitAsset("index.html", {
+            source() {
+              return HTMLContentForIndex;
+            },
+            size() {
+              return HTMLContentForIndex.length;
+            },
+          });
+          compilation.emitAsset("test.html", {
+            source() {
+              return HTMLContentForTest;
+            },
+            size() {
+              return HTMLContentForTest.length;
+            },
+          });
+        });
+      }
+    });
+  }
+};