webpack-dev-server 4.15.0 → 5.0.0

package/lib/Server.js

@@ -37,18 +37,19 @@ const schema = require("./options.json");
 /** @typedef {import("ipaddr.js").IPv6} IPv6 */
 /** @typedef {import("net").Socket} Socket */
 /** @typedef {import("http").IncomingMessage} IncomingMessage */
+/** @typedef {import("http").ServerResponse} ServerResponse */
 /** @typedef {import("open").Options} OpenOptions */
 
 /** @typedef {import("https").ServerOptions & { spdy?: { plain?: boolean | undefined, ssl?: boolean | undefined, 'x-forwarded-for'?: string | undefined, protocol?: string | undefined, protocols?: string[] | undefined }}} ServerOptions */
 
 /**
  * @template Request, Response
- * @typedef {import("webpack-dev-middleware").Options<Request, Response>} DevMiddlewareOptions
+ * @typedef {import("webpack-dev-middleware").Options<IncomingMessage, ServerResponse>} DevMiddlewareOptions
  */
 
 /**
  * @template Request, Response
- * @typedef {import("webpack-dev-middleware").Context<Request, Response>} DevMiddlewareContext
+ * @typedef {import("webpack-dev-middleware").Context<IncomingMessage, ServerResponse>} DevMiddlewareContext
  */
 
 /**
@@ -185,7 +186,6 @@ const schema = require("./options.json");
  * @property {boolean} [liveReload]
  * @property {DevMiddlewareOptions<Request, Response>} [devMiddleware]
  * @property {boolean} [compress]
- * @property {boolean} [magicHtml]
  * @property {"auto" | "all" | string | string[]} [allowedHosts]
  * @property {boolean | ConnectHistoryApiFallbackOptions} [historyApiFallback]
  * @property {boolean | Record<string, never> | BonjourOptions} [bonjour]
@@ -200,16 +200,12 @@ const schema = require("./options.json");
  * @property {boolean} [setupExitSignals]
  * @property {boolean | ClientConfiguration} [client]
  * @property {Headers | ((req: Request, res: Response, context: DevMiddlewareContext<Request, Response>) => Headers)} [headers]
- * @property {(devServer: Server) => void} [onAfterSetupMiddleware]
- * @property {(devServer: Server) => void} [onBeforeSetupMiddleware]
  * @property {(devServer: Server) => void} [onListening]
  * @property {(middlewares: Middleware[], devServer: Server) => Middleware[]} [setupMiddlewares]
  */
 
 if (!process.env.WEBPACK_SERVE) {
-  // TODO fix me in the next major release
-  // @ts-ignore
-  process.env.WEBPACK_SERVE = true;
+  process.env.WEBPACK_SERVE = "true";
 }
 
 /**
@@ -256,17 +252,6 @@ class Server {
    * @param {Compiler | MultiCompiler | Configuration} compiler
    */
   constructor(options = {}, compiler) {
-    // TODO: remove this after plugin support is published
-    if (/** @type {Compiler | MultiCompiler} */ (options).hooks) {
-      util.deprecate(
-        () => {},
-        "Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.",
-        "DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR"
-      )();
-
-      [options = {}, compiler] = [compiler, options];
-    }
-
     validate(/** @type {Schema} */ (schema), options, {
       name: "Dev Server",
       baseDataPath: "options",
@@ -305,18 +290,6 @@ class Server {
     this.currentHash = undefined;
   }
 
-  // TODO compatibility with webpack v4, remove it after drop
-  static get cli() {
-    return {
-      get getArguments() {
-        return () => require("../bin/cli-flags");
-      },
-      get processArguments() {
-        return require("../bin/process-arguments");
-      },
-    };
-  }
-
   static get schema() {
     return schema;
   }
@@ -383,6 +356,7 @@ class Server {
   static async internalIP(family) {
     try {
       const { gateway } = await require("default-gateway")[family]();
+
       return Server.findIp(gateway);
     } catch {
       // ignore
@@ -396,6 +370,7 @@ class Server {
   static internalIPSync(family) {
     try {
       const { gateway } = require("default-gateway")[family].sync();
+
       return Server.findIp(gateway);
     } catch {
       // ignore
@@ -432,7 +407,7 @@ class Server {
       return port;
     }
 
-    const pRetry = require("p-retry");
+    const pRetry = (await import("p-retry")).default;
     const getPort = require("./getPort");
     const basePort =
       typeof process.env.WEBPACK_DEV_SERVER_BASE_PORT !== "undefined"
@@ -582,18 +557,27 @@ class Server {
         let hostname;
 
         // SockJS is not supported server mode, so `hostname` and `port` can't specified, let's ignore them
-        // TODO show warning about this
         const isSockJSType = webSocketServer.type === "sockjs";
+        const isWebSocketServerHostDefined =
+          typeof webSocketServer.options.host !== "undefined";
+        const isWebSocketServerPortDefined =
+          typeof webSocketServer.options.port !== "undefined";
+
+        if (
+          isSockJSType &&
+          (isWebSocketServerHostDefined || isWebSocketServerPortDefined)
+        ) {
+          this.logger.warn(
+            "SockJS only supports client mode and does not support custom hostname and port options. Please consider using 'ws' if you need to customize these options.",
+          );
+        }
 
         // We are proxying dev server and need to specify custom `hostname`
         if (typeof webSocketURL.hostname !== "undefined") {
           hostname = webSocketURL.hostname;
         }
         // Web socket server works on custom `hostname`, only for `ws` because `sock-js` is not support custom `hostname`
-        else if (
-          typeof webSocketServer.options.host !== "undefined" &&
-          !isSockJSType
-        ) {
+        else if (isWebSocketServerHostDefined && !isSockJSType) {
           hostname = webSocketServer.options.host;
         }
         // The `host` option is specified
@@ -615,10 +599,7 @@ class Server {
           port = webSocketURL.port;
         }
         // Web socket server works on custom `port`, only for `ws` because `sock-js` is not support custom `port`
-        else if (
-          typeof webSocketServer.options.port !== "undefined" &&
-          !isSockJSType
-        ) {
+        else if (isWebSocketServerPortDefined && !isSockJSType) {
           port = webSocketServer.options.port;
         }
         // The `port` option is specified
@@ -676,7 +657,7 @@ class Server {
                   errors: encodeOverlaySettings(client.overlay.errors),
                   warnings: encodeOverlaySettings(client.overlay.warnings),
                   runtimeErrors: encodeOverlaySettings(
-                    client.overlay.runtimeErrors
+                    client.overlay.runtimeErrors,
                   ),
                 });
 
@@ -688,7 +669,7 @@ class Server {
             "reconnect",
             typeof client.reconnect === "number"
               ? String(client.reconnect)
-              : "10"
+              : "10",
           );
         }
 
@@ -704,7 +685,7 @@ class Server {
       }
 
       additionalEntries.push(
-        `${require.resolve("../client/index.js")}?${webSocketURLStr}`
+        `${require.resolve("../client/index.js")}?${webSocketURLStr}`,
       );
     }
 
@@ -717,69 +698,11 @@ class Server {
     const webpack = compiler.webpack || require("webpack");
 
     // use a hook to add entries if available
-    if (typeof webpack.EntryPlugin !== "undefined") {
-      for (const additionalEntry of additionalEntries) {
-        new webpack.EntryPlugin(compiler.context, additionalEntry, {
-          // eslint-disable-next-line no-undefined
-          name: undefined,
-        }).apply(compiler);
-      }
-    }
-    // TODO remove after drop webpack v4 support
-    else {
-      /**
-       * prependEntry Method for webpack 4
-       * @param {any} originalEntry
-       * @param {any} newAdditionalEntries
-       * @returns {any}
-       */
-      const prependEntry = (originalEntry, newAdditionalEntries) => {
-        if (typeof originalEntry === "function") {
-          return () =>
-            Promise.resolve(originalEntry()).then((entry) =>
-              prependEntry(entry, newAdditionalEntries)
-            );
-        }
-
-        if (
-          typeof originalEntry === "object" &&
-          !Array.isArray(originalEntry)
-        ) {
-          /** @type {Object<string,string>} */
-          const clone = {};
-
-          Object.keys(originalEntry).forEach((key) => {
-            // entry[key] should be a string here
-            const entryDescription = originalEntry[key];
-
-            clone[key] = prependEntry(entryDescription, newAdditionalEntries);
-          });
-
-          return clone;
-        }
-
-        // in this case, entry is a string or an array.
-        // make sure that we do not add duplicates.
-        /** @type {any} */
-        const entriesClone = additionalEntries.slice(0);
-
-        [].concat(originalEntry).forEach((newEntry) => {
-          if (!entriesClone.includes(newEntry)) {
-            entriesClone.push(newEntry);
-          }
-        });
-
-        return entriesClone;
-      };
-
-      compiler.options.entry = prependEntry(
-        compiler.options.entry || "./src",
-        additionalEntries
-      );
-      compiler.hooks.entryOption.call(
-        /** @type {string} */ (compiler.options.context),
-        compiler.options.entry
-      );
+    for (const additionalEntry of additionalEntries) {
+      new webpack.EntryPlugin(compiler.context, additionalEntry, {
+        // eslint-disable-next-line no-undefined
+        name: undefined,
+      }).apply(compiler);
     }
   }
 
@@ -824,7 +747,7 @@ class Server {
               // eslint-disable-next-line no-undefined
               undefined,
               null,
-            ].includes(/** @type {string} */ (config.options.target))
+            ].includes(/** @type {string} */ (config.options.target)),
         );
 
       if (compilerWithWebPreset) {
@@ -845,8 +768,7 @@ class Server {
   async normalizeOptions() {
     const { options } = this;
     const compilerOptions = this.getCompilerOptions();
-    // TODO remove `{}` after drop webpack v4 support
-    const compilerWatchOptions = compilerOptions.watchOptions || {};
+    const compilerWatchOptions = compilerOptions.watchOptions;
     /**
      * @param {WatchOptions & { aggregateTimeout?: number, ignored?: WatchOptions["ignored"], poll?: number | boolean }} watchOptions
      * @returns {WatchOptions}
@@ -933,10 +855,9 @@ class Server {
             typeof optionsForStatic.directory !== "undefined"
               ? optionsForStatic.directory
               : def.directory,
-          // TODO: do merge in the next major release
           staticOptions:
             typeof optionsForStatic.staticOptions !== "undefined"
-              ? optionsForStatic.staticOptions
+              ? { ...def.staticOptions, ...optionsForStatic.staticOptions }
               : def.staticOptions,
           publicPath:
             // eslint-disable-next-line no-nested-ternary
@@ -945,14 +866,21 @@ class Server {
                 ? optionsForStatic.publicPath
                 : [optionsForStatic.publicPath]
               : def.publicPath,
-          // TODO: do merge in the next major release
           serveIndex:
+            // Check if 'serveIndex' property is defined in 'optionsForStatic'
+            // If 'serveIndex' is a boolean and true, use default 'serveIndex'
+            // If 'serveIndex' is an object, merge its properties with default 'serveIndex'
+            // If 'serveIndex' is neither a boolean true nor an object, use it as-is
+            // If 'serveIndex' is not defined in 'optionsForStatic', use default 'serveIndex'
             // eslint-disable-next-line no-nested-ternary
             typeof optionsForStatic.serveIndex !== "undefined"
-              ? typeof optionsForStatic.serveIndex === "boolean" &&
+              ? // eslint-disable-next-line no-nested-ternary
+                typeof optionsForStatic.serveIndex === "boolean" &&
                 optionsForStatic.serveIndex
                 ? def.serveIndex
-                : optionsForStatic.serveIndex
+                : typeof optionsForStatic.serveIndex === "object"
+                  ? { ...def.serveIndex, ...optionsForStatic.serveIndex }
+                  : optionsForStatic.serveIndex
               : def.serveIndex,
           watch:
             // eslint-disable-next-line no-nested-ternary
@@ -1023,7 +951,7 @@ class Server {
         };
       } else if (typeof options.client.webSocketURL.port === "string") {
         options.client.webSocketURL.port = Number(
-          options.client.webSocketURL.port
+          options.client.webSocketURL.port,
         );
       }
 
@@ -1080,41 +1008,14 @@ class Server {
         ? options.hot
         : true;
 
-    const isHTTPs = Boolean(options.https);
-    const isSPDY = Boolean(options.http2);
-
-    if (isHTTPs) {
-      // TODO: remove in the next major release
-      util.deprecate(
-        () => {},
-        "'https' option is deprecated. Please use the 'server' option.",
-        "DEP_WEBPACK_DEV_SERVER_HTTPS"
-      )();
-    }
-
-    if (isSPDY) {
-      // TODO: remove in the next major release
-      util.deprecate(
-        () => {},
-        "'http2' option is deprecated. Please use the 'server' option.",
-        "DEP_WEBPACK_DEV_SERVER_HTTP2"
-      )();
-    }
-
     options.server = {
       type:
         // eslint-disable-next-line no-nested-ternary
         typeof options.server === "string"
           ? options.server
-          : // eslint-disable-next-line no-nested-ternary
-          typeof (options.server || {}).type === "string"
-          ? /** @type {ServerConfiguration} */ (options.server).type || "http"
-          : // eslint-disable-next-line no-nested-ternary
-          isSPDY
-          ? "spdy"
-          : isHTTPs
-          ? "https"
-          : "http",
+          : typeof (options.server || {}).type === "string"
+            ? /** @type {ServerConfiguration} */ (options.server).type || "http"
+            : "http",
       options: {
         .../** @type {ServerOptions} */ (options.https),
         .../** @type {ServerConfiguration} */ (options.server || {}).options,
@@ -1144,7 +1045,7 @@ class Server {
 
       const httpsProperties =
         /** @type {Array<keyof ServerOptions>} */
-        (["cacert", "ca", "cert", "crl", "key", "pfx"]);
+        (["ca", "cert", "crl", "key", "pfx"]);
 
       for (const property of httpsProperties) {
         if (
@@ -1156,16 +1057,6 @@ class Server {
           continue;
         }
 
-        // @ts-ignore
-        if (property === "cacert") {
-          // TODO remove the `cacert` option in favor `ca` in the next major release
-          util.deprecate(
-            () => {},
-            "The 'cacert' option is deprecated. Please use the 'ca' option.",
-            "DEP_WEBPACK_DEV_SERVER_CACERT"
-          )();
-        }
-
         /** @type {any} */
         const value =
           /** @type {ServerOptions} */
@@ -1226,15 +1117,13 @@ class Server {
 
           // cert is more than 30 days old, kill it with fire
           if ((now - Number(certificateStat.ctime)) / certificateTtl > 30) {
-            const { promisify } = require("util");
-            const rimraf = require("rimraf");
-            const del = promisify(rimraf);
+            const { rimraf } = require("rimraf");
 
             this.logger.info(
-              "SSL certificate is more than 30 days old. Removing..."
+              "SSL certificate is more than 30 days old. Removing...",
             );
 
-            await del(certificatePath);
+            await rimraf(certificatePath);
 
             certificateExists = false;
           }
@@ -1315,7 +1204,7 @@ class Server {
             pems.private + pems.cert,
             {
               encoding: "utf8",
-            }
+            },
           );
         }
 
@@ -1324,29 +1213,6 @@ class Server {
         this.logger.info(`SSL certificate: ${certificatePath}`);
       }
 
-      if (
-        /** @type {ServerOptions & { cacert?: ServerOptions["ca"] }} */ (
-          options.server.options
-        ).cacert
-      ) {
-        if (/** @type {ServerOptions} */ (options.server.options).ca) {
-          this.logger.warn(
-            "Do not specify 'ca' and 'cacert' options together, the 'ca' option will be used."
-          );
-        } else {
-          /** @type {ServerOptions} */
-          (options.server.options).ca =
-            /** @type {ServerOptions & { cacert?: ServerOptions["ca"] }} */
-            (options.server.options).cacert;
-        }
-
-        delete (
-          /** @type {ServerOptions & { cacert?: ServerOptions["ca"] }} */ (
-            options.server.options
-          ).cacert
-        );
-      }
-
       /** @type {ServerOptions} */
       (options.server.options).key =
         /** @type {ServerOptions} */
@@ -1368,16 +1234,12 @@ class Server {
     options.liveReload =
       typeof options.liveReload !== "undefined" ? options.liveReload : true;
 
-    options.magicHtml =
-      typeof options.magicHtml !== "undefined" ? options.magicHtml : true;
-
     // https://github.com/webpack/webpack-dev-server/issues/1990
     const defaultOpenOptions = { wait: false };
     /**
      * @param {any} target
      * @returns {NormalizedOpen[]}
      */
-    // TODO: remove --open-app in favor of --open-app-name
     const getOpenItemsFromObject = ({ target, ...rest }) => {
       const normalizedOptions = { ...defaultOpenOptions, ...rest };
 
@@ -1437,24 +1299,6 @@ class Server {
       (options.open) = [...getOpenItemsFromObject(options.open)];
     }
 
-    if (options.onAfterSetupMiddleware) {
-      // TODO: remove in the next major release
-      util.deprecate(
-        () => {},
-        "'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.",
-        `DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE`
-      )();
-    }
-
-    if (options.onBeforeSetupMiddleware) {
-      // TODO: remove in the next major release
-      util.deprecate(
-        () => {},
-        "'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.",
-        `DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE`
-      )();
-    }
-
     if (typeof options.port === "string" && options.port !== "auto") {
       options.port = Number(options.port);
     }
@@ -1470,53 +1314,6 @@ class Server {
      * }
      */
     if (typeof options.proxy !== "undefined") {
-      // TODO remove in the next major release, only accept `Array`
-      if (!Array.isArray(options.proxy)) {
-        if (
-          Object.prototype.hasOwnProperty.call(options.proxy, "target") ||
-          Object.prototype.hasOwnProperty.call(options.proxy, "router")
-        ) {
-          /** @type {ProxyConfigArray} */
-          (options.proxy) = [/** @type {ProxyConfigMap} */ (options.proxy)];
-        } else {
-          /** @type {ProxyConfigArray} */
-          (options.proxy) = Object.keys(options.proxy).map(
-            /**
-             * @param {string} context
-             * @returns {HttpProxyMiddlewareOptions}
-             */
-            (context) => {
-              let proxyOptions;
-              // For backwards compatibility reasons.
-              const correctedContext = context
-                .replace(/^\*$/, "**")
-                .replace(/\/\*$/, "");
-
-              if (
-                typeof (
-                  /** @type {ProxyConfigMap} */ (options.proxy)[context]
-                ) === "string"
-              ) {
-                proxyOptions = {
-                  context: correctedContext,
-                  target:
-                    /** @type {ProxyConfigMap} */
-                    (options.proxy)[context],
-                };
-              } else {
-                proxyOptions = {
-                  // @ts-ignore
-                  .../** @type {ProxyConfigMap} */ (options.proxy)[context],
-                };
-                proxyOptions.context = correctedContext;
-              }
-
-              return proxyOptions;
-            }
-          );
-        }
-      }
-
       /** @type {ProxyConfigArray} */
       (options.proxy) =
         /** @type {ProxyConfigArray} */
@@ -1549,7 +1346,7 @@ class Server {
             item.logLevel = getLogLevelForProxy(
               compilerOptions.infrastructureLogging
                 ? compilerOptions.infrastructureLogging.level
-                : "info"
+                : "info",
             );
           }
 
@@ -1697,11 +1494,11 @@ class Server {
         // could be 'sockjs', 'ws', or a path that should be required
         if (clientTransport === "sockjs") {
           clientImplementation = require.resolve(
-            "../client/clients/SockJSClient"
+            "../client/clients/SockJSClient",
           );
         } else if (clientTransport === "ws") {
           clientImplementation = require.resolve(
-            "../client/clients/WebSocketClient"
+            "../client/clients/WebSocketClient",
           );
         } else {
           try {
@@ -1721,7 +1518,7 @@ class Server {
           !isKnownWebSocketServerImplementation
             ? "When you use custom web socket implementation you must explicitly specify client.webSocketTransport. "
             : ""
-        }client.webSocketTransport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class `
+        }client.webSocketTransport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class `,
       );
     }
 
@@ -1759,9 +1556,11 @@ class Server {
         } else {
           try {
             // eslint-disable-next-line import/no-dynamic-require
-            implementation = require(/** @type {WebSocketServerConfiguration} */ (
-              this.options.webSocketServer
-            ).type);
+            implementation = require(
+              /** @type {WebSocketServerConfiguration} */ (
+                this.options.webSocketServer
+              ).type,
+            );
           } catch (error) {
             implementationFound = false;
           }
@@ -1780,7 +1579,7 @@ class Server {
       throw new Error(
         "webSocketServer (webSocketServer.type) must be a string denoting a default implementation (e.g. 'ws', 'sockjs'), a full path to " +
           "a JS file which exports a class extending BaseServer (webpack-dev-server/lib/servers/BaseServer.js) " +
-          "via require.resolve(...), or the class itself which extends BaseServer"
+          "via require.resolve(...), or the class itself which extends BaseServer",
       );
     }
 
@@ -1796,9 +1595,7 @@ class Server {
       /** @type {MultiCompiler}*/
       (this.compiler).compilers
         ? /** @type {MultiCompiler}*/ (this.compiler).compilers[0].webpack
-        : /** @type {Compiler}*/ (this.compiler).webpack ||
-          // TODO remove me after drop webpack v4
-          require("webpack");
+        : /** @type {Compiler}*/ (this.compiler).webpack;
 
     new ProgressPlugin(
       /**
@@ -1829,7 +1626,7 @@ class Server {
         if (this.server) {
           this.server.emit("progress-update", { percent, msg, pluginName });
         }
-      }
+      },
     ).apply(this.compiler);
   }
 
@@ -1852,17 +1649,14 @@ class Server {
           __webpack_dev_server_client__: this.getClientTransport(),
         }).apply(compiler);
 
-        // TODO remove after drop webpack v4 support
-        compiler.options.plugins = compiler.options.plugins || [];
-
         if (this.options.hot) {
           const HMRPluginExists = compiler.options.plugins.find(
-            (p) => p.constructor === webpack.HotModuleReplacementPlugin
+            (p) => p && p.constructor === webpack.HotModuleReplacementPlugin,
           );
 
           if (HMRPluginExists) {
             this.logger.warn(
-              `"hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.`
+              `"hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.`,
             );
           } else {
             // Apply the HMR plugin
@@ -1904,7 +1698,7 @@ class Server {
           }
 
           this.logger.info(
-            "Gracefully shutting down. To force exit, press ^C again. Please wait..."
+            "Gracefully shutting down. To force exit, press ^C again. Please wait...",
           );
 
           needForceShutdown = true;
@@ -1934,7 +1728,7 @@ class Server {
       (this.server).on(
         "upgrade",
         /** @type {RequestHandler & { upgrade: NonNullable<RequestHandler["upgrade"]> }} */
-        (webSocketProxy).upgrade
+        (webSocketProxy).upgrade,
       );
     }, this);
   }
@@ -1991,7 +1785,7 @@ class Server {
          * @type {Stats | MultiStats}
          */
         this.stats = stats;
-      }
+      },
     );
   }
 
@@ -2014,14 +1808,14 @@ class Server {
           this.checkHeader(
             /** @type {{ [key: string]: string | undefined }} */
             (req.headers),
-            "host"
+            "host",
           )
         ) {
           return next();
         }
 
         res.send("Invalid Host header");
-      }
+      },
     );
   }
 
@@ -2035,7 +1829,7 @@ class Server {
     // middleware for serving webpack bundle
     this.middleware = webpackDevMiddleware(
       this.compiler,
-      this.options.devMiddleware
+      this.options.devMiddleware,
     );
   }
 
@@ -2060,7 +1854,7 @@ class Server {
         const clientPath = path.join(__dirname, "..", "client");
 
         res.sendFile(path.join(clientPath, "modules/sockjs-client/index.js"));
-      }
+      },
     );
 
     /** @type {import("express").Application} */
@@ -2075,7 +1869,7 @@ class Server {
         this.invalidate();
 
         res.end();
-      }
+      },
     );
 
     /** @type {import("express").Application} */
@@ -2103,8 +1897,13 @@ class Server {
         /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
         (middleware).waitUntilValid((stats) => {
           res.setHeader("Content-Type", "text/html");
+          // HEAD requests should not return body content
+          if (req.method === "HEAD") {
+            res.end();
+            return;
+          }
           res.write(
-            '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
+            '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>',
           );
 
           const statsForPrint =
@@ -2125,8 +1924,8 @@ class Server {
               typeof item.name !== "undefined"
                 ? item.name
                 : /** @type {MultiStats} */ (stats).stats
-                ? `unnamed[${index}]`
-                : "unnamed";
+                  ? `unnamed[${index}]`
+                  : "unnamed";
 
             res.write(`<h2>Compilation: ${name}</h2>`);
             res.write("<ul>");
@@ -2143,7 +1942,7 @@ class Server {
               res.write(
                 `<li>
               <strong><a href="${assetURL}" target="_blank">${assetName}</a></strong>
-            </li>`
+            </li>`,
               );
             }
 
@@ -2153,7 +1952,7 @@ class Server {
 
           res.end("</body></html>");
         });
-      }
+      },
     );
   }
 
@@ -2204,10 +2003,6 @@ class Server {
       middlewares.push({ name: "compression", middleware: compression() });
     }
 
-    if (typeof this.options.onBeforeSetupMiddleware === "function") {
-      this.options.onBeforeSetupMiddleware(this);
-    }
-
     if (typeof this.options.headers !== "undefined") {
       middlewares.push({
         name: "set-headers",
@@ -2238,13 +2033,22 @@ class Server {
 
           return createProxyMiddleware(
             /** @type {string} */ (context),
-            proxyConfig
+            proxyConfig,
           );
         }
 
         if (proxyConfig.router) {
           return createProxyMiddleware(proxyConfig);
         }
+
+        // TODO improve me after drop `bypass` to always generate error when configuration is bad
+        if (!proxyConfig.bypass) {
+          util.deprecate(
+            () => {},
+            `Invalid proxy configuration:\n\n${JSON.stringify(proxyConfig, null, 2)}\n\nThe use of proxy object notation as proxy routes has been removed.\nPlease use the 'router' or 'context' options. Read more at https://github.com/chimurai/http-proxy-middleware/tree/v2.0.6#http-proxy-middleware-options`,
+            "DEP_WEBPACK_DEV_SERVER_PROXY_ROUTES_ARGUMENT",
+          )();
+        }
       };
 
       /**
@@ -2295,6 +2099,15 @@ class Server {
 
             if (newProxyConfig !== proxyConfig) {
               proxyConfig = newProxyConfig;
+
+              const socket = req.socket != null ? req.socket : req.connection;
+              // @ts-ignore
+              const server = socket != null ? socket.server : null;
+
+              if (server) {
+                server.removeAllListeners("close");
+              }
+
               proxyMiddleware =
                 /** @type {RequestHandler} */
                 (getProxyMiddleware(proxyConfig));
@@ -2306,11 +2119,18 @@ class Server {
           // bypassUrl from it otherwise bypassUrl would be null
           // TODO remove in the next major in favor `context` and `router` options
           const isByPassFuncDefined = typeof proxyConfig.bypass === "function";
+          if (isByPassFuncDefined) {
+            util.deprecate(
+              () => {},
+              "Using the 'bypass' option is deprecated. Please use the 'router' or 'context' options. Read more at https://github.com/chimurai/http-proxy-middleware/tree/v2.0.6#http-proxy-middleware-options",
+              "DEP_WEBPACK_DEV_SERVER_PROXY_BYPASS_ARGUMENT",
+            )();
+          }
           const bypassUrl = isByPassFuncDefined
             ? await /** @type {ByPass} */ (proxyConfig.bypass)(
                 req,
                 res,
-                proxyConfig
+                proxyConfig,
               )
             : null;
 
@@ -2366,7 +2186,7 @@ class Server {
             path: publicPath,
             middleware: getExpress().static(
               staticOption.directory,
-              staticOption.staticOptions
+              staticOption.staticOptions,
             ),
           });
         });
@@ -2390,7 +2210,7 @@ class Server {
         // @ts-ignore
         historyApiFallback.logger = this.logger.log.bind(
           this.logger,
-          "[connect-history-api-fallback]"
+          "[connect-history-api-fallback]",
         );
       }
 
@@ -2399,7 +2219,7 @@ class Server {
         name: "connect-history-api-fallback",
         middleware: connectHistoryApiFallback(
           /** @type {ConnectHistoryApiFallbackOptions} */
-          (historyApiFallback)
+          (historyApiFallback),
         ),
       });
 
@@ -2421,7 +2241,7 @@ class Server {
               path: publicPath,
               middleware: getExpress().static(
                 staticOption.directory,
-                staticOption.staticOptions
+                staticOption.staticOptions,
               ),
             });
           });
@@ -2454,7 +2274,7 @@ class Server {
                 serveIndex(
                   staticOption.directory,
                   /** @type {ServeIndexOptions} */
-                  (staticOption.serveIndex)
+                  (staticOption.serveIndex),
                 )(req, res, next);
               },
             });
@@ -2463,13 +2283,6 @@ class Server {
       });
     }
 
