webpack-dev-server 4.3.1 → 4.7.0

package/lib/Server.js

@@ -6,19 +6,219 @@ const url = require("url");
 const util = require("util");
 const fs = require("graceful-fs");
 const ipaddr = require("ipaddr.js");
-const internalIp = require("internal-ip");
+const defaultGateway = require("default-gateway");
 const express = require("express");
 const { validate } = require("schema-utils");
 const schema = require("./options.json");
 
+/** @typedef {import("schema-utils/declarations/validate").Schema} Schema */
+/** @typedef {import("webpack").Compiler} Compiler */
+/** @typedef {import("webpack").MultiCompiler} MultiCompiler */
+/** @typedef {import("webpack").Configuration} WebpackConfiguration */
+/** @typedef {import("webpack").StatsOptions} StatsOptions */
+/** @typedef {import("webpack").StatsCompilation} StatsCompilation */
+/** @typedef {import("webpack").Stats} Stats */
+/** @typedef {import("webpack").MultiStats} MultiStats */
+/** @typedef {import("os").NetworkInterfaceInfo} NetworkInterfaceInfo */
+/** @typedef {import("express").Request} Request */
+/** @typedef {import("express").Response} Response */
+/** @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 */
+/** @typedef {import("bonjour").Bonjour} Bonjour */
+/** @typedef {import("bonjour").BonjourOptions} BonjourOptions */
+/** @typedef {import("http-proxy-middleware").RequestHandler} RequestHandler */
+/** @typedef {import("http-proxy-middleware").Options} HttpProxyMiddlewareOptions */
+/** @typedef {import("http-proxy-middleware").Filter} HttpProxyMiddlewareOptionsFilter */
+/** @typedef {import("serve-index").Options} ServeIndexOptions */
+/** @typedef {import("serve-static").ServeStaticOptions} ServeStaticOptions */
+/** @typedef {import("ipaddr.js").IPv4} IPv4 */
+/** @typedef {import("ipaddr.js").IPv6} IPv6 */
+/** @typedef {import("net").Socket} Socket */
+/** @typedef {import("http").IncomingMessage} IncomingMessage */
+/** @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
+ */
+
+/**
+ * @template Request, Response
+ * @typedef {import("webpack-dev-middleware").Context<Request, Response>} DevMiddlewareContext
+ */
+
+/**
+ * @typedef {"local-ip" | "local-ipv4" | "local-ipv6" | string} Host
+ */
+
+/**
+ * @typedef {number | string | "auto"} Port
+ */
+
+/**
+ * @typedef {Object} WatchFiles
+ * @property {string | string[]} paths
+ * @property {WatchOptions & { aggregateTimeout?: number, ignored?: string | RegExp | string[], poll?: number | boolean }} [options]
+ */
+
+/**
+ * @typedef {Object} Static
+ * @property {string} [directory]
+ * @property {string | string[]} [publicPath]
+ * @property {boolean | ServeIndexOptions} [serveIndex]
+ * @property {ServeStaticOptions} [staticOptions]
+ * @property {boolean | WatchOptions & { aggregateTimeout?: number, ignored?: string | RegExp | string[], poll?: number | boolean }} [watch]
+ */
+
+/**
+ * @typedef {Object} NormalizedStatic
+ * @property {string} directory
+ * @property {string[]} publicPath
+ * @property {false | ServeIndexOptions} serveIndex
+ * @property {ServeStaticOptions} staticOptions
+ * @property {false | WatchOptions} watch
+ */
+
+/**
+ * @typedef {Object} ServerConfiguration
+ * @property {"http" | "https" | "spdy" | string} [type]
+ * @property {ServerOptions} [options]
+ */
+
+/**
+ * @typedef {Object} WebSocketServerConfiguration
+ * @property {"sockjs" | "ws" | string | Function} [type]
+ * @property {Record<string, any>} [options]
+ */
+
+/**
+ * @typedef {(import("ws").WebSocket | import("sockjs").Connection & { send: import("ws").WebSocket["send"], terminate: import("ws").WebSocket["terminate"], ping: import("ws").WebSocket["ping"] }) & { isAlive?: boolean }} ClientConnection
+ */
+
+/**
+ * @typedef {import("ws").WebSocketServer | import("sockjs").Server & { close: import("ws").WebSocketServer["close"] }} WebSocketServer
+ */
+
+/**
+ * @typedef {{ implementation: WebSocketServer, clients: ClientConnection[] }} WebSocketServerImplementation
+ */
+
+/**
+ * @typedef {{ [url: string]: string | HttpProxyMiddlewareOptions }} ProxyConfigMap
+ */
+
+/**
+ * @typedef {HttpProxyMiddlewareOptions[]} ProxyArray
+ */
+
+/**
+ * @callback ByPass
+ * @param {Request} req
+ * @param {Response} res
+ * @param {ProxyConfigArray} proxyConfig
+ */
+
+/**
+ * @typedef {{ path?: string | string[] | undefined, context?: string | string[] | HttpProxyMiddlewareOptionsFilter | undefined } & HttpProxyMiddlewareOptions & ByPass} ProxyConfigArray
+ */
+
+/**
+ * @typedef {Object} OpenApp
+ * @property {string} [name]
+ * @property {string[]} [arguments]
+ */
+
+/**
+ * @typedef {Object} Open
+ * @property {string | string[] | OpenApp} [app]
+ * @property {string | string[]} [target]
+ */
+
+/**
+ * @typedef {Object} NormalizedOpen
+ * @property {string} target
+ * @property {import("open").Options} options
+ */
+
+/**
+ * @typedef {Object} WebSocketURL
+ * @property {string} [hostname]
+ * @property {string} [password]
+ * @property {string} [pathname]
+ * @property {number | string} [port]
+ * @property {string} [protocol]
+ * @property {string} [username]
+ */
+
+/**
+ * @typedef {Object} ClientConfiguration
+ * @property {"log" | "info" | "warn" | "error" | "none" | "verbose"} [logging]
+ * @property {boolean  | { warnings?: boolean, errors?: boolean }} [overlay]
+ * @property {boolean} [progress]
+ * @property {boolean | number} [reconnect]
+ * @property {"ws" | "sockjs" | string} [webSocketTransport]
+ * @property {string | WebSocketURL} [webSocketURL]
+ */
+
+/**
+ * @typedef {Array<{ key: string; value: string }> | Record<string, string | string[]>} Headers
+ */
+
+/**
+ * @typedef {{ name?: string, path?: string, middleware: ExpressRequestHandler | ExpressErrorRequestHandler } | ExpressRequestHandler | ExpressErrorRequestHandler} Middleware
+ */
+
+/**
+ * @typedef {Object} Configuration
+ * @property {boolean | string} [ipc]
+ * @property {Host} [host]
+ * @property {Port} [port]
+ * @property {boolean | "only"} [hot]
+ * @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} [setupExitSignals]
+ * @property {boolean | 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 {boolean | "sockjs" | "ws" | string | WebSocketServerConfiguration} [webSocketServer]
+ * @property {ProxyConfigMap | ProxyConfigArray | ProxyArray} [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} [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;
 }
 
 class Server {
+  /**
+   * @param {Configuration | Compiler | MultiCompiler} options
+   * @param {Compiler | MultiCompiler | Configuration} compiler
+   */
   constructor(options = {}, compiler) {
     // TODO: remove this after plugin support is published
-    if (options.hooks) {
+    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.",
@@ -28,17 +228,65 @@ class Server {
       [options = {}, compiler] = [compiler, options];
     }
 
-    validate(schema, options, "webpack Dev Server");
+    validate(/** @type {Schema} */ (schema), options, {
+      name: "Dev Server",
+      baseDataPath: "options",
+    });
 
-    this.options = options;
+    this.compiler = /** @type {Compiler | MultiCompiler} */ (compiler);
+    /**
+     * @type {ReturnType<Compiler["getInfrastructureLogger"]>}
+     * */
+    this.logger = this.compiler.getInfrastructureLogger("webpack-dev-server");
+    this.options = /** @type {Configuration} */ (options);
+    /**
+     * @type {FSWatcher[]}
+     */
     this.staticWatchers = [];
+    /**
+     * @private
+     * @type {{ name: string | symbol, listener: (...args: any[]) => void}[] }}
+     */
+    this.listeners = [];
     // Keep track of websocket proxies for external websocket upgrade.
+    /**
+     * @private
+     * @type {RequestHandler[]}
+     */
     this.webSocketProxies = [];
+    /**
+     * @type {Socket[]}
+     */
     this.sockets = [];
-    this.compiler = compiler;
-    this.currentHash = null;
+    /**
+     * @private
+     * @type {string | undefined}
+     */
+    // eslint-disable-next-line no-undefined
+    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;
   }
 
+  /**
+   * @private
+   * @returns {StatsOptions}
+   * @constructor
+   */
   static get DEFAULT_STATS() {
     return {
       all: false,
@@ -49,7 +297,10 @@ class Server {
     };
   }
 
-  // eslint-disable-next-line class-methods-use-this
+  /**
+   * @param {string} URL
+   * @returns {boolean}
+   */
   static isAbsoluteURL(URL) {
     // Don't match Windows paths `c:\`
     if (/^[a-zA-Z]:\\/.test(URL)) {
@@ -61,18 +312,81 @@ class Server {
     return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(URL);
   }
 
+  /**
+   * @param {string} gateway
+   * @returns {string | undefined}
+   */
+  static findIp(gateway) {
+    const gatewayIp = ipaddr.parse(gateway);
+
+    // Look for the matching interface in all local interfaces.
+    for (const addresses of Object.values(os.networkInterfaces())) {
+      for (const { cidr } of /** @type {NetworkInterfaceInfo[]} */ (
+        addresses
+      )) {
+        const net = ipaddr.parseCIDR(/** @type {string} */ (cidr));
+
+        if (
+          net[0] &&
+          net[0].kind() === gatewayIp.kind() &&
+          gatewayIp.match(net)
+        ) {
+          return net[0].toString();
+        }
+      }
+    }
+  }
+
+  /**
+   * @param {"v4" | "v6"} family
+   * @returns {Promise<string | undefined>}
+   */
+  static async internalIP(family) {
+    try {
+      const { gateway } = await defaultGateway[family]();
+      return Server.findIp(gateway);
+    } catch {
+      // ignore
+    }
+  }
+
+  /**
+   * @param {"v4" | "v6"} family
+   * @returns {string | undefined}
+   */
+  static internalIPSync(family) {
+    try {
+      const { gateway } = defaultGateway[family].sync();
+      return Server.findIp(gateway);
+    } catch {
+      // ignore
+    }
+  }
+
+  /**
+   * @param {Host} hostname
+   * @returns {Promise<string>}
+   */
   static async getHostname(hostname) {
     if (hostname === "local-ip") {
-      return (await internalIp.v4()) || (await internalIp.v6()) || "0.0.0.0";
+      return (
+        (await Server.internalIP("v4")) ||
+        (await Server.internalIP("v6")) ||
+        "0.0.0.0"
+      );
     } else if (hostname === "local-ipv4") {
-      return (await internalIp.v4()) || "0.0.0.0";
+      return (await Server.internalIP("v4")) || "0.0.0.0";
     } else if (hostname === "local-ipv6") {
-      return (await internalIp.v6()) || "::";
+      return (await Server.internalIP("v6")) || "::";
     }
 
     return hostname;
   }
 
+  /**
+   * @param {Port} port
+   * @returns {Promise<number | string>}
+   */
   static async getFreePort(port) {
     if (typeof port !== "undefined" && port !== null && port !== "auto") {
       return port;
@@ -81,21 +395,32 @@ class Server {
     const pRetry = require("p-retry");
     const portfinder = require("portfinder");
 
-    portfinder.basePort = process.env.WEBPACK_DEV_SERVER_BASE_PORT || 8080;
+    portfinder.basePort =
+      typeof process.env.WEBPACK_DEV_SERVER_BASE_PORT !== "undefined"
+        ? parseInt(process.env.WEBPACK_DEV_SERVER_BASE_PORT, 10)
+        : 8080;
 
     // Try to find unused port and listen on it for 3 times,
     // if port is not specified in options.
     const defaultPortRetry =
-      parseInt(process.env.WEBPACK_DEV_SERVER_PORT_RETRY, 10) || 3;
+      typeof process.env.WEBPACK_DEV_SERVER_PORT_RETRY !== "undefined"
+        ? parseInt(process.env.WEBPACK_DEV_SERVER_PORT_RETRY, 10)
+        : 3;
 
     return pRetry(() => portfinder.getPortPromise(), {
       retries: defaultPortRetry,
     });
   }
 
+  /**
+   * @returns {string}
+   */
   static findCacheDir() {
     const cwd = process.cwd();
 
+    /**
+     * @type {string | undefined}
+     */
     let dir = cwd;
 
     for (;;) {
@@ -126,7 +451,14 @@ class Server {
     return path.resolve(dir, "node_modules/.cache/webpack-dev-server");
   }
 
+  /**
+   * @private
+   * @param {Compiler} compiler
+   */
   addAdditionalEntries(compiler) {
+    /**
+     * @type {string[]}
+     */
     const additionalEntries = [];
 
     const isWebTarget = compiler.options.externalsPresets
@@ -140,38 +472,44 @@ class Server {
           // eslint-disable-next-line no-undefined
           undefined,
           null,
-        ].includes(compiler.options.target);
+        ].includes(/** @type {string} */ (compiler.options.target));
 
     // TODO maybe empty empty client
     if (this.options.client && isWebTarget) {
-      let webSocketURL = "";
+      let webSocketURLStr = "";
+
       if (this.options.webSocketServer) {
+        const webSocketURL =
+          /** @type {WebSocketURL} */
+          (
+            /** @type {ClientConfiguration} */
+            (this.options.client).webSocketURL
+          );
+        const webSocketServer =
+          /** @type {{ type: WebSocketServerConfiguration["type"], options: NonNullable<WebSocketServerConfiguration["options"]> }} */
+          (this.options.webSocketServer);
         const searchParams = new URLSearchParams();
 
-        /** @type {"ws:" | "wss:" | "http:" | "https:" | "auto:"} */
+        /** @type {string} */
         let protocol;
 
         // We are proxying dev server and need to specify custom `hostname`
-        if (typeof this.options.client.webSocketURL.protocol !== "undefined") {
-          protocol = this.options.client.webSocketURL.protocol;
+        if (typeof webSocketURL.protocol !== "undefined") {
+          protocol = webSocketURL.protocol;
         } else {
-          protocol = this.options.https ? "wss:" : "ws:";
+          protocol =
+            /** @type {ServerConfiguration} */
+            (this.options.server).type === "http" ? "ws:" : "wss:";
         }
 
         searchParams.set("protocol", protocol);
 
-        if (typeof this.options.client.webSocketURL.username !== "undefined") {
-          searchParams.set(
-            "username",
-            this.options.client.webSocketURL.username
-          );
+        if (typeof webSocketURL.username !== "undefined") {
+          searchParams.set("username", webSocketURL.username);
         }
 
-        if (typeof this.options.client.webSocketURL.password !== "undefined") {
-          searchParams.set(
-            "password",
-            this.options.client.webSocketURL.password
-          );
+        if (typeof webSocketURL.password !== "undefined") {
+          searchParams.set("password", webSocketURL.password);
         }
 
         /** @type {string} */
@@ -179,18 +517,18 @@ class Server {
 
         // SockJS is not supported server mode, so `hostname` and `port` can't specified, let's ignore them
         // TODO show warning about this
-        const isSockJSType = this.options.webSocketServer.type === "sockjs";
+        const isSockJSType = webSocketServer.type === "sockjs";
 
         // We are proxying dev server and need to specify custom `hostname`
-        if (typeof this.options.client.webSocketURL.hostname !== "undefined") {
-          hostname = this.options.client.webSocketURL.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 this.options.webSocketServer.options.host !== "undefined" &&
+          typeof webSocketServer.options.host !== "undefined" &&
           !isSockJSType
         ) {
-          hostname = this.options.webSocketServer.options.host;
+          hostname = webSocketServer.options.host;
         }
         // The `host` option is specified
         else if (typeof this.options.host !== "undefined") {
@@ -207,15 +545,15 @@ class Server {
         let port;
 
         // We are proxying dev server and need to specify custom `port`
-        if (typeof this.options.client.webSocketURL.port !== "undefined") {
-          port = this.options.client.webSocketURL.port;
+        if (typeof webSocketURL.port !== "undefined") {
+          port = webSocketURL.port;
         }
         // Web socket server works on custom `port`, only for `ws` because `sock-js` is not support custom `port`
         else if (
-          typeof this.options.webSocketServer.options.port !== "undefined" &&
+          typeof webSocketServer.options.port !== "undefined" &&
           !isSockJSType
         ) {
-          port = this.options.webSocketServer.options.port;
+          port = webSocketServer.options.port;
         }
         // The `port` option is specified
         else if (typeof this.options.port === "number") {
@@ -239,43 +577,47 @@ class Server {
         let pathname = "";
 
         // We are proxying dev server and need to specify custom `pathname`
-        if (typeof this.options.client.webSocketURL.pathname !== "undefined") {
-          pathname = this.options.client.webSocketURL.pathname;
+        if (typeof webSocketURL.pathname !== "undefined") {
+          pathname = webSocketURL.pathname;
         }
         // Web socket server works on custom `path`
         else if (
-          typeof this.options.webSocketServer.options.prefix !== "undefined" ||
-          typeof this.options.webSocketServer.options.path !== "undefined"
+          typeof webSocketServer.options.prefix !== "undefined" ||
+          typeof webSocketServer.options.path !== "undefined"
         ) {
           pathname =
-            this.options.webSocketServer.options.prefix ||
-            this.options.webSocketServer.options.path;
+            webSocketServer.options.prefix || webSocketServer.options.path;
         }
 
         searchParams.set("pathname", pathname);
 
-        if (typeof this.options.client.logging !== "undefined") {
-          searchParams.set("logging", this.options.client.logging);
+        const client = /** @type {ClientConfiguration} */ (this.options.client);
+
+        if (typeof client.logging !== "undefined") {
+          searchParams.set("logging", client.logging);
+        }
+
+        if (typeof client.reconnect !== "undefined") {
+          searchParams.set(
+            "reconnect",
+            typeof client.reconnect === "number"
+              ? String(client.reconnect)
+              : "10"
+          );
         }
 
-        webSocketURL = searchParams.toString();
+        webSocketURLStr = searchParams.toString();
       }
 
       additionalEntries.push(
-        `${require.resolve("../client/index.js")}?${webSocketURL}`
+        `${require.resolve("../client/index.js")}?${webSocketURLStr}`
       );
     }
 
-    if (this.options.hot) {
-      let hotEntry;
-
-      if (this.options.hot === "only") {
-        hotEntry = require.resolve("webpack/hot/only-dev-server");
-      } else if (this.options.hot) {
-        hotEntry = require.resolve("webpack/hot/dev-server");
-      }
-
-      additionalEntries.push(hotEntry);
+    if (this.options.hot === "only") {
+      additionalEntries.push(require.resolve("webpack/hot/only-dev-server"));
+    } else if (this.options.hot) {
+      additionalEntries.push(require.resolve("webpack/hot/dev-server"));
     }
 
     const webpack = compiler.webpack || require("webpack");
@@ -293,9 +635,9 @@ class Server {
     else {
       /**
        * prependEntry Method for webpack 4
-       * @param {Entry} originalEntry
-       * @param {Entry} newAdditionalEntries
-       * @returns {Entry}
+       * @param {any} originalEntry
+       * @param {any} newAdditionalEntries
+       * @returns {any}
        */
       const prependEntry = (originalEntry, newAdditionalEntries) => {
         if (typeof originalEntry === "function") {
@@ -324,7 +666,7 @@ class Server {
 
         // in this case, entry is a string or an array.
         // make sure that we do not add duplicates.
-        /** @type {Entry} */
+        /** @type {any} */
         const entriesClone = additionalEntries.slice(0);
 
         [].concat(originalEntry).forEach((newEntry) => {
@@ -341,73 +683,201 @@ class Server {
         additionalEntries
       );
       compiler.hooks.entryOption.call(
-        compiler.options.context,
+        /** @type {string} */ (compiler.options.context),
         compiler.options.entry
       );
     }
   }
 
+  /**
+   * @private
+   * @returns {Compiler["options"]}
+   */
   getCompilerOptions() {
-    if (typeof this.compiler.compilers !== "undefined") {
-      if (this.compiler.compilers.length === 1) {
-        return this.compiler.compilers[0].options;
+    if (
+      typeof (/** @type {MultiCompiler} */ (this.compiler).compilers) !==
+      "undefined"
+    ) {
+      if (/** @type {MultiCompiler} */ (this.compiler).compilers.length === 1) {
+        return (
+          /** @type {MultiCompiler} */
+          (this.compiler).compilers[0].options
+        );
       }
 
       // Configuration with the `devServer` options
-      const compilerWithDevServer = this.compiler.compilers.find(
-        (config) => config.options.devServer
-      );
+      const compilerWithDevServer =
+        /** @type {MultiCompiler} */
+        (this.compiler).compilers.find((config) => config.options.devServer);
 
       if (compilerWithDevServer) {
         return compilerWithDevServer.options;
       }
 
       // Configuration with `web` preset
-      const compilerWithWebPreset = this.compiler.compilers.find(
-        (config) =>
-          (config.options.externalsPresets &&
-            config.options.externalsPresets.web) ||
-          [
-            "web",
-            "webworker",
-            "electron-preload",
-            "electron-renderer",
-            "node-webkit",
-            // eslint-disable-next-line no-undefined
-            undefined,
-            null,
-          ].includes(config.options.target)
-      );
+      const compilerWithWebPreset =
+        /** @type {MultiCompiler} */
+        (this.compiler).compilers.find(
+          (config) =>
+            (config.options.externalsPresets &&
+              config.options.externalsPresets.web) ||
+            [
+              "web",
+              "webworker",
+              "electron-preload",
+              "electron-renderer",
+              "node-webkit",
+              // eslint-disable-next-line no-undefined
+              undefined,
+              null,
+            ].includes(/** @type {string} */ (config.options.target))
+        );
 
       if (compilerWithWebPreset) {
         return compilerWithWebPreset.options;
       }
 
       // Fallback
-      return this.compiler.compilers[0].options;
+      return /** @type {MultiCompiler} */ (this.compiler).compilers[0].options;
     }
 
-    return this.compiler.options;
+    return /** @type {Compiler} */ (this.compiler).options;
   }
 
-  // eslint-disable-next-line class-methods-use-this
+  /**
+   * @private
+   * @returns {Promise<void>}
+   */
   async normalizeOptions() {
     const { options } = this;
-
-    if (!this.logger) {
-      this.logger = this.compiler.getInfrastructureLogger("webpack-dev-server");
-    }
-
     const compilerOptions = this.getCompilerOptions();
     // TODO remove `{}` after drop webpack v4 support
-    const watchOptions = compilerOptions.watchOptions || {};
-    const defaultOptionsForStatic = {
-      directory: path.join(process.cwd(), "public"),
-      staticOptions: {},
-      publicPath: ["/"],
-      serveIndex: { icons: true },
-      // Respect options from compiler watchOptions
-      watch: watchOptions,
+    const compilerWatchOptions = compilerOptions.watchOptions || {};
+    /**
+     * @param {WatchOptions & WebpackConfiguration["watchOptions"]} watchOptions
+     * @returns {WatchOptions}
+     */
+    const getWatchOptions = (watchOptions = {}) => {
+      const getPolling = () => {
+        if (typeof watchOptions.usePolling !== "undefined") {
+          return watchOptions.usePolling;
+        }
+
+        if (typeof watchOptions.poll !== "undefined") {
+          return Boolean(watchOptions.poll);
+        }
+
+        if (typeof compilerWatchOptions.poll !== "undefined") {
+          return Boolean(compilerWatchOptions.poll);
+        }
+
+        return false;
+      };
+      const getInterval = () => {
+        if (typeof watchOptions.interval !== "undefined") {
+          return watchOptions.interval;
+        }
+
+        if (typeof watchOptions.poll === "number") {
+          return watchOptions.poll;
+        }
+
+        if (typeof compilerWatchOptions.poll === "number") {
+          return compilerWatchOptions.poll;
+        }
+      };
+
+      const usePolling = getPolling();
+      const interval = getInterval();
+      const { poll, ...rest } = watchOptions;
+
+      return {
+        ignoreInitial: true,
+        persistent: true,
+        followSymlinks: false,
+        atomic: false,
+        alwaysStat: true,
+        ignorePermissionErrors: true,
+        // Respect options from compiler watchOptions
+        usePolling,
+        interval,
+        ignored: watchOptions.ignored,
+        // TODO: we respect these options for all watch options and allow developers to pass them to chokidar, but chokidar doesn't have these options maybe we need revisit that in future
+        ...rest,
+      };
+    };
+    /**
+     * @param {string | Static | undefined} [optionsForStatic]
+     * @returns {NormalizedStatic}
+     */
+    const getStaticItem = (optionsForStatic) => {
+      const getDefaultStaticOptions = () => {
+        return {
+          directory: path.join(process.cwd(), "public"),
+          staticOptions: {},
+          publicPath: ["/"],
+          serveIndex: { icons: true },
+          watch: getWatchOptions(),
+        };
+      };
+
+      /** @type {NormalizedStatic} */
+      let item;
+
+      if (typeof optionsForStatic === "undefined") {
+        item = getDefaultStaticOptions();
+      } else if (typeof optionsForStatic === "string") {
+        item = {
+          ...getDefaultStaticOptions(),
+          directory: optionsForStatic,
+        };
+      } else {
+        const def = getDefaultStaticOptions();
+
+        item = {
+          directory:
+            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,
+          publicPath:
+            // eslint-disable-next-line no-nested-ternary
+            typeof optionsForStatic.publicPath !== "undefined"
+              ? Array.isArray(optionsForStatic.publicPath)
+                ? optionsForStatic.publicPath
+                : [optionsForStatic.publicPath]
+              : def.publicPath,
+          // TODO: do merge in the next major release
+          serveIndex:
+            // eslint-disable-next-line no-nested-ternary
+            typeof optionsForStatic.serveIndex !== "undefined"
+              ? typeof optionsForStatic.serveIndex === "boolean" &&
+                optionsForStatic.serveIndex
+                ? def.serveIndex
+                : optionsForStatic.serveIndex
+              : def.serveIndex,
+          watch:
+            // eslint-disable-next-line no-nested-ternary
+            typeof optionsForStatic.watch !== "undefined"
+              ? // eslint-disable-next-line no-nested-ternary
+                typeof optionsForStatic.watch === "boolean"
+                ? optionsForStatic.watch
+                  ? def.watch
+                  : false
+                : getWatchOptions(optionsForStatic.watch)
+              : def.watch,
+        };
+      }
+
+      if (Server.isAbsoluteURL(item.directory)) {
+        throw new Error("Using a URL as static.directory is not supported");
+      }
+
+      return item;
     };
 
     if (typeof options.allowedHosts === "undefined") {
@@ -474,6 +944,14 @@ class Server {
         };
       }
 
+      if (typeof options.client.reconnect === "undefined") {
+        options.client.reconnect = 10;
+      } else if (options.client.reconnect === true) {
+        options.client.reconnect = Infinity;
+      } else if (options.client.reconnect === false) {
+        options.client.reconnect = 0;
+      }
+
       // Respect infrastructureLogging.level
       if (typeof options.client.logging === "undefined") {
         options.client.logging = compilerOptions.infrastructureLogging
@@ -508,23 +986,100 @@ class Server {
         ? options.hot
         : true;
 
-    // if the user enables http2, we can safely enable https
-    if ((options.http2 && !options.https) || options.https === true) {
-      options.https = {
-        requestCert: false,
+    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",
+      options: {
+        .../** @type {ServerOptions} */ (options.https),
+        .../** @type {ServerConfiguration} */ (options.server || {}).options,
+      },
+    };
+
+    if (
+      options.server.type === "spdy" &&
+      typeof (/** @type {ServerOptions} */ (options.server.options).spdy) ===
+        "undefined"
+    ) {
+      /** @type {ServerOptions} */
+      (options.server.options).spdy = {
+        protocols: ["h2", "http/1.1"],
       };
     }
 
-    // https option
-    if (options.https) {
-      // TODO remove the `cacert` option in favor `ca` in the next major release
-      for (const property of ["cacert", "ca", "cert", "crl", "key", "pfx"]) {
-        if (typeof options.https[property] === "undefined") {
+    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;
+      }
+
+      const httpsProperties =
+        /** @type {Array<keyof ServerOptions>} */
+        (["cacert", "ca", "cert", "crl", "key", "pfx"]);
+
+      for (const property of httpsProperties) {
+        if (
+          typeof (
+            /** @type {ServerOptions} */ (options.server.options)[property]
+          ) === "undefined"
+        ) {
           // eslint-disable-next-line no-continue
           continue;
         }
 
-        const value = options.https[property];
+        // @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} */
+          (options.server.options)[property];
+        /**
+         * @param {string | Buffer | undefined} item
+         * @returns {string | Buffer | undefined}
+         */
         const readFile = (item) => {
           if (
             Buffer.isBuffer(item) ||
@@ -547,14 +1102,18 @@ class Server {
           }
         };
 
-        options.https[property] = Array.isArray(value)
+        /** @type {any} */
+        (options.server.options)[property] = Array.isArray(value)
           ? value.map((item) => readFile(item))
           : readFile(value);
       }
 
       let fakeCert;
 
-      if (!options.https.key || !options.https.cert) {
+      if (
+        !(/** @type {ServerOptions} */ (options.server.options).key) ||
+        /** @type {ServerOptions} */ (!options.server.options).cert
+      ) {
         const certificateDir = Server.findCacheDir();
         const certificatePath = path.join(certificateDir, "server.pem");
         let certificateExists;
@@ -569,15 +1128,14 @@ class Server {
         if (certificateExists) {
           const certificateTtl = 1000 * 60 * 60 * 24;
           const certificateStat = await fs.promises.stat(certificatePath);
-
-          const now = new Date();
+          const now = Number(new Date());
 
           // cert is more than 30 days old, kill it with fire
-          if ((now - certificateStat.ctime) / certificateTtl > 30) {
+          if ((now - Number(certificateStat.ctime)) / certificateTtl > 30) {
             const del = require("del");
 
             this.logger.info(
-              "SSL Certificate is more than 30 days old. Removing..."
+              "SSL certificate is more than 30 days old. Removing..."
             );
 
             await del([certificatePath], { force: true });
@@ -587,8 +1145,9 @@ class Server {
         }
 
         if (!certificateExists) {
-          this.logger.info("Generating SSL Certificate...");
+          this.logger.info("Generating SSL certificate...");
 
+          // @ts-ignore
           const selfsigned = require("selfsigned");
           const attributes = [{ name: "commonName", value: "localhost" }];
           const pems = selfsigned.generate(attributes, {
@@ -669,20 +1228,37 @@ class Server {
         this.logger.info(`SSL certificate: ${certificatePath}`);
       }
 
-      if (options.https.cacert) {
-        if (options.https.ca) {
+      if (
+        /** @type {ServerOptions & { cacert?: ServerOptions["ca"] }} */ (
+          options.server.options
+        ).cacert
+      ) {
+        if (/** @type {ServerOptions} */ (options.server.options).ca) {
           this.logger.warn(
-            "Do not specify 'https.ca' and 'https.cacert' options together, the 'https.ca' option will be used."
+            "Do not specify 'ca' and 'cacert' options together, the 'ca' option will be used."
           );
         } else {
-          options.https.ca = options.https.cacert;
+          /** @type {ServerOptions} */
+          (options.server.options).ca =
+            /** @type {ServerOptions & { cacert?: ServerOptions["ca"] }} */
+            (options.server.options).cacert;
         }
 
-        delete options.https.cacert;
+        delete (
+          /** @type {ServerOptions & { cacert?: ServerOptions["ca"] }} */ (
+            options.server.options
+          ).cacert
+        );
       }
 
-      options.https.key = options.https.key || fakeCert;
-      options.https.cert = options.https.cert || fakeCert;
+      /** @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;
     }
 
     if (typeof options.ipc === "boolean") {
@@ -701,6 +1277,11 @@ class Server {
 
     // 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 };
 
@@ -722,14 +1303,25 @@ class Server {
     };
 
     if (typeof options.open === "undefined") {
-      options.open = [];
+      /** @type {NormalizedOpen[]} */
+      (options.open) = [];
     } else if (typeof options.open === "boolean") {
-      options.open = options.open
-        ? [{ target: "<url>", options: defaultOpenOptions }]
+      /** @type {NormalizedOpen[]} */
+      (options.open) = options.open
+        ? [
+            {
+              target: "<url>",
+              options: /** @type {OpenOptions} */ (defaultOpenOptions),
+            },
+          ]
         : [];
     } else if (typeof options.open === "string") {
-      options.open = [{ target: options.open, options: defaultOpenOptions }];
+      /** @type {NormalizedOpen[]} */
+      (options.open) = [{ target: options.open, options: defaultOpenOptions }];
     } else if (Array.isArray(options.open)) {
+      /**
+       * @type {NormalizedOpen[]}
+       */
       const result = [];
 
       options.open.forEach((item) => {
@@ -742,9 +1334,29 @@ class Server {
         result.push(...getOpenItemsFromObject(item));
       });
 
-      options.open = result;
+      /** @type {NormalizedOpen[]} */
+      (options.open) = result;
     } else {
-      options.open = [...getOpenItemsFromObject(options.open)];
+      /** @type {NormalizedOpen[]} */
+      (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") {
@@ -768,61 +1380,91 @@ class Server {
           Object.prototype.hasOwnProperty.call(options.proxy, "target") ||
           Object.prototype.hasOwnProperty.call(options.proxy, "router")
         ) {
-          options.proxy = [options.proxy];
+          /** @type {ProxyArray} */
+          (options.proxy) = [/** @type {ProxyConfigMap} */ (options.proxy)];
         } else {
-          options.proxy = Object.keys(options.proxy).map((context) => {
-            let proxyOptions;
-            // For backwards compatibility reasons.
-            const correctedContext = context
-              .replace(/^\*$/, "**")
-              .replace(/\/\*$/, "");
-
-            if (typeof options.proxy[context] === "string") {
-              proxyOptions = {
-                context: correctedContext,
-                target: options.proxy[context],
-              };
-            } else {
-              proxyOptions = { ...options.proxy[context] };
-              proxyOptions.context = correctedContext;
+          /** @type {ProxyArray} */
+          (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;
             }
-
-            return proxyOptions;
-          });
+          );
         }
       }
 
-      options.proxy = options.proxy.map((item) => {
-        const getLogLevelForProxy = (level) => {
-          if (level === "none") {
-            return "silent";
-          }
+      /** @type {ProxyArray} */
+      (options.proxy) =
+        /** @type {ProxyArray} */
+        (options.proxy).map(
+          /**
+           * @param {HttpProxyMiddlewareOptions} item
+           * @returns {HttpProxyMiddlewareOptions}
+           */
+          (item) => {
+            /**
+             * @param {"info" | "warn" | "error" | "debug" | "silent" | undefined | "none" | "log" | "verbose"} level
+             * @returns {"info" | "warn" | "error" | "debug" | "silent" | undefined}
+             */
+            const getLogLevelForProxy = (level) => {
+              if (level === "none") {
+                return "silent";
+              }
+
+              if (level === "log") {
+                return "info";
+              }
+
+              if (level === "verbose") {
+                return "debug";
+              }
+
+              return level;
+            };
+
+            if (typeof item.logLevel === "undefined") {
+              item.logLevel = getLogLevelForProxy(
+                compilerOptions.infrastructureLogging
+                  ? compilerOptions.infrastructureLogging.level
+                  : "info"
+              );
+            }
 
-          if (level === "log") {
-            return "info";
-          }
+            if (typeof item.logProvider === "undefined") {
+              item.logProvider = () => this.logger;
+            }
 
-          if (level === "verbose") {
-            return "debug";
+            return item;
           }
-
-          return level;
-        };
-
-        if (typeof item.logLevel === "undefined") {
-          item.logLevel = getLogLevelForProxy(
-            compilerOptions.infrastructureLogging
-              ? compilerOptions.infrastructureLogging.level
-              : "info"
-          );
-        }
-
-        if (typeof item.logProvider === "undefined") {
-          item.logProvider = () => this.logger;
-        }
-
-        return item;
-      });
+        );
     }
 
     if (typeof options.setupExitSignals === "undefined") {
@@ -830,50 +1472,27 @@ class Server {
     }
 
     if (typeof options.static === "undefined") {
-      options.static = [defaultOptionsForStatic];
+      options.static = [getStaticItem()];
     } else if (typeof options.static === "boolean") {
-      options.static = options.static ? [defaultOptionsForStatic] : false;
+      options.static = options.static ? [getStaticItem()] : false;
     } else if (typeof options.static === "string") {
-      options.static = [
-        { ...defaultOptionsForStatic, directory: options.static },
-      ];
+      options.static = [getStaticItem(options.static)];
     } else if (Array.isArray(options.static)) {
       options.static = options.static.map((item) => {
         if (typeof item === "string") {
-          return { ...defaultOptionsForStatic, directory: item };
+          return getStaticItem(item);
         }
 
-        return { ...defaultOptionsForStatic, ...item };
+        return getStaticItem(item);
       });
     } else {
-      options.static = [{ ...defaultOptionsForStatic, ...options.static }];
-    }
-
-    if (options.static) {
-      options.static.forEach((staticOption) => {
-        if (Server.isAbsoluteURL(staticOption.directory)) {
-          throw new Error("Using a URL as static.directory is not supported");
-        }
-
-        // ensure that publicPath is an array
-        if (typeof staticOption.publicPath === "string") {
-          staticOption.publicPath = [staticOption.publicPath];
-        }
-
-        // ensure that watch is an object if true
-        if (staticOption.watch === true) {
-          staticOption.watch = defaultOptionsForStatic.watch;
-        }
-
-        // ensure that serveIndex is an object if true
-        if (staticOption.serveIndex === true) {
-          staticOption.serveIndex = defaultOptionsForStatic.serveIndex;
-        }
-      });
+      options.static = [getStaticItem(options.static)];
     }
 
     if (typeof options.watchFiles === "string") {
-      options.watchFiles = [{ paths: options.watchFiles, options: {} }];
+      options.watchFiles = [
+        { paths: options.watchFiles, options: getWatchOptions() },
+      ];
     } else if (
       typeof options.watchFiles === "object" &&
       options.watchFiles !== null &&
@@ -882,16 +1501,19 @@ class Server {
       options.watchFiles = [
         {
           paths: options.watchFiles.paths,
-          options: options.watchFiles.options || {},
+          options: getWatchOptions(options.watchFiles.options || {}),
         },
       ];
     } else if (Array.isArray(options.watchFiles)) {
       options.watchFiles = options.watchFiles.map((item) => {
         if (typeof item === "string") {
-          return { paths: item, options: {} };
+          return { paths: item, options: getWatchOptions() };
         }
 
-        return { paths: item.paths, options: item.options || {} };
+        return {
+          paths: item.paths,
+          options: getWatchOptions(item.options || {}),
+        };
       });
     } else {
       options.watchFiles = [];
@@ -920,38 +1542,61 @@ class Server {
       };
     } else {
       options.webSocketServer = {
-        type: options.webSocketServer.type || defaultWebSocketServerType,
+        type:
+          /** @type {WebSocketServerConfiguration} */
+          (options.webSocketServer).type || defaultWebSocketServerType,
         options: {
           ...defaultWebSocketServerOptions,
-          ...options.webSocketServer.options,
+          .../** @type {WebSocketServerConfiguration} */
+          (options.webSocketServer).options,
         },
       };
 
-      if (typeof options.webSocketServer.options.port === "string") {
-        options.webSocketServer.options.port = Number(
-          options.webSocketServer.options.port
-        );
+      const webSocketServer =
+        /** @type {{ type: WebSocketServerConfiguration["type"], options: NonNullable<WebSocketServerConfiguration["options"]> }} */
+        (options.webSocketServer);
+
+      if (typeof webSocketServer.options.port === "string") {
+        webSocketServer.options.port = Number(webSocketServer.options.port);
       }
     }
   }
 
+  /**
+   * @private
+   * @returns {string}
+   */
   getClientTransport() {
-    let ClientImplementation;
+    let clientImplementation;
     let clientImplementationFound = true;
 
     const isKnownWebSocketServerImplementation =
       this.options.webSocketServer &&
-      typeof this.options.webSocketServer.type === "string" &&
+      typeof (
+        /** @type {WebSocketServerConfiguration} */
+        (this.options.webSocketServer).type
+      ) === "string" &&
+      // @ts-ignore
       (this.options.webSocketServer.type === "ws" ||
-        this.options.webSocketServer.type === "sockjs");
+        /** @type {WebSocketServerConfiguration} */
+        (this.options.webSocketServer).type === "sockjs");
 
     let clientTransport;
 
     if (this.options.client) {
-      if (typeof this.options.client.webSocketTransport !== "undefined") {
-        clientTransport = this.options.client.webSocketTransport;
+      if (
+        typeof (
+          /** @type {ClientConfiguration} */
+          (this.options.client).webSocketTransport
+        ) !== "undefined"
+      ) {
+        clientTransport =
+          /** @type {ClientConfiguration} */
+          (this.options.client).webSocketTransport;
       } else if (isKnownWebSocketServerImplementation) {
-        clientTransport = this.options.webSocketServer.type;
+        clientTransport =
+          /** @type {WebSocketServerConfiguration} */
+          (this.options.webSocketServer).type;
       } else {
         clientTransport = "ws";
       }
@@ -963,17 +1608,16 @@ class Server {
       case "string":
         // could be 'sockjs', 'ws', or a path that should be required
         if (clientTransport === "sockjs") {
-          ClientImplementation = require.resolve(
+          clientImplementation = require.resolve(
             "../client/clients/SockJSClient"
           );
         } else if (clientTransport === "ws") {
-          ClientImplementation = require.resolve(
+          clientImplementation = require.resolve(
             "../client/clients/WebSocketClient"
           );
         } else {
           try {
-            // eslint-disable-next-line import/no-dynamic-require
-            ClientImplementation = require.resolve(clientTransport);
+            clientImplementation = require.resolve(clientTransport);
           } catch (e) {
             clientImplementationFound = false;
           }
@@ -993,31 +1637,52 @@ class Server {
       );
     }
 
-    return ClientImplementation;
+    return /** @type {string} */ (clientImplementation);
   }
 
+  /**
+   * @private
+   * @returns {string}
+   */
   getServerTransport() {
     let implementation;
     let implementationFound = true;
 
-    switch (typeof this.options.webSocketServer.type) {
+    switch (
+      typeof (
+        /** @type {WebSocketServerConfiguration} */
+        (this.options.webSocketServer).type
+      )
+    ) {
       case "string":
         // Could be 'sockjs', in the future 'ws', or a path that should be required
-        if (this.options.webSocketServer.type === "sockjs") {
+        if (
+          /** @type {WebSocketServerConfiguration} */ (
+            this.options.webSocketServer
+          ).type === "sockjs"
+        ) {
           implementation = require("./servers/SockJSServer");
-        } else if (this.options.webSocketServer.type === "ws") {
+        } else if (
+          /** @type {WebSocketServerConfiguration} */ (
+            this.options.webSocketServer
+          ).type === "ws"
+        ) {
           implementation = require("./servers/WebsocketServer");
         } else {
           try {
             // eslint-disable-next-line import/no-dynamic-require
-            implementation = require(this.options.webSocketServer.type);
+            implementation = require(/** @type {WebSocketServerConfiguration} */ (
+              this.options.webSocketServer
+            ).type);
           } catch (error) {
             implementationFound = false;
           }
         }
         break;
       case "function":
-        implementation = this.options.webSocketServer.type;
+        implementation = /** @type {WebSocketServerConfiguration} */ (
+          this.options.webSocketServer
+        ).type;
         break;
       default:
         implementationFound = false;
@@ -1034,39 +1699,62 @@ class Server {
     return implementation;
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
   setupProgressPlugin() {
-    const { ProgressPlugin } = this.compiler.webpack || require("webpack");
-
-    new ProgressPlugin((percent, msg, addInfo, pluginName) => {
-      percent = Math.floor(percent * 100);
+    const { ProgressPlugin } =
+      /** @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");
+
+    new ProgressPlugin(
+      /**
+       * @param {number} percent
+       * @param {string} msg
+       * @param {string} addInfo
+       * @param {string} pluginName
+       */
+      (percent, msg, addInfo, pluginName) => {
+        percent = Math.floor(percent * 100);
 
-      if (percent === 100) {
-        msg = "Compilation completed";
-      }
+        if (percent === 100) {
+          msg = "Compilation completed";
+        }
 
-      if (addInfo) {
-        msg = `${msg} (${addInfo})`;
-      }
+        if (addInfo) {
+          msg = `${msg} (${addInfo})`;
+        }
 
-      if (this.webSocketServer) {
-        this.sendMessage(this.webSocketServer.clients, "progress-update", {
-          percent,
-          msg,
-          pluginName,
-        });
-      }
+        if (this.webSocketServer) {
+          this.sendMessage(this.webSocketServer.clients, "progress-update", {
+            percent,
+            msg,
+            pluginName,
+          });
+        }
 
-      if (this.server) {
-        this.server.emit("progress-update", { percent, msg, pluginName });
+        if (this.server) {
+          this.server.emit("progress-update", { percent, msg, pluginName });
+        }
       }
-    }).apply(this.compiler);
+    ).apply(this.compiler);
   }
 
+  /**
+   * @private
+   * @returns {Promise<void>}
+   */
   async initialize() {
     if (this.options.webSocketServer) {
-      const compilers = this.compiler.compilers || [this.compiler];
+      const compilers =
+        /** @type {MultiCompiler} */
+        (this.compiler).compilers || [this.compiler];
 
-      // eslint-disable-next-line no-shadow
       compilers.forEach((compiler) => {
         this.addAdditionalEntries(compiler);
 
@@ -1097,7 +1785,10 @@ class Server {
         }
       });
 
-      if (this.options.client && this.options.client.progress) {
+      if (
+        this.options.client &&
+        /** @type {ClientConfiguration} */ (this.options.client).progress
+      ) {
         this.setupProgressPlugin();
       }
     }
@@ -1109,7 +1800,8 @@ class Server {
     // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
     this.setupBuiltInRoutes();
     this.setupWatchFiles();
-    this.setupFeatures();
+    this.setupWatchStaticFiles();
+    this.setupMiddlewares();
     this.createServer();
 
     if (this.options.setupExitSignals) {
@@ -1117,15 +1809,10 @@ class Server {
 
       let needForceShutdown = false;
 
-      const exitProcess = () => {
-        // eslint-disable-next-line no-process-exit
-        process.exit();
-      };
-
       signals.forEach((signal) => {
-        process.on(signal, () => {
+        const listener = () => {
           if (needForceShutdown) {
-            exitProcess();
+            process.exit();
           }
 
           this.logger.info(
@@ -1136,65 +1823,125 @@ class Server {
 
           this.stopCallback(() => {
             if (typeof this.compiler.close === "function") {
-              this.compiler.close(exitProcess);
+              this.compiler.close(() => {
+                process.exit();
+              });
             } else {
-              exitProcess();
+              process.exit();
             }
           });
-        });
+        };
+
+        this.listeners.push({ name: signal, listener });
+
+        process.on(signal, listener);
       });
     }
 
     // Proxy WebSocket without the initial http request
     // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
-    // eslint-disable-next-line func-names
-    this.webSocketProxies.forEach(function (webSocketProxy) {
-      this.server.on("upgrade", webSocketProxy.upgrade);
+    /** @type {RequestHandler[]} */
+    (this.webSocketProxies).forEach((webSocketProxy) => {
+      /** @type {import("http").Server} */
+      (this.server).on(
+        "upgrade",
+        /** @type {RequestHandler & { upgrade: NonNullable<RequestHandler["upgrade"]> }} */
+        (webSocketProxy).upgrade
+      );
     }, this);
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
   setupApp() {
-    // Init express server
+    /** @type {import("express").Application | undefined}*/
     // eslint-disable-next-line new-cap
-    this.app = new express();
+    this.app = new /** @type {any} */ (express)();
   }
 
+  /**
+   * @private
+   * @param {Stats | MultiStats} statsObj
+   * @returns {StatsCompilation}
+   */
   getStats(statsObj) {
     const stats = Server.DEFAULT_STATS;
     const compilerOptions = this.getCompilerOptions();
 
+    // @ts-ignore
     if (compilerOptions.stats && compilerOptions.stats.warningsFilter) {
+      // @ts-ignore
       stats.warningsFilter = compilerOptions.stats.warningsFilter;
     }
 
     return statsObj.toJson(stats);
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
   setupHooks() {
     this.compiler.hooks.invalid.tap("webpack-dev-server", () => {
       if (this.webSocketServer) {
         this.sendMessage(this.webSocketServer.clients, "invalid");
       }
     });
-    this.compiler.hooks.done.tap("webpack-dev-server", (stats) => {
-      if (this.webSocketServer) {
-        this.sendStats(this.webSocketServer.clients, this.getStats(stats));
-      }
+    this.compiler.hooks.done.tap(
+      "webpack-dev-server",
+      /**
+       * @param {Stats | MultiStats} stats
+       */
+      (stats) => {
+        if (this.webSocketServer) {
+          this.sendStats(this.webSocketServer.clients, this.getStats(stats));
+        }
 
-      this.stats = stats;
-    });
+        /**
+         * @private
+         * @type {Stats | MultiStats}
+         */
+        this.stats = stats;
+      }
+    );
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
   setupHostHeaderCheck() {
-    this.app.all("*", (req, res, next) => {
-      if (this.checkHeader(req.headers, "host")) {
-        return next();
-      }
+    /** @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();
+        }
 
-      res.send("Invalid Host header");
-    });
+        res.send("Invalid Host header");
+      }
+    );
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
   setupDevMiddleware() {
     const webpackDevMiddleware = require("webpack-dev-middleware");
 
@@ -1205,445 +1952,616 @@ class Server {
     );
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
   setupBuiltInRoutes() {
     const { app, middleware } = this;
 
-    app.get("/__webpack_dev_server__/sockjs.bundle.js", (req, res) => {
-      res.setHeader("Content-Type", "application/javascript");
-
-      const { createReadStream } = fs;
-      const clientPath = path.join(__dirname, "..", "client");
-
-      createReadStream(
-        path.join(clientPath, "modules/sockjs-client/index.js")
-      ).pipe(res);
-    });
-
-    app.get("/webpack-dev-server/invalidate", (_req, res) => {
-      this.invalidate();
-
-      res.end();
-    });
+    /** @type {import("express").Application} */
+    (app).get(
+      "/__webpack_dev_server__/sockjs.bundle.js",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @returns {void}
+       */
+      (req, res) => {
+        res.setHeader("Content-Type", "application/javascript");
 
-    app.get("/webpack-dev-server", (req, res) => {
-      middleware.waitUntilValid((stats) => {
-        res.setHeader("Content-Type", "text/html");
-        res.write(
-          '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
-        );
+        const { createReadStream } = fs;
+        const clientPath = path.join(__dirname, "..", "client");
 
-        const statsForPrint =
-          typeof stats.stats !== "undefined"
-            ? stats.toJson().children
-            : [stats.toJson()];
+        createReadStream(
+          path.join(clientPath, "modules/sockjs-client/index.js")
+        ).pipe(res);
+      }
+    );
 
-        res.write(`<h1>Assets Report:</h1>`);
+    /** @type {import("express").Application} */
+    (app).get(
+      "/webpack-dev-server/invalidate",
+      /**
+       * @param {Request} _req
+       * @param {Response} res
+       * @returns {void}
+       */
+      (_req, res) => {
+        this.invalidate();
 
-        statsForPrint.forEach((item, index) => {
-          res.write("<div>");
+        res.end();
+      }
+    );
 
-          const name =
-            item.name || (stats.stats ? `unnamed[${index}]` : "unnamed");
+    /** @type {import("express").Application} */
+    (app).get(
+      "/webpack-dev-server",
+      /**
+       * @param {Request} req
+       * @param {Response} res
+       * @returns {void}
+       */
+      (req, res) => {
+        /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
+        (middleware).waitUntilValid((stats) => {
+          res.setHeader("Content-Type", "text/html");
+          res.write(
+            '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
+          );
 
-          res.write(`<h2>Compilation: ${name}</h2>`);
-          res.write("<ul>");
+          const statsForPrint =
+            typeof (/** @type {MultiStats} */ (stats).stats) !== "undefined"
+              ? /** @type {MultiStats} */ (stats).toJson().children
+              : [/** @type {Stats} */ (stats).toJson()];
 
-          const publicPath = item.publicPath === "auto" ? "" : item.publicPath;
+          res.write(`<h1>Assets Report:</h1>`);
 
-          for (const asset of item.assets) {
-            const assetName = asset.name;
-            const assetURL = `${publicPath}${assetName}`;
+          /**
+           * @type {StatsCompilation[]}
+           */
+          (statsForPrint).forEach((item, index) => {
+            res.write("<div>");
 
-            res.write(
-              `<li>
+            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;
+
+            for (const asset of /** @type {NonNullable<StatsCompilation["assets"]>} */ (
+              item.assets
+            )) {
+              const assetName = asset.name;
+              const assetURL = `${publicPath}${assetName}`;
+
+              res.write(
+                `<li>
               <strong><a href="${assetURL}" target="_blank">${assetName}</a></strong>
             </li>`
-            );
-          }
+              );
+            }
+
+            res.write("</ul>");
+            res.write("</div>");
+          });
 
-          res.write("</ul>");
-          res.write("</div>");
+          res.end("</body></html>");
         });
+      }
+    );
+  }
 
-        res.end("</body></html>");
+  /**
+   * @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);
+        }
       });
-    });
+    }
   }
 
-  setupCompressFeature() {
-    const compress = require("compression");
+  /**
+   * @private
+   * @returns {void}
+   */
+  setupWatchFiles() {
+    const { watchFiles } = this.options;
 
-    this.app.use(compress());
+    if (/** @type {WatchFiles[]} */ (watchFiles).length > 0) {
+      /** @type {WatchFiles[]} */
+      (watchFiles).forEach((item) => {
+        this.watchFiles(item.paths, item.options);
+      });
+    }
   }
 
-  setupProxyFeature() {
-    const { createProxyMiddleware } = require("http-proxy-middleware");
-
-    const getProxyMiddleware = (proxyConfig) => {
-      // It is possible to use the `bypass` method without a `target` or `router`.
-      // However, the proxy middleware has no use in this case, and will fail to instantiate.
-      if (proxyConfig.target) {
-        const context = proxyConfig.context || proxyConfig.path;
-
-        return createProxyMiddleware(context, proxyConfig);
-      }
-
-      if (proxyConfig.router) {
-        return createProxyMiddleware(proxyConfig);
-      }
-    };
+  /**
+   * @private
+   * @returns {void}
+   */
+  setupMiddlewares() {
     /**
-     * Assume a proxy configuration specified as:
-     * proxy: [
-     *   {
-     *     context: "value",
-     *     ...options,
-     *   },
-     *   // or:
-     *   function() {
-     *     return {
-     *       context: "context",
-     *       ...options,
-     *     };
-     *   }
-     * ]
+     * @type {Array<Middleware>}
      */
-    this.options.proxy.forEach((proxyConfigOrCallback) => {
-      let proxyMiddleware;
-
-      let proxyConfig =
-        typeof proxyConfigOrCallback === "function"
-          ? proxyConfigOrCallback()
-          : proxyConfigOrCallback;
-
-      proxyMiddleware = getProxyMiddleware(proxyConfig);
+    let middlewares = [];
 
-      if (proxyConfig.ws) {
-        this.webSocketProxies.push(proxyMiddleware);
-      }
+    // compress is placed last and uses unshift so that it will be the first middleware used
+    if (this.options.compress) {
+      const compression = require("compression");
 
-      const handle = async (req, res, next) => {
-        if (typeof proxyConfigOrCallback === "function") {
-          const newProxyConfig = proxyConfigOrCallback(req, res, next);
+      middlewares.push({ name: "compression", middleware: compression() });
+    }
 
-          if (newProxyConfig !== proxyConfig) {
-            proxyConfig = newProxyConfig;
-            proxyMiddleware = getProxyMiddleware(proxyConfig);
-          }
-        }
+    if (typeof this.options.onBeforeSetupMiddleware === "function") {
+      this.options.onBeforeSetupMiddleware(this);
+    }
 
-        // - Check if we have a bypass function defined
-        // - In case the bypass function is defined we'll retrieve the
-        // 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";
-        const bypassUrl = isByPassFuncDefined
-          ? await proxyConfig.bypass(req, res, proxyConfig)
-          : null;
-
-        if (typeof bypassUrl === "boolean") {
-          // skip the proxy
-          req.url = null;
-          next();
-        } else if (typeof bypassUrl === "string") {
-          // byPass to that url
-          req.url = bypassUrl;
-          next();
-        } else if (proxyMiddleware) {
-          return proxyMiddleware(req, res, next);
-        } else {
-          next();
-        }
-      };
+    if (typeof this.options.headers !== "undefined") {
+      middlewares.push({
+        name: "set-headers",
+        path: "*",
+        middleware: this.setHeaders.bind(this),
+      });
+    }
 
-      this.app.use(handle);
-      // Also forward error requests to the proxy so it can handle them.
-      this.app.use((error, req, res, next) => handle(req, res, next));
+    middlewares.push({
+      name: "webpack-dev-middleware",
+      middleware:
+        /** @type {import("webpack-dev-middleware").Middleware<Request, Response>}*/
+        (this.middleware),
     });
-  }
 
-  setupHistoryApiFallbackFeature() {
-    const { historyApiFallback } = this.options;
+    if (this.options.proxy) {
+      const { createProxyMiddleware } = require("http-proxy-middleware");
 
-    if (
-      typeof historyApiFallback.logger === "undefined" &&
-      !historyApiFallback.verbose
-    ) {
-      historyApiFallback.logger = this.logger.log.bind(
-        this.logger,
-        "[connect-history-api-fallback]"
-      );
-    }
+      /**
+       * @param {ProxyConfigArray} proxyConfig
+       * @returns {RequestHandler | undefined}
+       */
+      const getProxyMiddleware = (proxyConfig) => {
+        // It is possible to use the `bypass` method without a `target` or `router`.
+        // However, the proxy middleware has no use in this case, and will fail to instantiate.
+        if (proxyConfig.target) {
+          const context = proxyConfig.context || proxyConfig.path;
+
+          return createProxyMiddleware(
+            /** @type {string} */ (context),
+            proxyConfig
+          );
+        }
 
-    // Fall back to /index.html if nothing else matches.
-    this.app.use(require("connect-history-api-fallback")(historyApiFallback));
-  }
+        if (proxyConfig.router) {
+          return createProxyMiddleware(proxyConfig);
+        }
+      };
 
-  setupStaticFeature() {
-    this.options.static.forEach((staticOption) => {
-      staticOption.publicPath.forEach((publicPath) => {
-        this.app.use(
-          publicPath,
-          express.static(staticOption.directory, staticOption.staticOptions)
-        );
-      });
-    });
-  }
+      /**
+       * Assume a proxy configuration specified as:
+       * proxy: [
+       *   {
+       *     context: "value",
+       *     ...options,
+       *   },
+       *   // or:
+       *   function() {
+       *     return {
+       *       context: "context",
+       *       ...options,
+       *     };
+       *   }
+       * ]
+       */
+      /** @type {ProxyArray} */
+      (this.options.proxy).forEach(
+        /**
+         * @param {any} proxyConfigOrCallback
+         */
+        (proxyConfigOrCallback) => {
+          /**
+           * @type {RequestHandler}
+           */
+          let proxyMiddleware;
+
+          let proxyConfig =
+            typeof proxyConfigOrCallback === "function"
+              ? proxyConfigOrCallback()
+              : proxyConfigOrCallback;
+
+          proxyMiddleware =
+            /** @type {RequestHandler} */
+            (getProxyMiddleware(proxyConfig));
+
+          if (proxyConfig.ws) {
+            this.webSocketProxies.push(proxyMiddleware);
+          }
 
-  setupStaticServeIndexFeature() {
-    const serveIndex = require("serve-index");
+          /**
+           * @param {Request} req
+           * @param {Response} res
+           * @param {NextFunction} next
+           * @returns {Promise<void>}
+           */
+          const handler = async (req, res, next) => {
+            if (typeof proxyConfigOrCallback === "function") {
+              const newProxyConfig = proxyConfigOrCallback(req, res, next);
+
+              if (newProxyConfig !== proxyConfig) {
+                proxyConfig = newProxyConfig;
+                proxyMiddleware =
+                  /** @type {RequestHandler} */
+                  (getProxyMiddleware(proxyConfig));
+              }
+            }
 
-    this.options.static.forEach((staticOption) => {
-      staticOption.publicPath.forEach((publicPath) => {
-        if (staticOption.serveIndex) {
-          this.app.use(publicPath, (req, res, next) => {
-            // serve-index doesn't fallthrough non-get/head request to next middleware
-            if (req.method !== "GET" && req.method !== "HEAD") {
-              return next();
+            // - Check if we have a bypass function defined
+            // - In case the bypass function is defined we'll retrieve the
+            // 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";
+            const bypassUrl = isByPassFuncDefined
+              ? await proxyConfig.bypass(req, res, proxyConfig)
+              : null;
+
+            if (typeof bypassUrl === "boolean") {
+              // skip the proxy
+              // @ts-ignore
+              req.url = null;
+              next();
+            } else if (typeof bypassUrl === "string") {
+              // byPass to that url
+              req.url = bypassUrl;
+              next();
+            } else if (proxyMiddleware) {
+              return proxyMiddleware(req, res, next);
+            } else {
+              next();
             }
+          };
 
-            serveIndex(staticOption.directory, staticOption.serveIndex)(
-              req,
-              res,
-              next
-            );
+          middlewares.push({
+            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",
+            middleware:
+              /**
+               * @param {Error} error
+               * @param {Request} req
+               * @param {Response} res
+               * @param {NextFunction} next
+               * @returns {any}
+               */
+              (error, req, res, next) => handler(req, res, next),
           });
         }
-      });
-    });
-  }
-
-  setupStaticWatchFeature() {
-    this.options.static.forEach((staticOption) => {
-      if (staticOption.watch) {
-        this.watchFiles(staticOption.directory, staticOption.watch);
-      }
-    });
-  }
-
-  setupOnBeforeSetupMiddlewareFeature() {
-    this.options.onBeforeSetupMiddleware(this);
-  }
-
-  setupWatchFiles() {
-    const { watchFiles } = this.options;
+      );
 
-    if (watchFiles.length > 0) {
-      watchFiles.forEach((item) => {
-        this.watchFiles(item.paths, item.options);
+      middlewares.push({
+        name: "webpack-dev-middleware",
+        middleware:
+          /** @type {import("webpack-dev-middleware").Middleware<Request, Response>}*/
+          (this.middleware),
       });
     }
-  }
-
-  setupMiddleware() {
-    this.app.use(this.middleware);
-  }
-
-  setupOnAfterSetupMiddlewareFeature() {
-    this.options.onAfterSetupMiddleware(this);
-  }
 
-  setupHeadersFeature() {
-    this.app.all("*", this.setHeaders.bind(this));
-  }
-
-  setupMagicHtmlFeature() {
-    this.app.get("*", this.serveMagicHtml.bind(this));
-  }
-
-  setupFeatures() {
-    const features = {
-      compress: () => {
-        if (this.options.compress) {
-          this.setupCompressFeature();
-        }
-      },
-      proxy: () => {
-        if (this.options.proxy) {
-          this.setupProxyFeature();
-        }
-      },
-      historyApiFallback: () => {
-        if (this.options.historyApiFallback) {
-          this.setupHistoryApiFallbackFeature();
-        }
-      },
-      static: () => {
-        this.setupStaticFeature();
-      },
-      staticServeIndex: () => {
-        this.setupStaticServeIndexFeature();
-      },
-      staticWatch: () => {
-        this.setupStaticWatchFeature();
-      },
-      onBeforeSetupMiddleware: () => {
-        if (typeof this.options.onBeforeSetupMiddleware === "function") {
-          this.setupOnBeforeSetupMiddlewareFeature();
-        }
-      },
-      onAfterSetupMiddleware: () => {
-        if (typeof this.options.onAfterSetupMiddleware === "function") {
-          this.setupOnAfterSetupMiddlewareFeature();
-        }
-      },
-      middleware: () => {
-        // include our middleware to ensure
-        // it is able to handle '/index.html' request after redirect
-        this.setupMiddleware();
-      },
-      headers: () => {
-        this.setupHeadersFeature();
-      },
-      magicHtml: () => {
-        this.setupMagicHtmlFeature();
-      },
-    };
-
-    const runnableFeatures = [];
-
-    // compress is placed last and uses unshift so that it will be the first middleware used
-    if (this.options.compress) {
-      runnableFeatures.push("compress");
-    }
-
-    if (this.options.onBeforeSetupMiddleware) {
-      runnableFeatures.push("onBeforeSetupMiddleware");
+    if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
+      /** @type {NormalizedStatic[]} */
+      (this.options.static).forEach((staticOption) => {
+        staticOption.publicPath.forEach((publicPath) => {
+          middlewares.push({
+            name: "express-static",
+            path: publicPath,
+            middleware: express.static(
+              staticOption.directory,
+              staticOption.staticOptions
+            ),
+          });
+        });
+      });
     }
 
-    runnableFeatures.push("headers", "middleware");
+    if (this.options.historyApiFallback) {
+      const connectHistoryApiFallback = require("connect-history-api-fallback");
+      const { historyApiFallback } = this.options;
 
-    if (this.options.proxy) {
-      runnableFeatures.push("proxy", "middleware");
-    }
+      if (
+        typeof (
+          /** @type {ConnectHistoryApiFallbackOptions} */
+          (historyApiFallback).logger
+        ) === "undefined" &&
+        !(
+          /** @type {ConnectHistoryApiFallbackOptions} */
+          (historyApiFallback).verbose
+        )
+      ) {
+        // @ts-ignore
+        historyApiFallback.logger = this.logger.log.bind(
+          this.logger,
+          "[connect-history-api-fallback]"
+        );
+      }
 
-    if (this.options.static) {
-      runnableFeatures.push("static");
-    }
+      // Fall back to /index.html if nothing else matches.
+      middlewares.push({
+        name: "connect-history-api-fallback",
+        middleware: connectHistoryApiFallback(
+          /** @type {ConnectHistoryApiFallbackOptions} */
+          (historyApiFallback)
+        ),
+      });
 
-    if (this.options.historyApiFallback) {
-      runnableFeatures.push("historyApiFallback", "middleware");
+      // include our middleware to ensure
+      // 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),
+      });
 
-      if (this.options.static) {
-        runnableFeatures.push("static");
+      if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
+        /** @type {NormalizedStatic[]} */
+        (this.options.static).forEach((staticOption) => {
+          staticOption.publicPath.forEach((publicPath) => {
+            middlewares.push({
+              name: "express-static",
+              path: publicPath,
+              middleware: express.static(
+                staticOption.directory,
+                staticOption.staticOptions
+              ),
+            });
+          });
+        });
       }
     }
 
-    if (this.options.static) {
-      runnableFeatures.push("staticServeIndex", "staticWatch");
+    if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
+      const serveIndex = require("serve-index");
+
+      /** @type {NormalizedStatic[]} */
+      (this.options.static).forEach((staticOption) => {
+        staticOption.publicPath.forEach((publicPath) => {
+          if (staticOption.serveIndex) {
+            middlewares.push({
+              name: "serve-index",
+              path: publicPath,
+              /**
+               * @param {Request} req
+               * @param {Response} res
+               * @param {NextFunction} next
+               * @returns {void}
+               */
+              middleware: (req, res, next) => {
+                // serve-index doesn't fallthrough non-get/head request to next middleware
+                if (req.method !== "GET" && req.method !== "HEAD") {
+                  return next();
+                }
+
+                serveIndex(
+                  staticOption.directory,
+                  /** @type {ServeIndexOptions} */
+                  (staticOption.serveIndex)
+                )(req, res, next);
+              },
+            });
+          }
+        });
+      });
     }
 
     if (this.options.magicHtml) {
-      runnableFeatures.push("magicHtml");
+      middlewares.push({
+        name: "serve-magic-html",
+        middleware: this.serveMagicHtml.bind(this),
+      });
+    }
+
+    if (typeof this.options.onAfterSetupMiddleware === "function") {
+      this.options.onAfterSetupMiddleware(this);
     }
 
-    if (this.options.onAfterSetupMiddleware) {
-      runnableFeatures.push("onAfterSetupMiddleware");
+    if (typeof this.options.setupMiddlewares === "function") {
+      middlewares = this.options.setupMiddlewares(middlewares, this);
     }
 
-    runnableFeatures.forEach((feature) => {
-      features[feature]();
+    middlewares.forEach((middleware) => {
+      if (typeof middleware === "function") {
+        /** @type {import("express").Application} */
+        (this.app).use(middleware);
+      } else if (typeof middleware.path !== "undefined") {
+        /** @type {import("express").Application} */
+        (this.app).use(middleware.path, middleware.middleware);
+      } else {
+        /** @type {import("express").Application} */
+        (this.app).use(middleware.middleware);
+      }
     });
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
   createServer() {
-    if (this.options.https) {
-      if (this.options.http2) {
-        // TODO: we need to replace spdy with http2 which is an internal module
-        this.server = require("spdy").createServer(
-          {
-            ...this.options.https,
-            spdy: {
-              protocols: ["h2", "http/1.1"],
-            },
-          },
-          this.app
-        );
-      } else {
-        const https = require("https");
-
-        this.server = https.createServer(this.options.https, this.app);
-      }
-    } else {
-      const http = require("http");
+    const { type, options } = /** @type {ServerConfiguration} */ (
+      this.options.server
+    );
 
-      this.server = http.createServer(this.app);
-    }
+    /** @type {import("http").Server | undefined | null} */
+    // eslint-disable-next-line import/no-dynamic-require
+    this.server = require(/** @type {string} */ (type)).createServer(
+      options,
+      this.app
+    );
 
-    this.server.on("connection", (socket) => {
-      // Add socket to list
-      this.sockets.push(socket);
+    /** @type {import("http").Server} */
+    (this.server).on(
+      "connection",
+      /**
+       * @param {Socket} socket
+       */
+      (socket) => {
+        // Add socket to list
+        this.sockets.push(socket);
 
-      socket.once("close", () => {
-        // Remove socket from list
-        this.sockets.splice(this.sockets.indexOf(socket), 1);
-      });
-    });
+        socket.once("close", () => {
+          // Remove socket from list
+          this.sockets.splice(this.sockets.indexOf(socket), 1);
+        });
+      }
+    );
 
-    this.server.on("error", (error) => {
-      throw error;
-    });
+    /** @type {import("http").Server} */
+    (this.server).on(
+      "error",
+      /**
+       * @param {Error} error
+       */
+      (error) => {
+        throw error;
+      }
+    );
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
+  // TODO: remove `--web-socket-server` in favor of `--web-socket-server-type`
   createWebSocketServer() {
-    this.webSocketServer = new (this.getServerTransport())(this);
-    this.webSocketServer.implementation.on("connection", (client, request) => {
-      const headers =
-        // eslint-disable-next-line no-nested-ternary
-        typeof request !== "undefined"
-          ? request.headers
-          : typeof client.headers !== "undefined"
-          ? client.headers
-          : // eslint-disable-next-line no-undefined
-            undefined;
-
-      if (!headers) {
-        this.logger.warn(
-          'webSocketServer implementation must pass headers for the "connection" event'
-        );
-      }
+    /** @type {WebSocketServerImplementation | undefined | null} */
+    this.webSocketServer = new /** @type {any} */ (this.getServerTransport())(
+      this
+    );
+    /** @type {WebSocketServerImplementation} */
+    (this.webSocketServer).implementation.on(
+      "connection",
+      /**
+       * @param {ClientConnection} client
+       * @param {IncomingMessage} request
+       */
+      (client, request) => {
+        /** @type {{ [key: string]: string | undefined } | undefined} */
+        const headers =
+          // eslint-disable-next-line no-nested-ternary
+          typeof request !== "undefined"
+            ? /** @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;
+
+        if (!headers) {
+          this.logger.warn(
+            'webSocketServer implementation must pass headers for the "connection" event'
+          );
+        }
 
-      if (
-        !headers ||
-        !this.checkHeader(headers, "host") ||
-        !this.checkHeader(headers, "origin")
-      ) {
-        this.sendMessage([client], "error", "Invalid Host/Origin header");
+        if (
+          !headers ||
+          !this.checkHeader(headers, "host") ||
+          !this.checkHeader(headers, "origin")
+        ) {
+          this.sendMessage([client], "error", "Invalid Host/Origin header");
 
-        client.terminate();
+          // With https enabled, the sendMessage above is encrypted asynchronously so not yet sent
+          // Terminate would prevent it sending, so use close to allow it to be sent
+          client.close();
 
-        return;
-      }
+          return;
+        }
 
-      if (this.options.hot === true || this.options.hot === "only") {
-        this.sendMessage([client], "hot");
-      }
+        if (this.options.hot === true || this.options.hot === "only") {
+          this.sendMessage([client], "hot");
+        }
 
-      if (this.options.liveReload) {
-        this.sendMessage([client], "liveReload");
-      }
+        if (this.options.liveReload) {
+          this.sendMessage([client], "liveReload");
+        }
 
-      if (this.options.client && this.options.client.progress) {
-        this.sendMessage([client], "progress", this.options.client.progress);
-      }
+        if (
+          this.options.client &&
+          /** @type {ClientConfiguration} */
+          (this.options.client).progress
+        ) {
+          this.sendMessage(
+            [client],
+            "progress",
+            /** @type {ClientConfiguration} */
+            (this.options.client).progress
+          );
+        }
 
-      if (this.options.client && this.options.client.overlay) {
-        this.sendMessage([client], "overlay", this.options.client.overlay);
-      }
+        if (
+          this.options.client &&
+          /** @type {ClientConfiguration} */ (this.options.client).reconnect
+        ) {
+          this.sendMessage(
+            [client],
+            "reconnect",
+            /** @type {ClientConfiguration} */
+            (this.options.client).reconnect
+          );
+        }
 
-      if (!this.stats) {
-        return;
-      }
+        if (
+          this.options.client &&
+          /** @type {ClientConfiguration} */
+          (this.options.client).overlay
+        ) {
+          this.sendMessage(
+            [client],
+            "overlay",
+            /** @type {ClientConfiguration} */
+            (this.options.client).overlay
+          );
+        }
 
-      this.sendStats([client], this.getStats(this.stats), true);
-    });
+        if (!this.stats) {
+          return;
+        }
+
+        this.sendStats([client], this.getStats(this.stats), true);
+      }
+    );
   }
 
+  /**
+   * @private
+   * @param {string} defaultOpenTarget
+   * @returns {void}
+   */
   openBrowser(defaultOpenTarget) {
     const open = require("open");
 
     Promise.all(
-      this.options.open.map((item) => {
+      /** @type {NormalizedOpen[]} */
+      (this.options.open).map((item) => {
+        /**
+         * @type {string}
+         */
         let openTarget;
 
         if (item.target === "<url>") {
@@ -1657,13 +2575,17 @@ class Server {
         return open(openTarget, item.options).catch(() => {
           this.logger.warn(
             `Unable to open "${openTarget}" page${
-              // eslint-disable-next-line no-nested-ternary
               item.options.app
-                ? ` in "${item.options.app.name}" app${
-                    item.options.app.arguments
-                      ? ` with "${item.options.app.arguments.join(
-                          " "
-                        )}" arguments`
+                ? ` in "${
+                    /** @type {import("open").App} */
+                    (item.options.app).name
+                  }" app${
+                    /** @type {import("open").App} */
+                    (item.options.app).arguments
+                      ? ` with "${
+                          /** @type {import("open").App} */
+                          (item.options.app).arguments.join(" ")
+                        }" arguments`
                       : ""
                   }`
                 : ""
@@ -1674,35 +2596,68 @@ class Server {
     );
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
   runBonjour() {
-    const bonjour = require("bonjour")();
-
-    bonjour.publish({
+    /**
+     * @private
+     * @type {import("bonjour").Bonjour | undefined}
+     */
+    this.bonjour = require("bonjour")();
+    this.bonjour.publish({
       name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
-      port: this.options.port,
-      type: this.options.https ? "https" : "http",
+      port: /** @type {number} */ (this.options.port),
+      type:
+        /** @type {ServerConfiguration} */
+        (this.options.server).type === "http" ? "http" : "https",
       subtypes: ["webpack"],
-      ...this.options.bonjour,
+      .../** @type {BonjourOptions} */ (this.options.bonjour),
     });
+  }
 
-    process.on("exit", () => {
-      bonjour.unpublishAll(() => {
-        bonjour.destroy();
-      });
+  /**
+   * @private
+   * @returns {void}
+   */
+  stopBonjour(callback = () => {}) {
+    /** @type {Bonjour} */
+    (this.bonjour).unpublishAll(() => {
+      /** @type {Bonjour} */
+      (this.bonjour).destroy();
+
+      if (callback) {
+        callback();
+      }
     });
   }
 
+  /**
+   * @private
+   * @returns {void}
+   */
   logStatus() {
     const { isColorSupported, cyan, red } = require("colorette");
 
+    /**
+     * @param {Compiler["options"]} compilerOptions
+     * @returns {boolean}
+     */
     const getColorsOption = (compilerOptions) => {
+      /**
+       * @type {boolean}
+       */
       let colorsEnabled;
 
       if (
         compilerOptions.stats &&
-        typeof compilerOptions.stats.colors !== "undefined"
+        typeof (/** @type {StatsOptions} */ (compilerOptions.stats).colors) !==
+          "undefined"
       ) {
-        colorsEnabled = compilerOptions.stats;
+        colorsEnabled =
+          /** @type {boolean} */
+          (/** @type {StatsOptions} */ (compilerOptions.stats).colors);
       } else {
         colorsEnabled = isColorSupported;
       }
@@ -1711,6 +2666,11 @@ class Server {
     };
 
     const colors = {
+      /**
+       * @param {boolean} useColor
+       * @param {string} msg
+       * @returns {string}
+       */
       info(useColor, msg) {
         if (useColor) {
           return cyan(msg);
@@ -1718,6 +2678,11 @@ class Server {
 
         return msg;
       },
+      /**
+       * @param {boolean} useColor
+       * @param {string} msg
+       * @returns {string}
+       */
       error(useColor, msg) {
         if (useColor) {
           return red(msg);
@@ -1729,10 +2694,26 @@ class Server {
     const useColor = getColorsOption(this.getCompilerOptions());
 
     if (this.options.ipc) {
-      this.logger.info(`Project is running at: "${this.server.address()}"`);
+      this.logger.info(
+        `Project is running at: "${
+          /** @type {import("http").Server} */
+          (this.server).address()
+        }"`
+      );
     } else {
-      const protocol = this.options.https ? "https" : "http";
-      const { address, port } = this.server.address();
+      const protocol =
+        /** @type {ServerConfiguration} */
+        (this.options.server).type === "http" ? "http" : "https";
+      const { address, port } =
+        /** @type {import("net").AddressInfo} */
+        (
+          /** @type {import("http").Server} */
+          (this.server).address()
+        );
+      /**
+       * @param {string} newHostname
+       * @returns {string}
+       */
       const prettyPrintURL = (newHostname) =>
         url.format({ protocol, hostname: newHostname, port, pathname: "/" });
 
@@ -1766,13 +2747,13 @@ class Server {
       if (parsedIP.range() === "unspecified") {
         localhost = prettyPrintURL("localhost");
 
-        const networkIPv4 = internalIp.v4.sync();
+        const networkIPv4 = Server.internalIPSync("v4");
 
         if (networkIPv4) {
           networkUrlIPv4 = prettyPrintURL(networkIPv4);
         }
 
-        const networkIPv6 = internalIp.v6.sync();
+        const networkIPv6 = Server.internalIPSync("v6");
 
         if (networkIPv6) {
           networkUrlIPv6 = prettyPrintURL(networkIPv6);
@@ -1785,8 +2766,13 @@ class Server {
         }
       } else {
         networkUrlIPv4 =
-          parsedIP.kind() === "ipv6" && parsedIP.isIPv4MappedAddress()
-            ? prettyPrintURL(parsedIP.toIPv4Address().toString())
+          parsedIP.kind() === "ipv6" &&
+          /** @type {IPv6} */
+          (parsedIP).isIPv4MappedAddress()
+            ? prettyPrintURL(
+                /** @type {IPv6} */
+                (parsedIP).toIPv4Address().toString()
+              )
             : prettyPrintURL(address);
 
         if (parsedIP.kind() === "ipv6") {
@@ -1801,10 +2787,19 @@ class Server {
       }
 
       if (localhost || loopbackIPv4 || loopbackIPv6) {
-        const loopbacks = []
-          .concat(localhost ? [colors.info(useColor, localhost)] : [])
-          .concat(loopbackIPv4 ? [colors.info(useColor, loopbackIPv4)] : [])
-          .concat(loopbackIPv6 ? [colors.info(useColor, loopbackIPv6)] : []);
+        const loopbacks = [];
+
+        if (localhost) {
+          loopbacks.push([colors.info(useColor, localhost)]);
+        }
+
+        if (loopbackIPv4) {
+          loopbacks.push([colors.info(useColor, loopbackIPv4)]);
+        }
+
+        if (loopbackIPv6) {
+          loopbacks.push([colors.info(useColor, loopbackIPv6)]);
+        }
 
         this.logger.info(`Loopback: ${loopbacks.join(", ")}`);
       }
@@ -1821,18 +2816,19 @@ class Server {
         );
       }
 
-      if (this.options.open.length > 0) {
+      if (/** @type {NormalizedOpen[]} */ (this.options.open).length > 0) {
         const openTarget = prettyPrintURL(this.options.host || "localhost");
 
         this.openBrowser(openTarget);
       }
     }
 
-    if (this.options.static && this.options.static.length > 0) {
+    if (/** @type {NormalizedStatic[]} */ (this.options.static).length > 0) {
       this.logger.info(
         `Content not from webpack is served from '${colors.info(
           useColor,
-          this.options.static
+          /** @type {NormalizedStatic[]} */
+          (this.options.static)
             .map((staticOption) => staticOption.directory)
             .join(", ")
         )}' directory`
@@ -1843,14 +2839,21 @@ class Server {
       this.logger.info(
         `404s will fallback to '${colors.info(
           useColor,
-          this.options.historyApiFallback.index || "/index.html"
+          /** @type {ConnectHistoryApiFallbackOptions} */ (
+            this.options.historyApiFallback
+          ).index || "/index.html"
         )}'`
       );
     }
 
     if (this.options.bonjour) {
       const bonjourProtocol =
-        this.options.bonjour.type || this.options.https ? "https" : "http";
+        /** @type {BonjourOptions} */
+        (this.options.bonjour).type ||
+        /** @type {ServerConfiguration} */
+        (this.options.server).type === "http"
+          ? "http"
+          : "https";
 
       this.logger.info(
         `Broadcasting "${bonjourProtocol}" with subtype of "webpack" via ZeroConf DNS (Bonjour)`
@@ -1858,32 +2861,59 @@ class Server {
     }
   }
 
+  /**
+   * @private
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   */
   setHeaders(req, res, next) {
     let { headers } = this.options;
 
     if (headers) {
       if (typeof headers === "function") {
-        headers = headers(req, res, this.middleware.context);
+        headers = headers(
+          req,
+          res,
+          /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
+          (this.middleware).context
+        );
       }
 
+      /**
+       * @type {{key: string, value: string}[]}
+       */
       const allHeaders = [];
 
       if (!Array.isArray(headers)) {
         // eslint-disable-next-line guard-for-in
         for (const name in headers) {
+          // @ts-ignore
           allHeaders.push({ key: name, value: headers[name] });
         }
+
         headers = allHeaders;
       }
 
-      headers.forEach((header) => {
-        res.setHeader(header.key, header.value);
-      });
+      headers.forEach(
+        /**
+         * @param {{key: string, value: any}} header
+         */
+        (header) => {
+          res.setHeader(header.key, header.value);
+        }
+      );
     }
 
     next();
   }
 
+  /**
+   * @private
+   * @param {{ [key: string]: string | undefined }} headers
+   * @param {string} headerToCheck
+   * @returns {boolean}
+   */
   checkHeader(headers, headerToCheck) {
     // allow user to opt out of this security check, at their own risk
     // by explicitly enabling allowedHosts
@@ -1920,8 +2950,8 @@ class Server {
     // always allow localhost host, for convenience (hostname === 'localhost')
     // allow hostname of listening address  (hostname === this.options.host)
     const isValidHostname =
-      ipaddr.IPv4.isValid(hostname) ||
-      ipaddr.IPv6.isValid(hostname) ||
+      (hostname !== null && ipaddr.IPv4.isValid(hostname)) ||
+      (hostname !== null && ipaddr.IPv6.isValid(hostname)) ||
       hostname === "localhost" ||
       hostname === this.options.host;
 
@@ -1948,7 +2978,7 @@ class Server {
           // "*.example.com"  (hostname.endsWith(allowedHost))
           if (
             hostname === allowedHost.substring(1) ||
-            hostname.endsWith(allowedHost)
+            /** @type {string} */ (hostname).endsWith(allowedHost)
           ) {
             return true;
           }
@@ -1959,41 +2989,73 @@ class Server {
     // Also allow if `client.webSocketURL.hostname` provided
     if (
       this.options.client &&
-      typeof this.options.client.webSocketURL !== "undefined"
+      typeof (
+        /** @type {ClientConfiguration} */ (this.options.client).webSocketURL
+      ) !== "undefined"
     ) {
-      return this.options.client.webSocketURL.hostname === hostname;
+      return (
+        /** @type {WebSocketURL} */
+        (/** @type {ClientConfiguration} */ (this.options.client).webSocketURL)
+          .hostname === hostname
+      );
     }
 
     // disallow
     return false;
   }
 
+  /**
+   * @param {ClientConnection[]} clients
+   * @param {string} type
+   * @param {any} [data]
+   * @param {any} [params]
+   */
   // eslint-disable-next-line class-methods-use-this
-  sendMessage(clients, type, data) {
+  sendMessage(clients, type, data, params) {
     for (const client of clients) {
       // `sockjs` uses `1` to indicate client is ready to accept data
       // `ws` uses `WebSocket.OPEN`, but it is mean `1` too
       if (client.readyState === 1) {
-        client.send(JSON.stringify({ type, data }));
+        client.send(JSON.stringify({ type, data, params }));
       }
     }
   }
 
+  /**
+   * @private
+   * @param {Request} req
+   * @param {Response} res
+   * @param {NextFunction} next
+   * @returns {void}
+   */
   serveMagicHtml(req, res, next) {
-    this.middleware.waitUntilValid(() => {
+    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 = this.middleware.getFilenameFromUrl(`${_path}.js`);
-        const isFile = this.middleware.context.outputFileSystem
-          .statSync(filename)
-          .isFile();
+        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>`;
 
@@ -2005,6 +3067,12 @@ class Server {
   }
 
   // Send stats to a socket or multiple sockets
+  /**
+   * @private
+   * @param {ClientConnection[]} clients
+   * @param {StatsCompilation} stats
+   * @param {boolean} [force]
+   */
   sendStats(clients, stats, force) {
     const shouldEmit =
       !force &&
@@ -2022,12 +3090,33 @@ class Server {
     this.currentHash = stats.hash;
     this.sendMessage(clients, "hash", stats.hash);
 
-    if (stats.errors.length > 0 || stats.warnings.length > 0) {
-      if (stats.warnings.length > 0) {
-        this.sendMessage(clients, "warnings", stats.warnings);
+    if (
+      /** @type {NonNullable<StatsCompilation["errors"]>} */
+      (stats.errors).length > 0 ||
+      /** @type {NonNullable<StatsCompilation["warnings"]>} */
+      (stats.warnings).length > 0
+    ) {
+      const hasErrors =
+        /** @type {NonNullable<StatsCompilation["errors"]>} */
+        (stats.errors).length > 0;
+
+      if (
+        /** @type {NonNullable<StatsCompilation["warnings"]>} */
+        (stats.warnings).length > 0
+      ) {
+        let params;
+
+        if (hasErrors) {
+          params = { preventReloading: true };
+        }
+
+        this.sendMessage(clients, "warnings", stats.warnings, params);
       }
 
-      if (stats.errors.length > 0) {
+      if (
+        /** @type {NonNullable<StatsCompilation["errors"]>} */ (stats.errors)
+          .length > 0
+      ) {
         this.sendMessage(clients, "errors", stats.errors);
       }
     } else {
@@ -2035,38 +3124,13 @@ class Server {
     }
   }
 
+  /**
+   * @param {string | string[]} watchPath
+   * @param {WatchOptions} [watchOptions]
+   */
   watchFiles(watchPath, watchOptions) {
-    // duplicate the same massaging of options that watchpack performs
-    // https://github.com/webpack/watchpack/blob/master/lib/DirectoryWatcher.js#L49
-    // this isn't an elegant solution, but we'll improve it in the future
-    // eslint-disable-next-line no-undefined
-    const usePolling =
-      typeof watchOptions.usePolling !== "undefined"
-        ? watchOptions.usePolling
-        : Boolean(watchOptions.poll);
-    const interval =
-      // eslint-disable-next-line no-nested-ternary
-      typeof watchOptions.interval !== "undefined"
-        ? watchOptions.interval
-        : typeof watchOptions.poll === "number"
-        ? watchOptions.poll
-        : // eslint-disable-next-line no-undefined
-          undefined;
-
-    const finalWatchOptions = {
-      ignoreInitial: true,
-      persistent: true,
-      followSymlinks: false,
-      atomic: false,
-      alwaysStat: true,
-      ignorePermissionErrors: true,
-      ignored: watchOptions.ignored,
-      usePolling,
-      interval,
-    };
-
     const chokidar = require("chokidar");
-    const watcher = chokidar.watch(watchPath, finalWatchOptions);
+    const watcher = chokidar.watch(watchPath, watchOptions);
 
     // disabling refreshing on changing the content
     if (this.options.liveReload) {
@@ -2084,44 +3148,65 @@ class Server {
     this.staticWatchers.push(watcher);
   }
 
-  invalidate(callback) {
+  /**
+   * @param {import("webpack-dev-middleware").Callback} [callback]
+   */
+  invalidate(callback = () => {}) {
     if (this.middleware) {
       this.middleware.invalidate(callback);
     }
   }
 
+  /**
+   * @returns {Promise<void>}
+   */
   async start() {
     await this.normalizeOptions();
 
     if (this.options.ipc) {
-      await new Promise((resolve, reject) => {
-        const net = require("net");
-        const socket = new net.Socket();
-
-        socket.on("error", (error) => {
-          if (error.code === "ECONNREFUSED") {
-            // No other server listening on this socket so it can be safely removed
-            fs.unlinkSync(this.options.ipc);
-
-            resolve();
+      await /** @type {Promise<void>} */ (
+        new Promise((resolve, reject) => {
+          const net = require("net");
+          const socket = new net.Socket();
+
+          socket.on(
+            "error",
+            /**
+             * @param {Error & { code?: string }} error
+             */
+            (error) => {
+              if (error.code === "ECONNREFUSED") {
+                // No other server listening on this socket so it can be safely removed
+                fs.unlinkSync(/** @type {string} */ (this.options.ipc));
+
+                resolve();
+
+                return;
+              } else if (error.code === "ENOENT") {
+                resolve();
+
+                return;
+              }
 
-            return;
-          } else if (error.code === "ENOENT") {
-            resolve();
-
-            return;
-          }
-
-          reject(error);
-        });
+              reject(error);
+            }
+          );
 
-        socket.connect({ path: this.options.ipc }, () => {
-          throw new Error(`IPC "${this.options.ipc}" is already used`);
-        });
-      });
+          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(this.options.host);
-      this.options.port = await Server.getFreePort(this.options.port);
+      this.options.host = await Server.getHostname(
+        /** @type {Host} */ (this.options.host)
+      );
+      this.options.port = await Server.getFreePort(
+        /** @type {Port} */ (this.options.port)
+      );
     }
 
     await this.initialize();
@@ -2130,17 +3215,23 @@ class Server {
       ? { path: this.options.ipc }
       : { host: this.options.host, port: this.options.port };
 
-    await new Promise((resolve) => {
-      this.server.listen(listenOptions, () => {
-        resolve();
-      });
-    });
+    await /** @type {Promise<void>} */ (
+      new Promise((resolve) => {
+        /** @type {import("http").Server} */
+        (this.server).listen(listenOptions, () => {
+          resolve();
+        });
+      })
+    );
 
     if (this.options.ipc) {
       // chmod 666 (rw rw rw)
       const READ_WRITE = 438;
 
-      await fs.promises.chmod(this.options.ipc, READ_WRITE);
+      await fs.promises.chmod(
+        /** @type {string} */ (this.options.ipc),
+        READ_WRITE
+      );
     }
 
     if (this.options.webSocketServer) {
@@ -2158,11 +3249,29 @@ class Server {
     }
   }
 
-  startCallback(callback) {
-    this.start().then(() => callback(null), callback);
+  /**
+   * @param {(err?: Error) => void} [callback]
+   */
+  startCallback(callback = () => {}) {
+    this.start()
+      .then(() => callback(), callback)
+      .catch(callback);
   }
 
+  /**
+   * @returns {Promise<void>}
+   */
   async stop() {
+    if (this.bonjour) {
+      await /** @type {Promise<void>} */ (
+        new Promise((resolve) => {
+          this.stopBonjour(() => {
+            resolve();
+          });
+        })
+      );
+    }
+
     this.webSocketProxies = [];
 
     await Promise.all(this.staticWatchers.map((watcher) => watcher.close()));
@@ -2170,68 +3279,95 @@ class Server {
     this.staticWatchers = [];
 
     if (this.webSocketServer) {
-      await new Promise((resolve) => {
-        this.webSocketServer.implementation.close(() => {
-          this.webSocketServer = null;
+      await /** @type {Promise<void>} */ (
+        new Promise((resolve) => {
+          /** @type {WebSocketServerImplementation} */
+          (this.webSocketServer).implementation.close(() => {
+            this.webSocketServer = null;
 
-          resolve();
-        });
+            resolve();
+          });
 
-        for (const client of this.webSocketServer.clients) {
-          client.terminate();
-        }
+          for (const client of /** @type {WebSocketServerImplementation} */ (
+            this.webSocketServer
+          ).clients) {
+            client.terminate();
+          }
 
-        this.webSocketServer.clients = [];
-      });
+          /** @type {WebSocketServerImplementation} */
+          (this.webSocketServer).clients = [];
+        })
+      );
     }
 
     if (this.server) {
-      await new Promise((resolve) => {
-        this.server.close(() => {
-          this.server = null;
+      await /** @type {Promise<void>} */ (
+        new Promise((resolve) => {
+          /** @type {import("http").Server} */
+          (this.server).close(() => {
+            this.server = null;
 
-          resolve();
-        });
+            resolve();
+          });
 
-        for (const socket of this.sockets) {
-          socket.destroy();
-        }
+          for (const socket of this.sockets) {
+            socket.destroy();
+          }
 
-        this.sockets = [];
-      });
+          this.sockets = [];
+        })
+      );
 
       if (this.middleware) {
-        await new Promise((resolve, reject) => {
-          this.middleware.close((error) => {
-            if (error) {
-              reject(error);
-
-              return;
-            }
-
-            resolve();
-          });
-        });
+        await /** @type {Promise<void>} */ (
+          new Promise((resolve, reject) => {
+            /** @type {import("webpack-dev-middleware").API<Request, Response>}*/
+            (this.middleware).close((error) => {
+              if (error) {
+                reject(error);
+
+                return;
+              }
+
+              resolve();
+            });
+          })
+        );
 
         this.middleware = null;
       }
     }
+
+    // We add listeners to signals when creating a new Server instance
+    // So ensure they are removed to prevent EventEmitter memory leak warnings
+    for (const item of this.listeners) {
+      process.removeListener(item.name, item.listener);
+    }
   }
 
-  stopCallback(callback) {
-    this.stop().then(() => callback(null), callback);
+  /**
+   * @param {(err?: Error) => void} [callback]
+   */
+  stopCallback(callback = () => {}) {
+    this.stop()
+      .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 async 'start' or 'startCallback' methods.",
+      "'listen' is deprecated. Please use the async 'start' or 'startCallback' method.",
       "DEP_WEBPACK_DEV_SERVER_LISTEN"
     )();
 
-    this.logger = this.compiler.getInfrastructureLogger("webpack-dev-server");
-
     if (typeof port === "function") {
       fn = port;
     }
@@ -2268,7 +3404,7 @@ class Server {
       this.options.host = hostname;
     }
 
-    return this.start()
+    this.start()
       .then(() => {
         if (fn) {
           fn.call(this.server);
@@ -2282,18 +3418,22 @@ class Server {
       });
   }
 
+  /**
+   * @param {(err?: Error) => void} [callback]
+   * @returns {void}
+   */
   // TODO remove in the next major release
   close(callback) {
     util.deprecate(
       () => {},
-      "'close' is deprecated. Please use async 'stop' or 'stopCallback' methods.",
+      "'close' is deprecated. Please use the async 'stop' or 'stopCallback' method.",
       "DEP_WEBPACK_DEV_SERVER_CLOSE"
     )();
 
-    return this.stop()
+    this.stop()
       .then(() => {
         if (callback) {
-          callback(null);
+          callback();
         }
       })
       .catch((error) => {
@@ -2304,48 +3444,4 @@ class Server {
   }
 }
 
-const mergeExports = (obj, exports) => {
-  const descriptors = Object.getOwnPropertyDescriptors(exports);
-
-  for (const name of Object.keys(descriptors)) {
-    const descriptor = descriptors[name];
-
-    if (descriptor.get) {
-      const fn = descriptor.get;
-
-      Object.defineProperty(obj, name, {
-        configurable: false,
-        enumerable: true,
-        get: fn,
-      });
-    } else if (typeof descriptor.value === "object") {
-      Object.defineProperty(obj, name, {
-        configurable: false,
-        enumerable: true,
-        writable: false,
-        value: mergeExports({}, descriptor.value),
-      });
-    } else {
-      throw new Error(
-        "Exposed values must be either a getter or an nested object"
-      );
-    }
-  }
-
-  return Object.freeze(obj);
-};
-
-module.exports = mergeExports(Server, {
-  get schema() {
-    return schema;
-  },
-  // TODO compatibility with webpack v4, remove it after drop
-  cli: {
-    get getArguments() {
-      return () => require("../bin/cli-flags");
-    },
-    get processArguments() {
-      return require("../bin/process-arguments");
-    },
-  },
-});
+module.exports = Server;