webpack-dev-server 5.0.3 → 5.1.0

package/lib/Server.js

@@ -18,9 +18,6 @@ const schema = require("./options.json");
 /** @typedef {import("webpack").Stats} Stats */
 /** @typedef {import("webpack").MultiStats} MultiStats */
 /** @typedef {import("os").NetworkInterfaceInfo} NetworkInterfaceInfo */
-/** @typedef {import("express").NextFunction} NextFunction */
-/** @typedef {import("express").RequestHandler} ExpressRequestHandler */
-/** @typedef {import("express").ErrorRequestHandler} ExpressErrorRequestHandler */
 /** @typedef {import("chokidar").WatchOptions} WatchOptions */
 /** @typedef {import("chokidar").FSWatcher} FSWatcher */
 /** @typedef {import("connect-history-api-fallback").Options} ConnectHistoryApiFallbackOptions */
@@ -34,14 +31,32 @@ const schema = require("./options.json");
 /** @typedef {import("ipaddr.js").IPv4} IPv4 */
 /** @typedef {import("ipaddr.js").IPv6} IPv6 */
 /** @typedef {import("net").Socket} Socket */
+/** @typedef {import("http").Server} HTTPServer*/
 /** @typedef {import("http").IncomingMessage} IncomingMessage */
 /** @typedef {import("http").ServerResponse} ServerResponse */
 /** @typedef {import("open").Options} OpenOptions */
+/** @typedef {import("express").Application} ExpressApplication */
+/** @typedef {import("express").RequestHandler} ExpressRequestHandler */
+/** @typedef {import("express").ErrorRequestHandler} ExpressErrorRequestHandler */
+/** @typedef {import("express").Request} ExpressRequest */
+/** @typedef {import("express").Response} ExpressResponse */
+
+/** @typedef {(err?: any) => void} NextFunction */
+/** @typedef {(req: IncomingMessage, res: ServerResponse) => void} SimpleHandleFunction */
+/** @typedef {(req: IncomingMessage, res: ServerResponse, next: NextFunction) => void} NextHandleFunction */
+/** @typedef {(err: any, req: IncomingMessage, res: ServerResponse, next: NextFunction) => void} ErrorHandleFunction */
+/** @typedef {SimpleHandleFunction | NextHandleFunction | ErrorHandleFunction} HandleFunction */
 
 /** @typedef {import("https").ServerOptions & { spdy?: { plain?: boolean | undefined, ssl?: boolean | undefined, 'x-forwarded-for'?: string | undefined, protocol?: string | undefined, protocols?: string[] | undefined }}} ServerOptions */
 
-/** @typedef {import("express").Request} Request */
-/** @typedef {import("express").Response} Response */
+/**
+ * @template {BasicApplication} [T=ExpressApplication]
+ * @typedef {T extends ExpressApplication ? ExpressRequest : IncomingMessage} Request
+ */
+/**
+ * @template {BasicApplication} [T=ExpressApplication]
+ * @typedef {T extends ExpressApplication ? ExpressResponse : ServerResponse} Response
+ */
 
 /**
  * @template {Request} T
@@ -88,8 +103,16 @@ const schema = require("./options.json");
  */
 
 /**
+ * @template {BasicApplication} [A=ExpressApplication]
+ * @template {BasicServer} [S=import("http").Server]
+ * @typedef {"http" | "https" | "spdy" | "http2" | string | function(ServerOptions, A): S} ServerType
+ */
+
+/**
+ * @template {BasicApplication} [A=ExpressApplication]
+ * @template {BasicServer} [S=import("http").Server]
  * @typedef {Object} ServerConfiguration
- * @property {"http" | "https" | "spdy" | string} [type]
+ * @property {ServerType<A, S>} [type]
  * @property {ServerOptions} [options]
  */
 