-    if (this.options.magicHtml) {
-      middlewares.push({
-        name: "serve-magic-html",
-        middleware: this.serveMagicHtml.bind(this),
-      });
-    }
-
     // Register this middleware always as the last one so that it's only used as a
     // fallback when no other middleware responses.
     middlewares.push({
@@ -2508,10 +2321,6 @@ class Server {
         (this.app).use(middleware.middleware);
       }
     });
-
-    if (typeof this.options.onAfterSetupMiddleware === "function") {
-      this.options.onAfterSetupMiddleware(this);
-    }
   }
 
   /**
@@ -2527,7 +2336,7 @@ class Server {
     // eslint-disable-next-line import/no-dynamic-require
     this.server = require(/** @type {string} */ (type)).createServer(
       options,
-      this.app
+      this.app,
     );
 
     /** @type {import("http").Server} */
@@ -2544,7 +2353,7 @@ class Server {
           // Remove socket from list
           this.sockets.splice(this.sockets.indexOf(socket), 1);
         });
-      }
+      },
     );
 
     /** @type {import("http").Server} */
@@ -2555,7 +2364,7 @@ class Server {
        */
       (error) => {
         throw error;
-      }
+      },
     );
   }
 
@@ -2563,11 +2372,10 @@ class Server {
    * @private
    * @returns {void}
    */
-  // TODO: remove `--web-socket-server` in favor of `--web-socket-server-type`
   createWebSocketServer() {
     /** @type {WebSocketServerImplementation | undefined | null} */
     this.webSocketServer = new /** @type {any} */ (this.getServerTransport())(
-      this
+      this,
     );
     /** @type {WebSocketServerImplementation} */
     (this.webSocketServer).implementation.on(
@@ -2584,15 +2392,15 @@ class Server {
             ? /** @type {{ [key: string]: string | undefined }} */
               (request.headers)
             : typeof (
-                /** @type {import("sockjs").Connection} */ (client).headers
-              ) !== "undefined"
-            ? /** @type {import("sockjs").Connection} */ (client).headers
-            : // eslint-disable-next-line no-undefined
-              undefined;
+                  /** @type {import("sockjs").Connection} */ (client).headers
+                ) !== "undefined"
+              ? /** @type {import("sockjs").Connection} */ (client).headers
+              : // eslint-disable-next-line no-undefined
+                undefined;
 
         if (!headers) {
           this.logger.warn(
-            'webSocketServer implementation must pass headers for the "connection" event'
+            'webSocketServer implementation must pass headers for the "connection" event',
           );
         }
 
@@ -2627,7 +2435,7 @@ class Server {
             [client],
             "progress",
             /** @type {ClientConfiguration} */
-            (this.options.client).progress
+            (this.options.client).progress,
           );
         }
 
@@ -2639,7 +2447,7 @@ class Server {
             [client],
             "reconnect",
             /** @type {ClientConfiguration} */
-            (this.options.client).reconnect
+            (this.options.client).reconnect,
           );
         }
 
@@ -2668,7 +2476,7 @@ class Server {
                     overlayConfig.runtimeErrors &&
                     encodeOverlaySettings(overlayConfig.runtimeErrors),
                 }
-              : overlayConfig
+              : overlayConfig,
           );
         }
 
@@ -2677,17 +2485,17 @@ class Server {
         }
 
         this.sendStats([client], this.getStats(this.stats), true);
-      }
+      },
     );
   }
 
   /**
    * @private
    * @param {string} defaultOpenTarget
-   * @returns {void}
+   * @returns {Promise<void>}
    */
-  openBrowser(defaultOpenTarget) {
-    const open = require("open");
+  async openBrowser(defaultOpenTarget) {
+    const open = (await import("open")).default;
 
     Promise.all(
       /** @type {NormalizedOpen[]} */
@@ -2722,10 +2530,10 @@ class Server {
                       : ""
                   }`
                 : ""
-            }. If you are running in a headless environment, please do not use the "open" option or related flags like "--open", "--open-target", and "--open-app".`
+            }. If you are running in a headless environment, please do not use the "open" option or related flags like "--open", "--open-target", and "--open-app-name".`,
           );
         });
-      })
+      }),
     );
   }
 
@@ -2772,9 +2580,9 @@ class Server {
 
   /**
    * @private
-   * @returns {void}
+   * @returns {Promise<void>}
    */
-  logStatus() {
+  async logStatus() {
     const { isColorSupported, cyan, red } = require("colorette");
 
     /**
@@ -2835,7 +2643,7 @@ class Server {
         `Project is running at: "${
           /** @type {import("http").Server} */
           (this.server).address()
-        }"`
+        }"`,
       );
     } else {
       const protocol =
@@ -2884,13 +2692,13 @@ class Server {
       if (parsedIP.range() === "unspecified") {
         localhost = prettyPrintURL("localhost");
 
-        const networkIPv4 = Server.internalIPSync("v4");
+        const networkIPv4 = await Server.internalIP("v4");
 
         if (networkIPv4) {
           networkUrlIPv4 = prettyPrintURL(networkIPv4);
         }
 
-        const networkIPv6 = Server.internalIPSync("v6");
+        const networkIPv6 = await Server.internalIP("v6");
 
         if (networkIPv6) {
           networkUrlIPv6 = prettyPrintURL(networkIPv6);
@@ -2908,7 +2716,7 @@ class Server {
           (parsedIP).isIPv4MappedAddress()
             ? prettyPrintURL(
                 /** @type {IPv6} */
-                (parsedIP).toIPv4Address().toString()
+                (parsedIP).toIPv4Address().toString(),
               )
             : prettyPrintURL(address);
 
@@ -2943,24 +2751,26 @@ class Server {
 
       if (networkUrlIPv4) {
         this.logger.info(
-          `On Your Network (IPv4): ${colors.info(useColor, networkUrlIPv4)}`
+          `On Your Network (IPv4): ${colors.info(useColor, networkUrlIPv4)}`,
         );
       }
 
       if (networkUrlIPv6) {
         this.logger.info(
-          `On Your Network (IPv6): ${colors.info(useColor, networkUrlIPv6)}`
+          `On Your Network (IPv6): ${colors.info(useColor, networkUrlIPv6)}`,
         );
       }
 
       if (/** @type {NormalizedOpen[]} */ (this.options.open).length > 0) {
         const openTarget = prettyPrintURL(
-          !this.options.host || this.options.host === "0.0.0.0"
+          !this.options.host ||
+            this.options.host === "0.0.0.0" ||
+            this.options.host === "::"
             ? "localhost"
-            : this.options.host
+            : this.options.host,
         );
 
-        this.openBrowser(openTarget);
+        await this.openBrowser(openTarget);
       }
     }
 
@@ -2971,8 +2781,8 @@ class Server {
           /** @type {NormalizedStatic[]} */
           (this.options.static)
             .map((staticOption) => staticOption.directory)
-            .join(", ")
-        )}' directory`
+            .join(", "),
+        )}' directory`,
       );
     }
 