@@ -173,10 +196,23 @@ const schema = require("./options.json");
  */
 
 /**
- * @typedef {{ name?: string, path?: string, middleware: ExpressRequestHandler | ExpressErrorRequestHandler } | ExpressRequestHandler | ExpressErrorRequestHandler} Middleware
+ * @template {BasicApplication} [T=ExpressApplication]
+ * @typedef {T extends ExpressApplication ? ExpressRequestHandler | ExpressErrorRequestHandler : HandleFunction} MiddlewareHandler
  */
 
 /**
+ * @typedef {{ name?: string, path?: string, middleware: MiddlewareHandler }} MiddlewareObject
+ */
+
+/**
+ * @typedef {MiddlewareObject | MiddlewareHandler } Middleware
+ */
+
+/** @typedef {import("net").Server | import("tls").Server} BasicServer */
+
+/**
+ * @template {BasicApplication} [A=ExpressApplication]
+ * @template {BasicServer} [S=import("http").Server]
  * @typedef {Object} Configuration
  * @property {boolean | string} [ipc]
  * @property {Host} [host]
@@ -190,17 +226,16 @@ const schema = require("./options.json");
  * @property {boolean | Record<string, never> | BonjourOptions} [bonjour]
  * @property {string | string[] | WatchFiles | Array<string | WatchFiles>} [watchFiles]
  * @property {boolean | string | Static | Array<string | Static>} [static]
- * @property {boolean | ServerOptions} [https]
- * @property {boolean} [http2]
- * @property {"http" | "https" | "spdy" | string | ServerConfiguration} [server]
+ * @property {ServerType<A, S> | ServerConfiguration<A, S>} [server]
+ * @property {() => Promise<A>} [app]
  * @property {boolean | "sockjs" | "ws" | string | WebSocketServerConfiguration} [webSocketServer]
  * @property {ProxyConfigArray} [proxy]
  * @property {boolean | string | Open | Array<string | Open>} [open]
  * @property {boolean} [setupExitSignals]
  * @property {boolean | ClientConfiguration} [client]
- * @property {Headers | ((req: Request, res: Response, context: DevMiddlewareContext<Request, Response>) => Headers)} [headers]
- * @property {(devServer: Server) => void} [onListening]
- * @property {(middlewares: Middleware[], devServer: Server) => Middleware[]} [setupMiddlewares]
+ * @property {Headers | ((req: Request, res: Response, context: DevMiddlewareContext<Request, Response> | undefined) => Headers)} [headers]
+ * @property {(devServer: Server<A, S>) => void} [onListening]
+ * @property {(middlewares: Middleware[], devServer: Server<A, S>) => Middleware[]} [setupMiddlewares]
  */
 
 if (!process.env.WEBPACK_SERVE) {
@@ -245,10 +280,46 @@ const encodeOverlaySettings = (setting) =>
     ? encodeURIComponent(setting.toString())
     : setting;
 
+// Working for overload, because typescript doesn't support this yes
+/**
+ * @overload
+ * @param {NextHandleFunction} fn
+ * @returns {BasicApplication}
+ */
+/**
+ * @overload
+ * @param {HandleFunction} fn
+ * @returns {BasicApplication}
+ */
+/**
+ * @overload
+ * @param {string} route
+ * @param {NextHandleFunction} fn
+ * @returns {BasicApplication}
+ */
+/**
+ * @param {string} route
+ * @param {HandleFunction} fn
+ * @returns {BasicApplication}
+ */
+// eslint-disable-next-line no-unused-vars
+function useFn(route, fn) {
+  return /** @type {BasicApplication} */ ({});
+}
+
+/**
+ * @typedef {Object} BasicApplication
+ * @property {typeof useFn} use
+ */
+
+/**
+ * @template {BasicApplication} [A=ExpressApplication]
+ * @template {BasicServer} [S=HTTPServer]
+ */
 class Server {
   /**
-   * @param {Configuration | Compiler | MultiCompiler} options
-   * @param {Compiler | MultiCompiler | Configuration} compiler
+   * @param {Configuration<A, S>} options
+   * @param {Compiler | MultiCompiler} compiler
    */
   constructor(options = {}, compiler) {
     validate(/** @type {Schema} */ (schema), options, {
@@ -256,12 +327,12 @@ class Server {
       baseDataPath: "options",
     });
 
-    this.compiler = /** @type {Compiler | MultiCompiler} */ (compiler);
+    this.compiler = compiler;
     /**
      * @type {ReturnType<Compiler["getInfrastructureLogger"]>}
      * */
     this.logger = this.compiler.getInfrastructureLogger("webpack-dev-server");
-    this.options = /** @type {Configuration} */ (options);
+    this.options = options;
     /**
      * @type {FSWatcher[]}
      */
@@ -324,11 +395,59 @@ class Server {
   }
 
   /**
-   * @param {string} gateway
+   * @param {string} gatewayOrFamily or family
+   * @param {boolean} [isInternal] ip should be internal
    * @returns {string | undefined}
    */
-  static findIp(gateway) {
-    const gatewayIp = ipaddr.parse(gateway);
+  static findIp(gatewayOrFamily, isInternal) {
+    if (gatewayOrFamily === "v4" || gatewayOrFamily === "v6") {
+      let host;
+
+      const networks = Object.values(os.networkInterfaces())
+        .flatMap((networks) => networks ?? [])
+        .filter((network) => {
+          if (!network || !network.address) {
+            return false;
+          }
+
+          if (network.family !== `IP${gatewayOrFamily}`) {
+            return false;
+          }
+
+          if (
+            typeof isInternal !== "undefined" &&
+            network.internal !== isInternal
+          ) {
+            return false;
+          }
+
+          if (gatewayOrFamily === "v6") {
+            const range = ipaddr.parse(network.address).range();
+
+            if (
+              range !== "ipv4Mapped" &&
+              range !== "uniqueLocal" &&
+              range !== "loopback"
+            ) {
+              return false;
+            }
+          }
+
+          return network.address;
+        });
+
+      for (const network of networks) {
+        host = network.address;
+
+        if (host.includes(":")) {
+          host = `[${host}]`;
+        }
+      }
+
+      return host;
+    }
+
+    const gatewayIp = ipaddr.parse(gatewayOrFamily);
 
     // Look for the matching interface in all local interfaces.
     for (const addresses of Object.values(os.networkInterfaces())) {
@@ -348,32 +467,22 @@ class Server {
     }
   }
 
+  // TODO remove me in the next major release, we have `findIp`
   /**
    * @param {"v4" | "v6"} family
    * @returns {Promise<string | undefined>}
    */
   static async internalIP(family) {
-    try {
-      const { gateway } = await require("default-gateway")[family]();
-
-      return Server.findIp(gateway);
-    } catch {
-      // ignore
-    }
+    return Server.findIp(family, false);
   }
 
+  // TODO remove me in the next major release, we have `findIp`
   /**
    * @param {"v4" | "v6"} family
    * @returns {string | undefined}
    */
   static internalIPSync(family) {
-    try {
-      const { gateway } = require("default-gateway")[family].sync();
-
-      return Server.findIp(gateway);
-    } catch {
-      // ignore
-    }
+    return Server.findIp(family, false);
   }
 
   /**
@@ -383,14 +492,12 @@ class Server {
   static async getHostname(hostname) {
     if (hostname === "local-ip") {
       return (
-        (await Server.internalIP("v4")) ||
-        (await Server.internalIP("v6")) ||
-        "0.0.0.0"
+        Server.findIp("v4", false) || Server.findIp("v6", false) || "0.0.0.0"
       );
     } else if (hostname === "local-ipv4") {
-      return (await Server.internalIP("v4")) || "0.0.0.0";
+      return Server.findIp("v4", false) || "0.0.0.0";
     } else if (hostname === "local-ipv6") {
-      return (await Server.internalIP("v6")) || "::";
+      return Server.findIp("v6", false) || "::";
     }
 
     return hostname;
@@ -470,7 +577,11 @@ class Server {
    * @returns bool
    */
   static isWebTarget(compiler) {
-    // TODO improve for the next major version - we should store `web` and other targets in `compiler.options.environment`
+    if (compiler.platform && compiler.platform.web) {
+      return compiler.platform.web;
+    }
+
+    // TODO improve for the next major version and keep only `webTargets` to fallback for old versions
     if (
       compiler.options.externalsPresets &&
       compiler.options.externalsPresets.web
@@ -490,6 +601,7 @@ class Server {
       "webworker",
       "electron-preload",
       "electron-renderer",
+      "nwjs",
       "node-webkit",
       // eslint-disable-next-line no-undefined
       undefined,
@@ -537,9 +649,7 @@ class Server {
         if (typeof webSocketURL.protocol !== "undefined") {
           protocol = webSocketURL.protocol;
         } else {
-          protocol =
-            /** @type {ServerConfiguration} */
-            (this.options.server).type === "http" ? "ws:" : "wss:";
+          protocol = this.isTlsServer ? "wss:" : "ws:";
         }
 
         searchParams.set("protocol", protocol);
@@ -1007,39 +1117,41 @@ class Server {
         ? options.hot
         : true;
 
-    options.server = {
-      type:
-        // eslint-disable-next-line no-nested-ternary
-        typeof options.server === "string"
-          ? options.server
-          : typeof (options.server || {}).type === "string"
-            ? /** @type {ServerConfiguration} */ (options.server).type || "http"
-            : "http",
-      options: {
-        .../** @type {ServerOptions} */ (options.https),
-        .../** @type {ServerConfiguration} */ (options.server || {}).options,
-      },
-    };
+    if (
+      typeof options.server === "function" ||
+      typeof options.server === "string"
+    ) {
+      options.server = {
+        type: options.server,
+        options: {},
+      };
+    } else {
+      const serverOptions =
+        /** @type {ServerConfiguration<A, S>} */
+        (options.server || {});
+
+      options.server = {
+        type: serverOptions.type || "http",
+        options: { ...serverOptions.options },
+      };
+    }
+
+    const serverOptions = /** @type {ServerOptions} */ (options.server.options);
 
     if (
       options.server.type === "spdy" &&
-      typeof (/** @type {ServerOptions} */ (options.server.options).spdy) ===
-        "undefined"
+      typeof serverOptions.spdy === "undefined"
     ) {
-      /** @type {ServerOptions} */
-      (options.server.options).spdy = {
-        protocols: ["h2", "http/1.1"],
-      };
+      serverOptions.spdy = { protocols: ["h2", "http/1.1"] };
     }
 
-    if (options.server.type === "https" || options.server.type === "spdy") {
-      if (
-        typeof (
-          /** @type {ServerOptions} */ (options.server.options).requestCert
-        ) === "undefined"
-      ) {
-        /** @type {ServerOptions} */
-        (options.server.options).requestCert = false;
+    if (
+      options.server.type === "https" ||
+      options.server.type === "http2" ||
+      options.server.type === "spdy"
+    ) {
+      if (typeof serverOptions.requestCert === "undefined") {
+        serverOptions.requestCert = false;
       }
 
       const httpsProperties =
@@ -1047,19 +1159,13 @@ class Server {
         (["ca", "cert", "crl", "key", "pfx"]);
 
       for (const property of httpsProperties) {
-        if (
-          typeof (
-            /** @type {ServerOptions} */ (options.server.options)[property]
-          ) === "undefined"
-        ) {
+        if (typeof serverOptions[property] === "undefined") {
           // eslint-disable-next-line no-continue
           continue;
         }
 
         /** @type {any} */
-        const value =
-          /** @type {ServerOptions} */
-          (options.server.options)[property];
+        const value = serverOptions[property];
         /**
          * @param {string | Buffer | undefined} item
          * @returns {string | Buffer | undefined}
@@ -1087,17 +1193,14 @@ class Server {
         };
 
         /** @type {any} */
-        (options.server.options)[property] = Array.isArray(value)
+        (serverOptions)[property] = Array.isArray(value)
           ? value.map((item) => readFile(item))
           : readFile(value);
       }
 
       let fakeCert;
 
-      if (
-        !(/** @type {ServerOptions} */ (options.server.options).key) ||
-        !(/** @type {ServerOptions} */ (options.server.options).cert)
-      ) {
+      if (!serverOptions.key || !serverOptions.cert) {
         const certificateDir = Server.findCacheDir();
         const certificatePath = path.join(certificateDir, "server.pem");
         let certificateExists;
@@ -1116,13 +1219,11 @@ class Server {
 
           // cert is more than 30 days old, kill it with fire
           if ((now - Number(certificateStat.ctime)) / certificateTtl > 30) {
-            const { rimraf } = require("rimraf");
-
             this.logger.info(
               "SSL certificate is more than 30 days old. Removing...",
             );
 
-            await rimraf(certificatePath);
+            await fs.promises.rm(certificatePath, { recursive: true });
 
             certificateExists = false;
           }
@@ -1131,7 +1232,6 @@ class Server {
         if (!certificateExists) {
           this.logger.info("Generating SSL certificate...");
 
-          // @ts-ignore
           const selfsigned = require("selfsigned");
           const attributes = [{ name: "commonName", value: "localhost" }];
           const pems = selfsigned.generate(attributes, {
@@ -1212,14 +1312,8 @@ class Server {
         this.logger.info(`SSL certificate: ${certificatePath}`);
       }
 
-      /** @type {ServerOptions} */
-      (options.server.options).key =
-        /** @type {ServerOptions} */
-        (options.server.options).key || fakeCert;
-      /** @type {ServerOptions} */
-      (options.server.options).cert =
-        /** @type {ServerOptions} */
-        (options.server.options).cert || fakeCert;
+      serverOptions.key = serverOptions.key || fakeCert;
+      serverOptions.cert = serverOptions.cert || fakeCert;
     }
 
     if (typeof options.ipc === "boolean") {
@@ -1281,15 +1375,15 @@ class Server {
        */
       const result = [];
 
-      options.open.forEach((item) => {
+      for (const item of options.open) {
         if (typeof item === "string") {
           result.push({ target: item, options: defaultOpenOptions });
-
-          return;
+          // eslint-disable-next-line no-continue
+          continue;
         }
 
         result.push(...getOpenItemsFromObject(item));
-      });
+      }
 
       /** @type {NormalizedOpen[]} */
       (options.open) = result;
@@ -1522,8 +1616,9 @@ class Server {
   }
 
   /**
+   * @template T
    * @private
-   * @returns {string}
+   * @returns {T}
    */
   getServerTransport() {
     let implementation;
@@ -1553,9 +1648,8 @@ class Server {
           try {
             // eslint-disable-next-line import/no-dynamic-require
             implementation = require(
-              /** @type {WebSocketServerConfiguration} */ (
-                this.options.webSocketServer
-              ).type,
+              /** @type {WebSocketServerConfiguration} */
+              (this.options.webSocketServer).type,
             );
           } catch (error) {
             implementationFound = false;
@@ -1563,9 +1657,9 @@ class Server {
         }
         break;
       case "function":
-        implementation = /** @type {WebSocketServerConfiguration} */ (
-          this.options.webSocketServer
-        ).type;
+        implementation =
+          /** @type {WebSocketServerConfiguration} */
+          (this.options.webSocketServer).type;
         break;
       default:
         implementationFound = false;
@@ -1631,12 +1725,22 @@ class Server {
    * @returns {Promise<void>}
    */
   async initialize() {
+    this.setupHooks();
+
+    await this.setupApp();
+    await this.createServer();
+
     if (this.options.webSocketServer) {
       const compilers =
         /** @type {MultiCompiler} */
         (this.compiler).compilers || [this.compiler];
 
-      compilers.forEach((compiler) => {
+      for (const compiler of compilers) {
+        if (compiler.options.devServer === false) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
         this.addAdditionalEntries(compiler);
 
         const webpack = compiler.webpack || require("webpack");
@@ -1661,7 +1765,7 @@ class Server {
             plugin.apply(compiler);
           }
         }
-      });
+      }
 
       if (
         this.options.client &&
@@ -1671,16 +1775,9 @@ class Server {
       }
     }
 
-    this.setupHooks();
-    this.setupApp();
-    this.setupHostHeaderCheck();
-    this.setupDevMiddleware();
-    // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
-    this.setupBuiltInRoutes();
     this.setupWatchFiles();
     this.setupWatchStaticFiles();
     this.setupMiddlewares();
-    this.createServer();
 
     if (this.options.setupExitSignals) {
       const signals = ["SIGINT", "SIGTERM"];
@@ -1718,24 +1815,30 @@ class Server {
 
     // Proxy WebSocket without the initial http request
     // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
-    /** @type {RequestHandler[]} */
-    (this.webSocketProxies).forEach((webSocketProxy) => {
-      /** @type {import("http").Server} */
+    const webSocketProxies =
+      /** @type {RequestHandler[]} */
+      (this.webSocketProxies);
+
+    for (const webSocketProxy of webSocketProxies) {
+      /** @type {S} */
       (this.server).on(
         "upgrade",
         /** @type {RequestHandler & { upgrade: NonNullable<RequestHandler["upgrade"]> }} */
         (webSocketProxy).upgrade,
       );
-    }, this);
+    }
   }
 
   /**
    * @private
-   * @returns {void}
+   * @returns {Promise<void>}
    */
-  setupApp() {
-    /** @type {import("express").Application | undefined}*/
-    this.app = new /** @type {any} */ (getExpress())();
+  async setupApp() {
+    /** @type {A | undefined}*/
+    this.app =
+      typeof this.options.app === "function"
+        ? await this.options.app()
+        : getExpress()();
   }
 
   /**
@@ -1789,204 +1892,297 @@ class Server {
    * @private
    * @returns {void}
    */
-  setupHostHeaderCheck() {
-    /** @type {import("express").Application} */
-    (this.app).all(
-      "*",
-      /**
-       * @param {Request} req
-       * @param {Response} res
-       * @param {NextFunction} next
-       * @returns {void}
-       */
-      (req, res, next) => {
-        if (
-          this.checkHeader(
-            /** @type {{ [key: string]: string | undefined }} */
-            (req.headers),
-            "host",
-          )
-        ) {
-          return next();
-        }
+  setupWatchStaticFiles() {
+    const watchFiles = /** @type {NormalizedStatic[]} */ (this.options.static);
 
-        res.send("Invalid Host header");
-      },
-    );
+    if (watchFiles.length > 0) {
+      for (const item of watchFiles) {
+        if (item.watch) {
+          this.watchFiles(item.directory, item.watch);
+        }
+      }
+    }
   }
 
   /**
    * @private
    * @returns {void}
    */
-  setupDevMiddleware() {
-    const webpackDevMiddleware = require("webpack-dev-middleware");
+  setupWatchFiles() {
+    const watchFiles = /** @type {WatchFiles[]} */ (this.options.watchFiles);
 
-    // middleware for serving webpack bundle
-    this.middleware = webpackDevMiddleware(
-      this.compiler,
-      this.options.devMiddleware,
-    );
+    if (watchFiles.length > 0) {
+      for (const item of watchFiles) {
+        this.watchFiles(item.paths, item.options);
+      }
+    }
   }
 
   /**
    * @private
    * @returns {void}
    */
-  setupBuiltInRoutes() {
-    const { app, middleware } = this;
+  setupMiddlewares() {
+    /**
+     * @type {Array<Middleware>}
+     */
+    let middlewares = [];
 
-    /** @type {import("express").Application} */
-    (app).get("/__webpack_dev_server__/sockjs.bundle.js", (req, res) => {
-      res.setHeader("Content-Type", "application/javascript");
+    // Register setup host header check for security
+    middlewares.push({
+      name: "host-header-check",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @param {NextFunction} next
+       * @returns {void}
+       */
+      middleware: (req, res, next) => {
+        const headers =
+          /** @type {{ [key: string]: string | undefined }} */
+          (req.headers);
+        const headerName = headers[":authority"] ? ":authority" : "host";
 
-      const clientPath = path.join(__dirname, "..", "client");
+        if (this.checkHeader(headers, headerName)) {
+          next();
+          return;
+        }
 
-      res.sendFile(path.join(clientPath, "modules/sockjs-client/index.js"));
+        res.statusCode = 403;
+        res.end("Invalid Host header");
+      },
     });
 
-    /** @type {import("express").Application} */
-    (app).get("/webpack-dev-server/invalidate", (_req, res) => {
-      this.invalidate();
+    const isHTTP2 =
+      /** @type {ServerConfiguration<A, S>} */ (this.options.server).type ===
+      "http2";
 
-      res.end();
-    });
+    if (isHTTP2) {
+      // TODO patch for https://github.com/pillarjs/finalhandler/pull/45, need remove then will be resolved
+      middlewares.push({
+        name: "http2-status-message-patch",
+        middleware:
+          /** @type {NextHandleFunction} */
+          (_req, res, next) => {
+            Object.defineProperty(res, "statusMessage", {
+              get() {
+                return "";
+              },
+              set() {},
+            });
 
-    /** @type {import("express").Application} */
-    (app).get("/webpack-dev-server/open-editor", (req, res) => {
-      const fileName = req.query.fileName;
+            next();
+          },
+      });
+    }
 
-      if (typeof fileName === "string") {
-        // @ts-ignore
-        const launchEditor = require("launch-editor");
-        launchEditor(fileName);
-      }
+    // compress is placed last and uses unshift so that it will be the first middleware used
+    if (this.options.compress && !isHTTP2) {
+      const compression = require("compression");
+
+      middlewares.push({ name: "compression", middleware: compression() });
+    }
+
+    if (typeof this.options.headers !== "undefined") {
+      middlewares.push({
+        name: "set-headers",
+        middleware: this.setHeaders.bind(this),
+      });
+    }
 
-      res.end();
+    middlewares.push({
+      name: "webpack-dev-middleware",
+      middleware: /** @type {MiddlewareHandler} */ (this.middleware),
     });
 
-    /** @type {import("express").Application} */
-    (app).get("/webpack-dev-server", (req, res) => {
-      /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
-      (middleware).waitUntilValid((stats) => {
-        res.setHeader("Content-Type", "text/html");
-        // HEAD requests should not return body content
+    // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
+    middlewares.push({
+      name: "webpack-dev-server-sockjs-bundle",
+      path: "/__webpack_dev_server__/sockjs.bundle.js",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @param {NextFunction} next
+       * @returns {void}
+       */
+      middleware: (req, res, next) => {
+        if (req.method !== "GET" && req.method !== "HEAD") {
+          next();
+          return;
+        }
+
+        const clientPath = path.join(
+          __dirname,
+          "..",
+          "client/modules/sockjs-client/index.js",
+        );
+
+        // Express send Etag and other headers by default, so let's keep them for compatibility reasons
+        if (typeof res.sendFile === "function") {
+          res.sendFile(clientPath);
+          return;
+        }
+
+        let stats;
+
+        try {
+          // TODO implement `inputFileSystem.createReadStream` in webpack
+          stats = fs.statSync(clientPath);
+        } catch (err) {
+          next();
+          return;
+        }
+
+        res.setHeader("Content-Type", "application/javascript; charset=UTF-8");
+        res.setHeader("Content-Length", stats.size);
+
         if (req.method === "HEAD") {
           res.end();
           return;
         }
-        res.write(
-          '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>',
-        );
 
-        const statsForPrint =
-          typeof (/** @type {MultiStats} */ (stats).stats) !== "undefined"
-            ? /** @type {MultiStats} */ (stats).toJson().children
-            : [/** @type {Stats} */ (stats).toJson()];
+        fs.createReadStream(clientPath).pipe(res);
+      },
+    });
 
-        res.write(`<h1>Assets Report:</h1>`);
+    middlewares.push({
+      name: "webpack-dev-server-invalidate",
+      path: "/webpack-dev-server/invalidate",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @param {NextFunction} next
+       * @returns {void}
+       */
+      middleware: (req, res, next) => {
+        if (req.method !== "GET" && req.method !== "HEAD") {
+          next();
+          return;
+        }
 
-        /**
-         * @type {StatsCompilation[]}
-         */
-        (statsForPrint).forEach((item, index) => {
-          res.write("<div>");
+        this.invalidate();
 
-          const name =
-            // eslint-disable-next-line no-nested-ternary
-            typeof item.name !== "undefined"
-              ? item.name
-              : /** @type {MultiStats} */ (stats).stats
-                ? `unnamed[${index}]`
-                : "unnamed";
+        res.end();
+      },
+    });
 
-          res.write(`<h2>Compilation: ${name}</h2>`);
-          res.write("<ul>");
+    middlewares.push({
+      name: "webpack-dev-server-open-editor",
+      path: "/webpack-dev-server/open-editor",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @param {NextFunction} next
+       * @returns {void}
+       */
+      middleware: (req, res, next) => {
+        if (req.method !== "GET" && req.method !== "HEAD") {
+          next();
+          return;
+        }
 
-          const publicPath = item.publicPath === "auto" ? "" : item.publicPath;
+        if (!req.url) {
+          next();
+          return;
+        }
 
-          for (const asset of /** @type {NonNullable<StatsCompilation["assets"]>} */ (
-            item.assets
-          )) {
-            const assetName = asset.name;
-            const assetURL = `${publicPath}${assetName}`;
+        const resolveUrl = new URL(req.url, `http://${req.headers.host}`);
+        const params = new URLSearchParams(resolveUrl.search);
+        const fileName = params.get("fileName");
 
-            res.write(
-              `<li>
-              <strong><a href="${assetURL}" target="_blank">${assetName}</a></strong>
-            </li>`,
-            );
-          }
+        if (typeof fileName === "string") {
+          // @ts-ignore
+          const launchEditor = require("launch-editor");
 
-          res.write("</ul>");
-          res.write("</div>");
-        });
+          launchEditor(fileName);
+        }
 
-        res.end("</body></html>");
-      });
+        res.end();
+      },
     });
-  }
 
-  /**
-   * @private
-   * @returns {void}
-   */
-  setupWatchStaticFiles() {
-    if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
-      /** @type {NormalizedStatic[]} */
-      (this.options.static).forEach((staticOption) => {
-        if (staticOption.watch) {
-          this.watchFiles(staticOption.directory, staticOption.watch);
+    middlewares.push({
+      name: "webpack-dev-server-assets",
+      path: "/webpack-dev-server",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @param {NextFunction} next
+       * @returns {void}
+       */
+      middleware: (req, res, next) => {
+        if (req.method !== "GET" && req.method !== "HEAD") {
+          next();
+          return;
         }
-      });
-    }
-  }
 
-  /**
-   * @private
-   * @returns {void}
-   */
-  setupWatchFiles() {
-    const { watchFiles } = this.options;
+        if (!this.middleware) {
+          next();
+          return;
+        }
 
-    if (/** @type {WatchFiles[]} */ (watchFiles).length > 0) {
-      /** @type {WatchFiles[]} */
-      (watchFiles).forEach((item) => {
-        this.watchFiles(item.paths, item.options);
-      });
-    }
-  }
+        this.middleware.waitUntilValid((stats) => {
+          res.setHeader("Content-Type", "text/html; charset=utf-8");
 
-  /**
-   * @private
-   * @returns {void}
-   */
-  setupMiddlewares() {
-    /**
-     * @type {Array<Middleware>}
-     */
-    let middlewares = [];
+          // HEAD requests should not return body content
+          if (req.method === "HEAD") {
+            res.end();
+            return;
+          }
 
-    // compress is placed last and uses unshift so that it will be the first middleware used
-    if (this.options.compress) {
-      const compression = require("compression");
+          res.write(
+            '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>',
+          );
 
-      middlewares.push({ name: "compression", middleware: compression() });
-    }
+          /**
+           * @type {StatsCompilation[]}
+           */
+          const statsForPrint =
+            typeof (/** @type {MultiStats} */ (stats).stats) !== "undefined"
+              ? /** @type {NonNullable<StatsCompilation["children"]>} */
+                (/** @type {MultiStats} */ (stats).toJson().children)
+              : [/** @type {Stats} */ (stats).toJson()];
+
+          res.write(`<h1>Assets Report:</h1>`);
+
+          for (const [index, item] of statsForPrint.entries()) {
+            res.write("<div>");
+
+            const name =
+              // eslint-disable-next-line no-nested-ternary
+              typeof item.name !== "undefined"
+                ? item.name
+                : /** @type {MultiStats} */ (stats).stats
+                  ? `unnamed[${index}]`
+                  : "unnamed";
+
+            res.write(`<h2>Compilation: ${name}</h2>`);
+            res.write("<ul>");
+
+            const publicPath =
+              item.publicPath === "auto" ? "" : item.publicPath;
+            const assets =
+              /** @type {NonNullable<StatsCompilation["assets"]>} */
+              (item.assets);
+
+            for (const asset of assets) {
+              const assetName = asset.name;
+              const assetURL = `${publicPath}${assetName}`;
+
+              res.write(
+                `<li>
+              <strong><a href="${assetURL}" target="_blank">${assetName}</a></strong>
+            </li>`,
+              );
+            }
 
-    if (typeof this.options.headers !== "undefined") {
-      middlewares.push({
-        name: "set-headers",
-        path: "*",
-        middleware: this.setHeaders.bind(this),
-      });
-    }
+            res.write("</ul>");
+            res.write("</div>");
+          }
 
-    middlewares.push({
-      name: "webpack-dev-middleware",
-      middleware:
-        /** @type {import("webpack-dev-middleware").Middleware<Request, Response>}*/
-        (this.middleware),
+          res.end("</body></html>");
+        });
+      },
     });
 
     if (this.options.proxy) {
@@ -2106,8 +2302,8 @@ class Server {
 
           if (typeof bypassUrl === "boolean") {
             // skip the proxy
-            // @ts-ignore
-            req.url = null;
+            res.statusCode = 404;
+            req.url = "";
             next();
           } else if (typeof bypassUrl === "string") {
             // byPass to that url
@@ -2124,6 +2320,7 @@ class Server {
           name: "http-proxy-middleware",
           middleware: handler,
         });
+
         // Also forward error requests to the proxy so it can handle them.
         middlewares.push({
           name: "http-proxy-middleware-error-handler",
@@ -2141,16 +2338,17 @@ class Server {
 
       middlewares.push({
         name: "webpack-dev-middleware",
-        middleware:
-          /** @type {import("webpack-dev-middleware").Middleware<Request, Response>}*/
-          (this.middleware),
+        middleware: /** @type {MiddlewareHandler} */ (this.middleware),
       });
     }
 
-    if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
+    const staticOptions =
       /** @type {NormalizedStatic[]} */
-      (this.options.static).forEach((staticOption) => {
-        staticOption.publicPath.forEach((publicPath) => {
+      (this.options.static);
+
+    if (staticOptions.length > 0) {
+      for (const staticOption of staticOptions) {
+        for (const publicPath of staticOption.publicPath) {
           middlewares.push({
             name: "express-static",
             path: publicPath,
@@ -2159,8 +2357,8 @@ class Server {
               staticOption.staticOptions,
             ),
           });
-        });
-      });
+        }
+      }
     }
 
     if (this.options.historyApiFallback) {
@@ -2197,15 +2395,12 @@ class Server {
       // it is able to handle '/index.html' request after redirect
       middlewares.push({
         name: "webpack-dev-middleware",
-        middleware:
-          /** @type {import("webpack-dev-middleware").Middleware<Request, Response>}*/
-          (this.middleware),
+        middleware: /** @type {MiddlewareHandler} */ (this.middleware),
       });
 
-      if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
-        /** @type {NormalizedStatic[]} */
-        (this.options.static).forEach((staticOption) => {
-          staticOption.publicPath.forEach((publicPath) => {
+      if (staticOptions.length > 0) {
+        for (const staticOption of staticOptions) {
+          for (const publicPath of staticOption.publicPath) {
             middlewares.push({
               name: "express-static",
               path: publicPath,
@@ -2214,17 +2409,16 @@ class Server {
                 staticOption.staticOptions,
               ),
             });
-          });
-        });
+          }
+        }
       }
     }
 
-    if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
+    if (staticOptions.length > 0) {
       const serveIndex = require("serve-index");
 
-      /** @type {NormalizedStatic[]} */
-      (this.options.static).forEach((staticOption) => {
-        staticOption.publicPath.forEach((publicPath) => {
+      for (const staticOption of staticOptions) {
+        for (const publicPath of staticOption.publicPath) {
           if (staticOption.serveIndex) {
             middlewares.push({
               name: "serve-index",
@@ -2249,15 +2443,14 @@ class Server {
               },
             });
           }
-        });
-      });
+        }
+      }
     }
 
     // Register this middleware always as the last one so that it's only used as a
     // fallback when no other middleware responses.
     middlewares.push({
       name: "options-middleware",
-      path: "*",
       /**
        * @param {Request} req
        * @param {Response} res
@@ -2279,37 +2472,93 @@ class Server {
       middlewares = this.options.setupMiddlewares(middlewares, this);
     }
 
-    middlewares.forEach((middleware) => {
+    // Lazy init webpack dev middleware
+    const lazyInitDevMiddleware = () => {
+      if (!this.middleware) {
+        const webpackDevMiddleware = require("webpack-dev-middleware");
+
+        // middleware for serving webpack bundle
+        /** @type {import("webpack-dev-middleware").API<Request, Response>} */
+        this.middleware = webpackDevMiddleware(
+          this.compiler,
+          this.options.devMiddleware,
+        );
+      }
+
+      return this.middleware;
+    };
+
+    for (const i of middlewares) {
+      if (i.name === "webpack-dev-middleware") {
+        const item = /** @type {MiddlewareObject} */ (i);
+
+        if (typeof item.middleware === "undefined") {
+          item.middleware = lazyInitDevMiddleware();
+        }
+      }
+    }
+
+    for (const middleware of middlewares) {
       if (typeof middleware === "function") {
-        /** @type {import("express").Application} */
-        (this.app).use(middleware);
+        /** @type {A} */
+        (this.app).use(
+          /** @type {NextHandleFunction | HandleFunction} */
+          (middleware),
+        );
       } else if (typeof middleware.path !== "undefined") {
-        /** @type {import("express").Application} */
-        (this.app).use(middleware.path, middleware.middleware);
+        /** @type {A} */
+        (this.app).use(
+          middleware.path,
+          /** @type {SimpleHandleFunction | NextHandleFunction} */
+          (middleware.middleware),
+        );
       } else {
-        /** @type {import("express").Application} */
-        (this.app).use(middleware.middleware);
+        /** @type {A} */
+        (this.app).use(
+          /** @type {NextHandleFunction | HandleFunction} */
+          (middleware.middleware),
+        );
       }
-    });
+    }
   }
 
   /**
    * @private
-   * @returns {void}
+   * @returns {Promise<void>}
    */
-  createServer() {
-    const { type, options } = /** @type {ServerConfiguration} */ (
-      this.options.server
-    );
+  async createServer() {
+    const { type, options } =
+      /** @type {ServerConfiguration<A, S>} */
+      (this.options.server);
+
+    if (typeof type === "function") {
+      /** @type {S | undefined}*/
+      this.server = await type(
+        /** @type {ServerOptions} */
+        (options),
+        /** @type {A} */
+        (this.app),
+      );
+    } else {
+      // eslint-disable-next-line import/no-dynamic-require
+      const serverType = require(/** @type {string} */ (type));
 
-    /** @type {import("http").Server | undefined | null} */
-    // eslint-disable-next-line import/no-dynamic-require
-    this.server = require(/** @type {string} */ (type)).createServer(
-      options,
-      this.app,
-    );
+      /** @type {S | undefined}*/
+      this.server =
+        type === "http2"
+          ? serverType.createSecureServer(
+              { ...options, allowHTTP1: true },
+              this.app,
+            )
+          : serverType.createServer(options, this.app);
+    }
+
+    this.isTlsServer =
+      typeof (
+        /** @type {import("tls").Server} */ (this.server).setSecureContext
+      ) !== "undefined";
 
-    /** @type {import("http").Server} */
+    /** @type {S} */
     (this.server).on(
       "connection",
       /**
@@ -2326,7 +2575,7 @@ class Server {
       },
     );
 
-    /** @type {import("http").Server} */
+    /** @type {S} */
     (this.server).on(
       "error",
       /**
@@ -2344,9 +2593,8 @@ class Server {
    */
   createWebSocketServer() {
     /** @type {WebSocketServerImplementation | undefined | null} */
-    this.webSocketServer = new /** @type {any} */ (this.getServerTransport())(
-      this,
-    );
+    this.webSocketServer = new (this.getServerTransport())(this);
+
     /** @type {WebSocketServerImplementation} */
     (this.webSocketServer).implementation.on(
       "connection",
@@ -2513,22 +2761,19 @@ class Server {
    */
   runBonjour() {
     const { Bonjour } = require("bonjour-service");
+    const type = this.isTlsServer ? "https" : "http";
+
     /**
      * @private
      * @type {Bonjour | undefined}
      */
     this.bonjour = new Bonjour();
     this.bonjour.publish({
-      // @ts-expect-error
       name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
-      // @ts-expect-error
       port: /** @type {number} */ (this.options.port),
-      // @ts-expect-error
-      type:
-        /** @type {ServerConfiguration} */
-        (this.options.server).type === "http" ? "http" : "https",
+      type,
       subtypes: ["webpack"],
-      .../** @type {BonjourOptions} */ (this.options.bonjour),
+      .../** @type {Partial<BonjourOptions>} */ (this.options.bonjour),
     });
   }
 
@@ -2608,23 +2853,15 @@ class Server {
     };
     const useColor = getColorsOption(this.getCompilerOptions());
 
+    const server = /** @type {S} */ (this.server);
+
     if (this.options.ipc) {
-      this.logger.info(
-        `Project is running at: "${
-          /** @type {import("http").Server} */
-          (this.server).address()
-        }"`,
-      );
+      this.logger.info(`Project is running at: "${server.address()}"`);
     } else {
-      const protocol =
-        /** @type {ServerConfiguration} */
-        (this.options.server).type === "http" ? "http" : "https";
+      const protocol = this.isTlsServer ? "https" : "http";
       const { address, port } =
         /** @type {import("net").AddressInfo} */
-        (
-          /** @type {import("http").Server} */
-          (this.server).address()
-        );
+        (server.address());
       /**
        * @param {string} newHostname
        * @returns {string}
@@ -2632,7 +2869,7 @@ class Server {
       const prettyPrintURL = (newHostname) =>
         url.format({ protocol, hostname: newHostname, port, pathname: "/" });
 
-      let server;
+      let host;
       let localhost;
       let loopbackIPv4;
       let loopbackIPv6;
@@ -2652,7 +2889,7 @@ class Server {
           }
 
           if (!isIP) {
-            server = prettyPrintURL(this.options.host);
+            host = prettyPrintURL(this.options.host);
           }
         }
       }
@@ -2661,14 +2898,15 @@ class Server {
 
       if (parsedIP.range() === "unspecified") {
         localhost = prettyPrintURL("localhost");
+        loopbackIPv6 = prettyPrintURL("::1");
 
-        const networkIPv4 = await Server.internalIP("v4");
+        const networkIPv4 = Server.findIp("v4", false);
 
         if (networkIPv4) {
           networkUrlIPv4 = prettyPrintURL(networkIPv4);
         }
 
-        const networkIPv6 = await Server.internalIP("v6");
+        const networkIPv6 = Server.findIp("v6", false);
 
         if (networkIPv6) {
           networkUrlIPv6 = prettyPrintURL(networkIPv6);
@@ -2697,8 +2935,8 @@ class Server {
 
       this.logger.info("Project is running at:");
 
-      if (server) {
-        this.logger.info(`Server: ${colors.info(useColor, server)}`);
+      if (host) {
+        this.logger.info(`Server: ${colors.info(useColor, host)}`);
       }
 
       if (localhost || loopbackIPv4 || loopbackIPv6) {
@@ -2770,11 +3008,7 @@ class Server {
     if (this.options.bonjour) {
       const bonjourProtocol =
         /** @type {BonjourOptions} */
-        (this.options.bonjour).type ||
-        /** @type {ServerConfiguration} */
-        (this.options.server).type === "http"
-          ? "http"
-          : "https";
+        (this.options.bonjour).type || this.isTlsServer ? "https" : "http";
 
       this.logger.info(
         `Broadcasting "${bonjourProtocol}" with subtype of "webpack" via ZeroConf DNS (Bonjour)`,
@@ -2796,8 +3030,8 @@ class Server {
         headers = headers(
           req,
           res,
-          /** @type {import("webpack-dev-middleware").API<IncomingMessage, ServerResponse>}*/
-          (this.middleware).context,
+          // eslint-disable-next-line no-undefined
+          this.middleware ? this.middleware.context : undefined,
         );
       }
 
@@ -2806,6 +3040,8 @@ class Server {
        */
       const allHeaders = [];
 
+      allHeaders.push({ key: "X_TEST", value: "TEST" });
+
       if (!Array.isArray(headers)) {
         // eslint-disable-next-line guard-for-in
         for (const name in headers) {
@@ -2816,14 +3052,9 @@ class Server {
         headers = allHeaders;
       }
 
-      headers.forEach(
-        /**
-         * @param {{key: string, value: any}} header
-         */
-        (header) => {
-          res.setHeader(header.key, header.value);
-        },
-      );
+      for (const { key, value } of headers) {
+        res.setHeader(key, value);
+      }
     }
 
     next();
@@ -3097,7 +3328,7 @@ class Server {
 
     await /** @type {Promise<void>} */ (
       new Promise((resolve) => {
-        /** @type {import("http").Server} */
+        /** @type {S} */
         (this.server).listen(listenOptions, () => {
           resolve();
         });
@@ -3183,10 +3414,10 @@ class Server {
     if (this.server) {
       await /** @type {Promise<void>} */ (
         new Promise((resolve) => {
-          /** @type {import("http").Server} */
+          /** @type {S} */
           (this.server).close(() => {
-            this.server = null;
-
+            // eslint-disable-next-line no-undefined
+            this.server = undefined;
             resolve();
           });
 
@@ -3205,7 +3436,6 @@ class Server {
             (this.middleware).close((error) => {
               if (error) {
                 reject(error);
-
                 return;
               }
 
@@ -3214,7 +3444,8 @@ class Server {
           })
         );
 
-        this.middleware = null;
+        // eslint-disable-next-line no-undefined
+        this.middleware = undefined;
       }
     }