@@ -2982,8 +2792,8 @@ class Server {
           useColor,
           /** @type {ConnectHistoryApiFallbackOptions} */ (
             this.options.historyApiFallback
-          ).index || "/index.html"
-        )}'`
+          ).index || "/index.html",
+        )}'`,
       );
     }
 
@@ -2997,7 +2807,7 @@ class Server {
           : "https";
 
       this.logger.info(
-        `Broadcasting "${bonjourProtocol}" with subtype of "webpack" via ZeroConf DNS (Bonjour)`
+        `Broadcasting "${bonjourProtocol}" with subtype of "webpack" via ZeroConf DNS (Bonjour)`,
       );
     }
   }
@@ -3016,8 +2826,8 @@ class Server {
         headers = headers(
           req,
           res,
-          /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
-          (this.middleware).context
+          /** @type {import("webpack-dev-middleware").API<IncomingMessage, ServerResponse>}*/
+          (this.middleware).context,
         );
       }
 
@@ -3042,7 +2852,7 @@ class Server {
          */
         (header) => {
           res.setHeader(header.key, header.value);
-        }
+        },
       );
     }
 
@@ -3079,7 +2889,7 @@ class Server {
       // if hostHeader doesn't have scheme, add // for parsing.
       /^(.+:)?\/\//.test(hostHeader) ? hostHeader : `//${hostHeader}`,
       false,
-      true
+      true,
     ).hostname;
 
     // always allow requests with explicit IPv4 or IPv6-address.
@@ -3164,51 +2974,6 @@ class Server {
     }
   }
 
-  /**
-   * @private
-   * @param {Request} req
-   * @param {Response} res
-   * @param {NextFunction} next
-   * @returns {void}
-   */
-  serveMagicHtml(req, res, next) {
-    if (req.method !== "GET" && req.method !== "HEAD") {
-      return next();
-    }
-
-    /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
-    (this.middleware).waitUntilValid(() => {
-      const _path = req.path;
-
-      try {
-        const filename =
-          /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
-          (this.middleware).getFilenameFromUrl(`${_path}.js`);
-        const isFile =
-          /** @type {Compiler["outputFileSystem"] & { statSync: import("fs").StatSyncFn }}*/
-          (
-            /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
-            (this.middleware).context.outputFileSystem
-          )
-            .statSync(/** @type {import("fs").PathLike} */ (filename))
-            .isFile();
-
-        if (!isFile) {
-          return next();
-        }
-
-        // Serve a page that executes the javascript
-        // @ts-ignore
-        const queries = req._parsedUrl.search || "";
-        const responsePage = `<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><script type="text/javascript" charset="utf-8" src="${_path}.js${queries}"></script></body></html>`;
-
-        res.send(responsePage);
-      } catch (error) {
-        return next();
-      }
-    });
-  }
-
   // Send stats to a socket or multiple sockets
   /**
    * @private
@@ -3282,7 +3047,7 @@ class Server {
           this.sendMessage(
             this.webSocketServer.clients,
             "static-changed",
-            item
+            item,
           );
         }
       });
@@ -3332,24 +3097,24 @@ class Server {
               }
 
               reject(error);
-            }
+            },
           );
 
           socket.connect(
             { path: /** @type {string} */ (this.options.ipc) },
             () => {
               throw new Error(`IPC "${this.options.ipc}" is already used`);
-            }
+            },
           );
         })
       );
     } else {
       this.options.host = await Server.getHostname(
-        /** @type {Host} */ (this.options.host)
+        /** @type {Host} */ (this.options.host),
       );
       this.options.port = await Server.getFreePort(
         /** @type {Port} */ (this.options.port),
-        this.options.host
+        this.options.host,
       );
     }
 
@@ -3374,7 +3139,7 @@ class Server {
 
       await fs.promises.chmod(
         /** @type {string} */ (this.options.ipc),
-        READ_WRITE
+        READ_WRITE,
       );
     }
 
@@ -3386,7 +3151,7 @@ class Server {
       this.runBonjour();
     }
 
-    this.logStatus();
+    await this.logStatus();
 
     if (typeof this.options.onListening === "function") {
       this.options.onListening(this);
@@ -3497,95 +3262,6 @@ class Server {
       .then(() => callback(), callback)
       .catch(callback);
   }
-
-  // TODO remove in the next major release
-  /**
-   * @param {Port} port
-   * @param {Host} hostname
-   * @param {(err?: Error) => void} fn
-   * @returns {void}
-   */
-  listen(port, hostname, fn) {
-    util.deprecate(
-      () => {},
-      "'listen' is deprecated. Please use the async 'start' or 'startCallback' method.",
-      "DEP_WEBPACK_DEV_SERVER_LISTEN"
-    )();
-
-    if (typeof port === "function") {
-      fn = port;
-    }
-
-    if (
-      typeof port !== "undefined" &&
-      typeof this.options.port !== "undefined" &&
-      port !== this.options.port
-    ) {
-      this.options.port = port;
-
-      this.logger.warn(
-        'The "port" specified in options is different from the port passed as an argument. Will be used from arguments.'
-      );
-    }
-
-    if (!this.options.port) {
-      this.options.port = port;
-    }
-
-    if (
-      typeof hostname !== "undefined" &&
-      typeof this.options.host !== "undefined" &&
-      hostname !== this.options.host
-    ) {
-      this.options.host = hostname;
-
-      this.logger.warn(
-        'The "host" specified in options is different from the host passed as an argument. Will be used from arguments.'
-      );
-    }
-
-    if (!this.options.host) {
-      this.options.host = hostname;
-    }
-
-    this.start()
-      .then(() => {
-        if (fn) {
-          fn.call(this.server);
-        }
-      })
-      .catch((error) => {
-        // Nothing
-        if (fn) {
-          fn.call(this.server, error);
-        }
-      });
-  }
-
-  /**
-   * @param {(err?: Error) => void} [callback]
-   * @returns {void}
-   */
-  // TODO remove in the next major release
-  close(callback) {
-    util.deprecate(
-      () => {},
-      "'close' is deprecated. Please use the async 'stop' or 'stopCallback' method.",
-      "DEP_WEBPACK_DEV_SERVER_CLOSE"
-    )();
-
-    this.stop()
-      .then(() => {
-        if (callback) {
-          callback();
-        }
-      })
-      .catch((error) => {
-        if (callback) {
-          callback(error);
-        }
-      });
-  }
 }
 
 module.exports = Server;