webpack-dev-server 4.0.0-beta.2 → 4.0.0

package/lib/Server.js

@@ -1,108 +1,745 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const url = require('url');
-const http = require('http');
-const https = require('https');
-const ipaddr = require('ipaddr.js');
-const internalIp = require('internal-ip');
-const killable = require('killable');
-const chokidar = require('chokidar');
-const express = require('express');
-const { createProxyMiddleware } = require('http-proxy-middleware');
-const historyApiFallback = require('connect-history-api-fallback');
-const compress = require('compression');
-const serveIndex = require('serve-index');
-const webpack = require('webpack');
-const webpackDevMiddleware = require('webpack-dev-middleware');
-const getFilenameFromUrl = require('webpack-dev-middleware/dist/utils/getFilenameFromUrl')
-  .default;
-const { validate } = require('schema-utils');
-const normalizeOptions = require('./utils/normalizeOptions');
-const updateCompiler = require('./utils/updateCompiler');
-const getCertificate = require('./utils/getCertificate');
-const colors = require('./utils/colors');
-const runOpen = require('./utils/runOpen');
-const runBonjour = require('./utils/runBonjour');
-const routes = require('./utils/routes');
-const getSocketServerImplementation = require('./utils/getSocketServerImplementation');
-const getCompilerConfigArray = require('./utils/getCompilerConfigArray');
-const getStatsOption = require('./utils/getStatsOption');
-const getColorsOption = require('./utils/getColorsOption');
-const setupExitSignals = require('./utils/setupExitSignals');
-const findPort = require('./utils/findPort');
-const schema = require('./options.json');
+"use strict";
+
+const os = require("os");
+const path = require("path");
+const url = require("url");
+const util = require("util");
+const fs = require("graceful-fs");
+const ipaddr = require("ipaddr.js");
+const internalIp = require("internal-ip");
+const express = require("express");
+const { validate } = require("schema-utils");
+const schema = require("./options.json");
 
 if (!process.env.WEBPACK_SERVE) {
   process.env.WEBPACK_SERVE = true;
 }
 
 class Server {
-  constructor(compiler, options = {}) {
-    validate(schema, options, 'webpack Dev Server');
+  constructor(options = {}, compiler) {
+    // TODO: remove this after plugin support is published
+    if (options.hooks) {
+      util.deprecate(
+        () => {},
+        "Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument.",
+        "DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR"
+      )();
+
+      [options = {}, compiler] = [compiler, options];
+    }
+
+    validate(schema, options, "webpack Dev Server");
 
-    this.compiler = compiler;
     this.options = options;
-    this.logger = this.compiler.getInfrastructureLogger('webpack-dev-server');
-    this.sockets = [];
     this.staticWatchers = [];
     // Keep track of websocket proxies for external websocket upgrade.
-    this.websocketProxies = [];
-    // this value of ws can be overwritten for tests
-    this.wsHeartbeatInterval = 30000;
+    this.webSocketProxies = [];
+    this.sockets = [];
+    this.compiler = compiler;
+  }
+
+  static get DEFAULT_STATS() {
+    return {
+      all: false,
+      hash: true,
+      assets: true,
+      warnings: true,
+      errors: true,
+      errorDetails: false,
+    };
+  }
 
-    normalizeOptions(this.compiler, this.options);
-    updateCompiler(this.compiler, this.options);
+  // eslint-disable-next-line class-methods-use-this
+  static isAbsoluteURL(URL) {
+    // Don't match Windows paths `c:\`
+    if (/^[a-zA-Z]:\\/.test(URL)) {
+      return false;
+    }
 
-    this.SocketServerImplementation = getSocketServerImplementation(
-      this.options
-    );
+    // Scheme: https://tools.ietf.org/html/rfc3986#section-3.1
+    // Absolute URL: https://tools.ietf.org/html/rfc3986#section-4.3
+    return /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(URL);
+  }
+
+  static async getHostname(hostname) {
+    if (hostname === "local-ip") {
+      return (await internalIp.v4()) || (await internalIp.v6()) || "0.0.0.0";
+    } else if (hostname === "local-ipv4") {
+      return (await internalIp.v4()) || "0.0.0.0";
+    } else if (hostname === "local-ipv6") {
+      return (await internalIp.v6()) || "::";
+    }
+
+    return hostname;
+  }
+
+  static async getFreePort(port) {
+    if (port && port !== "auto") {
+      return port;
+    }
+
+    const pRetry = require("p-retry");
+    const portfinder = require("portfinder");
+
+    portfinder.basePort = process.env.WEBPACK_DEV_SERVER_BASE_PORT || 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;
+
+    return pRetry(() => portfinder.getPortPromise(), {
+      retries: defaultPortRetry,
+    });
+  }
+
+  static findCacheDir() {
+    const cwd = process.cwd();
+
+    let dir = cwd;
+
+    for (;;) {
+      try {
+        if (fs.statSync(path.join(dir, "package.json")).isFile()) break;
+        // eslint-disable-next-line no-empty
+      } catch (e) {}
+
+      const parent = path.dirname(dir);
+
+      if (dir === parent) {
+        // eslint-disable-next-line no-undefined
+        dir = undefined;
+        break;
+      }
+
+      dir = parent;
+    }
+
+    if (!dir) {
+      return path.resolve(cwd, ".cache/webpack-dev-server");
+    } else if (process.versions.pnp === "1") {
+      return path.resolve(dir, ".pnp/.cache/webpack-dev-server");
+    } else if (process.versions.pnp === "3") {
+      return path.resolve(dir, ".yarn/.cache/webpack-dev-server");
+    }
+
+    return path.resolve(dir, "node_modules/.cache/webpack-dev-server");
+  }
+
+  getCompilerOptions() {
+    if (typeof this.compiler.compilers !== "undefined") {
+      if (this.compiler.compilers.length === 1) {
+        return this.compiler.compilers[0].options;
+      }
+
+      // Configuration with the `devServer` options
+      const compilerWithDevServer = 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)
+      );
+
+      if (compilerWithWebPreset) {
+        return compilerWithWebPreset.options;
+      }
+
+      // Fallback
+      return this.compiler.compilers[0].options;
+    }
+
+    return this.compiler.options;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  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,
+    };
+
+    if (typeof options.allowedHosts === "undefined") {
+      // allowedHosts allows some default hosts picked from
+      // `options.host` or `webSocketURL.hostname` and `localhost`
+      options.allowedHosts = "auto";
+    }
+
+    if (
+      typeof options.allowedHosts === "string" &&
+      options.allowedHosts !== "auto" &&
+      options.allowedHosts !== "all"
+    ) {
+      // we store allowedHosts as array when supplied as string
+      options.allowedHosts = [options.allowedHosts];
+    }
+
+    if (typeof options.bonjour === "undefined") {
+      options.bonjour = false;
+    } else if (typeof options.bonjour === "boolean") {
+      options.bonjour = options.bonjour ? {} : false;
+    }
+
+    if (
+      typeof options.client === "undefined" ||
+      (typeof options.client === "object" && options.client !== null)
+    ) {
+      if (!options.client) {
+        options.client = {};
+      }
+
+      if (typeof options.client.webSocketURL === "undefined") {
+        options.client.webSocketURL = {};
+      } else if (typeof options.client.webSocketURL === "string") {
+        const parsedURL = new URL(options.client.webSocketURL);
+
+        options.client.webSocketURL = {
+          protocol: parsedURL.protocol,
+          hostname: parsedURL.hostname,
+          port: parsedURL.port.length > 0 ? Number(parsedURL.port) : "",
+          pathname: parsedURL.pathname,
+          username: parsedURL.username,
+          password: parsedURL.password,
+        };
+      } else if (typeof options.client.webSocketURL.port === "string") {
+        options.client.webSocketURL.port = Number(
+          options.client.webSocketURL.port
+        );
+      }
+
+      // Enable client overlay by default
+      if (typeof options.client.overlay === "undefined") {
+        options.client.overlay = true;
+      } else if (typeof options.client.overlay !== "boolean") {
+        options.client.overlay = {
+          errors: true,
+          warnings: true,
+          ...options.client.overlay,
+        };
+      }
+
+      // Respect infrastructureLogging.level
+      if (typeof options.client.logging === "undefined") {
+        options.client.logging = compilerOptions.infrastructureLogging
+          ? compilerOptions.infrastructureLogging.level
+          : "info";
+      }
+    }
+
+    if (typeof options.compress === "undefined") {
+      options.compress = true;
+    }
+
+    if (typeof options.devMiddleware === "undefined") {
+      options.devMiddleware = {};
+    }
+
+    // No need to normalize `headers`
+
+    if (typeof options.historyApiFallback === "undefined") {
+      options.historyApiFallback = false;
+    } else if (
+      typeof options.historyApiFallback === "boolean" &&
+      options.historyApiFallback
+    ) {
+      options.historyApiFallback = {};
+    }
+
+    // No need to normalize `host`
+
+    options.hot =
+      typeof options.hot === "boolean" || options.hot === "only"
+        ? 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,
+      };
+    }
+
+    // https option
+    if (options.https) {
+      for (const property of ["cacert", "pfx", "key", "cert"]) {
+        const value = options.https[property];
+        const isBuffer = value instanceof Buffer;
+
+        if (value && !isBuffer) {
+          let stats = null;
+
+          try {
+            stats = fs.lstatSync(fs.realpathSync(value)).isFile();
+          } catch (error) {
+            // ignore error
+          }
+
+          // It is file
+          options.https[property] = stats
+            ? fs.readFileSync(path.resolve(value))
+            : value;
+        }
+      }
+
+      let fakeCert;
+
+      if (!options.https.key || !options.https.cert) {
+        const certificateDir = Server.findCacheDir();
+        const certificatePath = path.join(certificateDir, "server.pem");
+        let certificateExists = fs.existsSync(certificatePath);
+
+        if (certificateExists) {
+          const certificateTtl = 1000 * 60 * 60 * 24;
+          const certificateStat = fs.statSync(certificatePath);
+
+          const now = new Date();
+
+          // cert is more than 30 days old, kill it with fire
+          if ((now - certificateStat.ctime) / certificateTtl > 30) {
+            const del = require("del");
+
+            this.logger.info(
+              "SSL Certificate is more than 30 days old. Removing..."
+            );
+
+            del.sync([certificatePath], { force: true });
+
+            certificateExists = false;
+          }
+        }
+
+        if (!certificateExists) {
+          this.logger.info("Generating SSL Certificate...");
+
+          const selfsigned = require("selfsigned");
+          const attributes = [{ name: "commonName", value: "localhost" }];
+          const pems = selfsigned.generate(attributes, {
+            algorithm: "sha256",
+            days: 30,
+            keySize: 2048,
+            extensions: [
+              {
+                name: "basicConstraints",
+                cA: true,
+              },
+              {
+                name: "keyUsage",
+                keyCertSign: true,
+                digitalSignature: true,
+                nonRepudiation: true,
+                keyEncipherment: true,
+                dataEncipherment: true,
+              },
+              {
+                name: "extKeyUsage",
+                serverAuth: true,
+                clientAuth: true,
+                codeSigning: true,
+                timeStamping: true,
+              },
+              {
+                name: "subjectAltName",
+                altNames: [
+                  {
+                    // type 2 is DNS
+                    type: 2,
+                    value: "localhost",
+                  },
+                  {
+                    type: 2,
+                    value: "localhost.localdomain",
+                  },
+                  {
+                    type: 2,
+                    value: "lvh.me",
+                  },
+                  {
+                    type: 2,
+                    value: "*.lvh.me",
+                  },
+                  {
+                    type: 2,
+                    value: "[::1]",
+                  },
+                  {
+                    // type 7 is IP
+                    type: 7,
+                    ip: "127.0.0.1",
+                  },
+                  {
+                    type: 7,
+                    ip: "fe80::1",
+                  },
+                ],
+              },
+            ],
+          });
+
+          fs.mkdirSync(certificateDir, { recursive: true });
+          fs.writeFileSync(certificatePath, pems.private + pems.cert, {
+            encoding: "utf8",
+          });
+        }
+
+        fakeCert = fs.readFileSync(certificatePath);
+
+        this.logger.info(`SSL certificate: ${certificatePath}`);
+      }
+
+      options.https.key = options.https.key || fakeCert;
+      options.https.cert = options.https.cert || fakeCert;
+    }
+
+    if (typeof options.ipc === "boolean") {
+      const isWindows = process.platform === "win32";
+      const pipePrefix = isWindows ? "\\\\.\\pipe\\" : os.tmpdir();
+      const pipeName = "webpack-dev-server.sock";
+
+      options.ipc = path.join(pipePrefix, pipeName);
+    }
+
+    options.liveReload =
+      typeof options.liveReload !== "undefined" ? options.liveReload : true;
+
+    // https://github.com/webpack/webpack-dev-server/issues/1990
+    const defaultOpenOptions = { wait: false };
+    const getOpenItemsFromObject = ({ target, ...rest }) => {
+      const normalizedOptions = { ...defaultOpenOptions, ...rest };
+
+      if (typeof normalizedOptions.app === "string") {
+        normalizedOptions.app = {
+          name: normalizedOptions.app,
+        };
+      }
+
+      const normalizedTarget = typeof target === "undefined" ? "<url>" : target;
+
+      if (Array.isArray(normalizedTarget)) {
+        return normalizedTarget.map((singleTarget) => {
+          return { target: singleTarget, options: normalizedOptions };
+        });
+      }
+
+      return [{ target: normalizedTarget, options: normalizedOptions }];
+    };
+
+    if (typeof options.open === "undefined") {
+      options.open = [];
+    } else if (typeof options.open === "boolean") {
+      options.open = options.open
+        ? [{ target: "<url>", options: defaultOpenOptions }]
+        : [];
+    } else if (typeof options.open === "string") {
+      options.open = [{ target: options.open, options: defaultOpenOptions }];
+    } else if (Array.isArray(options.open)) {
+      const result = [];
+
+      options.open.forEach((item) => {
+        if (typeof item === "string") {
+          result.push({ target: item, options: defaultOpenOptions });
+
+          return;
+        }
+
+        result.push(...getOpenItemsFromObject(item));
+      });
 
-    if (this.options.client.progress) {
+      options.open = result;
+    } else {
+      options.open = [...getOpenItemsFromObject(options.open)];
+    }
+
+    if (typeof options.port === "string" && options.port !== "auto") {
+      options.port = Number(options.port);
+    }
+
+    /**
+     * Assume a proxy configuration specified as:
+     * proxy: {
+     *   'context': { options }
+     * }
+     * OR
+     * proxy: {
+     *   'context': 'target'
+     * }
+     */
+    if (typeof options.proxy !== "undefined") {
+      // TODO remove in the next major release, only accept `Array`
+      if (!Array.isArray(options.proxy)) {
+        if (
+          Object.prototype.hasOwnProperty.call(options.proxy, "target") ||
+          Object.prototype.hasOwnProperty.call(options.proxy, "router")
+        ) {
+          options.proxy = [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;
+            }
+
+            return proxyOptions;
+          });
+        }
+      }
+
+      options.proxy = options.proxy.map((item) => {
+        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 (typeof item.logProvider === "undefined") {
+          item.logProvider = () => this.logger;
+        }
+
+        return item;
+      });
+    }
+
+    if (typeof options.setupExitSignals === "undefined") {
+      options.setupExitSignals = true;
+    }
+
+    if (typeof options.static === "undefined") {
+      options.static = [defaultOptionsForStatic];
+    } else if (typeof options.static === "boolean") {
+      options.static = options.static ? [defaultOptionsForStatic] : false;
+    } else if (typeof options.static === "string") {
+      options.static = [
+        { ...defaultOptionsForStatic, directory: options.static },
+      ];
+    } else if (Array.isArray(options.static)) {
+      options.static = options.static.map((item) => {
+        if (typeof item === "string") {
+          return { ...defaultOptionsForStatic, directory: item };
+        }
+
+        return { ...defaultOptionsForStatic, ...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;
+        }
+      });
+    }
+
+    if (typeof options.watchFiles === "string") {
+      options.watchFiles = [{ paths: options.watchFiles, options: {} }];
+    } else if (
+      typeof options.watchFiles === "object" &&
+      options.watchFiles !== null &&
+      !Array.isArray(options.watchFiles)
+    ) {
+      options.watchFiles = [
+        {
+          paths: options.watchFiles.paths,
+          options: 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.paths, options: item.options || {} };
+      });
+    } else {
+      options.watchFiles = [];
+    }
+
+    const defaultWebSocketServerType = "ws";
+    const defaultWebSocketServerOptions = { path: "/ws" };
+
+    if (typeof options.webSocketServer === "undefined") {
+      options.webSocketServer = {
+        type: defaultWebSocketServerType,
+        options: defaultWebSocketServerOptions,
+      };
+    } else if (
+      typeof options.webSocketServer === "boolean" &&
+      !options.webSocketServer
+    ) {
+      options.webSocketServer = false;
+    } else if (
+      typeof options.webSocketServer === "string" ||
+      typeof options.webSocketServer === "function"
+    ) {
+      options.webSocketServer = {
+        type: options.webSocketServer,
+        options: defaultWebSocketServerOptions,
+      };
+    } else {
+      options.webSocketServer = {
+        type: options.webSocketServer.type || defaultWebSocketServerType,
+        options: {
+          ...defaultWebSocketServerOptions,
+          ...options.webSocketServer.options,
+        },
+      };
+
+      if (typeof options.webSocketServer.options.port === "string") {
+        options.webSocketServer.options.port = Number(
+          options.webSocketServer.options.port
+        );
+      }
+    }
+  }
+
+  async initialize() {
+    this.applyDevServerPlugin();
+
+    if (this.options.client && this.options.client.progress) {
       this.setupProgressPlugin();
     }
 
     this.setupHooks();
     this.setupApp();
-    this.setupCheckHostRoute();
+    this.setupHostHeaderCheck();
     this.setupDevMiddleware();
-
     // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
-    routes(this);
-
+    this.setupBuiltInRoutes();
     this.setupWatchFiles();
     this.setupFeatures();
-    this.setupHttps();
     this.createServer();
 
-    killable(this.server);
-    setupExitSignals(this);
+    if (this.options.setupExitSignals) {
+      const signals = ["SIGINT", "SIGTERM"];
+
+      signals.forEach((signal) => {
+        process.on(signal, () => {
+          this.stopCallback(() => {
+            // eslint-disable-next-line no-process-exit
+            process.exit();
+          });
+        });
+      });
+    }
 
     // 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 (wsProxy) {
-      this.server.on('upgrade', wsProxy.upgrade);
+    this.webSocketProxies.forEach(function (webSocketProxy) {
+      this.server.on("upgrade", webSocketProxy.upgrade);
     }, this);
   }
 
+  applyDevServerPlugin() {
+    const DevServerPlugin = require("./utils/DevServerPlugin");
+
+    const compilers = this.compiler.compilers || [this.compiler];
+
+    // eslint-disable-next-line no-shadow
+    compilers.forEach((compiler) => {
+      new DevServerPlugin(this.options).apply(compiler);
+    });
+  }
+
   setupProgressPlugin() {
-    new webpack.ProgressPlugin((percent, msg, addInfo) => {
+    const { ProgressPlugin } = this.compiler.webpack || require("webpack");
+
+    new ProgressPlugin((percent, msg, addInfo, pluginName) => {
       percent = Math.floor(percent * 100);
 
       if (percent === 100) {
-        msg = 'Compilation completed';
+        msg = "Compilation completed";
       }
 
       if (addInfo) {
         msg = `${msg} (${addInfo})`;
       }
 
-      this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+      if (this.webSocketServer) {
+        this.sendMessage(this.webSocketServer.clients, "progress-update", {
+          percent,
+          msg,
+          pluginName,
+        });
+      }
 
       if (this.server) {
-        this.server.emit('progress-update', { percent, msg });
+        this.server.emit("progress-update", { percent, msg, pluginName });
       }
     }).apply(this.compiler);
   }
@@ -113,19 +750,29 @@ class Server {
     this.app = new express();
   }
 
-  setupHooks() {
-    // Listening for events
-    const invalidPlugin = () => {
-      this.sockWrite(this.sockets, 'invalid');
-    };
+  getStats(statsObj) {
+    const stats = Server.DEFAULT_STATS;
+    const compilerOptions = this.getCompilerOptions();
 
+    if (compilerOptions.stats && compilerOptions.stats.warningsFilter) {
+      stats.warningsFilter = compilerOptions.stats.warningsFilter;
+    }
+
+    return statsObj.toJson(stats);
+  }
+
+  setupHooks() {
     const addHooks = (compiler) => {
-      const { compile, invalid, done } = compiler.hooks;
+      compiler.hooks.invalid.tap("webpack-dev-server", () => {
+        if (this.webSocketServer) {
+          this.sendMessage(this.webSocketServer.clients, "invalid");
+        }
+      });
+      compiler.hooks.done.tap("webpack-dev-server", (stats) => {
+        if (this.webSocketServer) {
+          this.sendStats(this.webSocketServer.clients, this.getStats(stats));
+        }
 
-      compile.tap('webpack-dev-server', invalidPlugin);
-      invalid.tap('webpack-dev-server', invalidPlugin);
-      done.tap('webpack-dev-server', (stats) => {
-        this.sendStats(this.sockets, this.getStats(stats));
         this.stats = stats;
       });
     };
@@ -137,108 +784,123 @@ class Server {
     }
   }
 
-  setupCheckHostRoute() {
-    this.app.all('*', (req, res, next) => {
-      if (this.checkHost(req.headers)) {
+  setupHostHeaderCheck() {
+    this.app.all("*", (req, res, next) => {
+      if (this.checkHeader(req.headers, "host")) {
         return next();
       }
 
-      res.send('Invalid Host header');
+      res.send("Invalid Host header");
     });
   }
 
   setupDevMiddleware() {
+    const webpackDevMiddleware = require("webpack-dev-middleware");
+
     // middleware for serving webpack bundle
-    this.middleware = webpackDevMiddleware(this.compiler, this.options.dev);
+    this.middleware = webpackDevMiddleware(
+      this.compiler,
+      this.options.devMiddleware
+    );
   }
 
-  setupCompressFeature() {
-    this.app.use(compress());
-  }
+  setupBuiltInRoutes() {
+    const { app, middleware } = this;
 
-  setupProxyFeature() {
-    /**
-     * Assume a proxy configuration specified as:
-     * proxy: {
-     *   'context': { options }
-     * }
-     * OR
-     * proxy: {
-     *   'context': 'target'
-     * }
-     */
-    if (!Array.isArray(this.options.proxy)) {
-      if (Object.prototype.hasOwnProperty.call(this.options.proxy, 'target')) {
-        this.options.proxy = [this.options.proxy];
-      } else {
-        this.options.proxy = Object.keys(this.options.proxy).map((context) => {
-          let proxyOptions;
-          // For backwards compatibility reasons.
-          const correctedContext = context
-            .replace(/^\*$/, '**')
-            .replace(/\/\*$/, '');
-
-          if (typeof this.options.proxy[context] === 'string') {
-            proxyOptions = {
-              context: correctedContext,
-              target: this.options.proxy[context],
-            };
-          } else {
-            proxyOptions = Object.assign({}, this.options.proxy[context]);
-            proxyOptions.context = correctedContext;
-          }
+    app.get("/__webpack_dev_server__/sockjs.bundle.js", (req, res) => {
+      res.setHeader("Content-Type", "application/javascript");
 
-          const getLogLevelForProxy = (level) => {
-            if (level === 'none') {
-              return 'silent';
-            }
+      const { createReadStream } = require("graceful-fs");
+      const clientPath = path.join(__dirname, "..", "client");
 
-            if (level === 'log') {
-              return 'info';
-            }
+      createReadStream(
+        path.join(clientPath, "modules/sockjs-client/index.js")
+      ).pipe(res);
+    });
 
-            if (level === 'verbose') {
-              return 'debug';
-            }
+    app.get("/webpack-dev-server/invalidate", (_req, res) => {
+      this.invalidate();
+
+      res.end();
+    });
 
-            return level;
-          };
+    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 configs = getCompilerConfigArray(this.compiler);
-          const configWithDevServer =
-            configs.find((config) => config.devServer) || configs[0];
+        const statsForPrint =
+          typeof stats.stats !== "undefined"
+            ? stats.toJson().children
+            : [stats.toJson()];
 
-          proxyOptions.logLevel = getLogLevelForProxy(
-            configWithDevServer.infrastructureLogging.level
-          );
-          proxyOptions.logProvider = () => this.logger;
+        res.write(`<h1>Assets Report:</h1>`);
 
-          return proxyOptions;
+        statsForPrint.forEach((item, index) => {
+          res.write("<div>");
+
+          const name =
+            item.name || (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 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.end("</body></html>");
+      });
+    });
+  }
+
+  setupCompressFeature() {
+    const compress = require("compression");
+
+    this.app.use(compress());
+  }
+
+  setupProxyFeature() {
+    const { createProxyMiddleware } = require("http-proxy-middleware");
 
     const getProxyMiddleware = (proxyConfig) => {
       const context = proxyConfig.context || proxyConfig.path;
 
       // It is possible to use the `bypass` method without a `target`.
       // However, the proxy middleware has no use in this case, and will fail to instantiate.
-      if (proxyConfig.target) {
+      if (context) {
         return createProxyMiddleware(context, proxyConfig);
       }
+
+      return createProxyMiddleware(proxyConfig);
     };
     /**
      * Assume a proxy configuration specified as:
      * proxy: [
      *   {
-     *     context: ...,
-     *     ...options...
+     *     context: "value",
+     *     ...options,
      *   },
      *   // or:
      *   function() {
      *     return {
-     *       context: ...,
-     *       ...options...
+     *       context: "context",
+     *       ...options,
      *     };
      *   }
      * ]
@@ -247,18 +909,20 @@ class Server {
       let proxyMiddleware;
 
       let proxyConfig =
-        typeof proxyConfigOrCallback === 'function'
+        typeof proxyConfigOrCallback === "function"
           ? proxyConfigOrCallback()
           : proxyConfigOrCallback;
 
-      proxyMiddleware = getProxyMiddleware(proxyConfig);
+      if (!proxyConfig.bypass) {
+        proxyMiddleware = getProxyMiddleware(proxyConfig);
+      }
 
       if (proxyConfig.ws) {
-        this.websocketProxies.push(proxyMiddleware);
+        this.webSocketProxies.push(proxyMiddleware);
       }
 
       const handle = async (req, res, next) => {
-        if (typeof proxyConfigOrCallback === 'function') {
+        if (typeof proxyConfigOrCallback === "function") {
           const newProxyConfig = proxyConfigOrCallback(req, res, next);
 
           if (newProxyConfig !== proxyConfig) {
@@ -270,16 +934,17 @@ class Server {
         // - 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
-        const isByPassFuncDefined = typeof proxyConfig.bypass === 'function';
+        // 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') {
+        if (typeof bypassUrl === "boolean") {
           // skip the proxy
           req.url = null;
           next();
-        } else if (typeof bypassUrl === 'string') {
+        } else if (typeof bypassUrl === "string") {
           // byPass to that url
           req.url = bypassUrl;
           next();
@@ -297,13 +962,20 @@ class Server {
   }
 
   setupHistoryApiFallbackFeature() {
-    const fallback =
-      typeof this.options.historyApiFallback === 'object'
-        ? this.options.historyApiFallback
-        : null;
+    const { historyApiFallback } = this.options;
+
+    if (
+      typeof historyApiFallback.logger === "undefined" &&
+      !historyApiFallback.verbose
+    ) {
+      historyApiFallback.logger = this.logger.log.bind(
+        this.logger,
+        "[connect-history-api-fallback]"
+      );
+    }
 
     // Fall back to /index.html if nothing else matches.
-    this.app.use(historyApiFallback(fallback));
+    this.app.use(require("connect-history-api-fallback")(historyApiFallback));
   }
 
   setupStaticFeature() {
@@ -318,12 +990,14 @@ class Server {
   }
 
   setupStaticServeIndexFeature() {
+    const serveIndex = require("serve-index");
+
     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') {
+            if (req.method !== "GET" && req.method !== "HEAD") {
               return next();
             }
 
@@ -351,23 +1025,12 @@ class Server {
   }
 
   setupWatchFiles() {
-    if (this.options.watchFiles) {
-      const { watchFiles } = this.options;
-
-      if (typeof watchFiles === 'string') {
-        this.watchFiles(watchFiles, {});
-      } else if (Array.isArray(watchFiles)) {
-        watchFiles.forEach((file) => {
-          if (typeof file === 'string') {
-            this.watchFiles(file, {});
-          } else {
-            this.watchFiles(file.paths, file.options || {});
-          }
-        });
-      } else {
-        // { paths: [...], options: {} }
-        this.watchFiles(watchFiles.paths, watchFiles.options || {});
-      }
+    const { watchFiles } = this.options;
+
+    if (watchFiles.length > 0) {
+      watchFiles.forEach((item) => {
+        this.watchFiles(item.paths, item.options);
+      });
     }
   }
 
@@ -380,11 +1043,11 @@ class Server {
   }
 
   setupHeadersFeature() {
-    this.app.all('*', this.setContentHeaders.bind(this));
+    this.app.all("*", this.setHeaders.bind(this));
   }
 
   setupMagicHtmlFeature() {
-    this.app.get('*', this.serveMagicHtml.bind(this));
+    this.app.get("*", this.serveMagicHtml.bind(this));
   }
 
   setupFeatures() {
@@ -414,12 +1077,12 @@ class Server {
         this.setupStaticWatchFeature();
       },
       onBeforeSetupMiddleware: () => {
-        if (typeof this.options.onBeforeSetupMiddleware === 'function') {
+        if (typeof this.options.onBeforeSetupMiddleware === "function") {
           this.setupOnBeforeSetupMiddlewareFeature();
         }
       },
       onAfterSetupMiddleware: () => {
-        if (typeof this.options.onAfterSetupMiddleware === 'function') {
+        if (typeof this.options.onAfterSetupMiddleware === "function") {
           this.setupOnAfterSetupMiddlewareFeature();
         }
       },
@@ -440,39 +1103,39 @@ class Server {
 
     // compress is placed last and uses unshift so that it will be the first middleware used
     if (this.options.compress) {
-      runnableFeatures.push('compress');
+      runnableFeatures.push("compress");
     }
 
     if (this.options.onBeforeSetupMiddleware) {
-      runnableFeatures.push('onBeforeSetupMiddleware');
+      runnableFeatures.push("onBeforeSetupMiddleware");
     }
 
-    runnableFeatures.push('headers', 'middleware');
+    runnableFeatures.push("headers", "middleware");
 
     if (this.options.proxy) {
-      runnableFeatures.push('proxy', 'middleware');
+      runnableFeatures.push("proxy", "middleware");
     }
 
     if (this.options.static) {
-      runnableFeatures.push('static');
+      runnableFeatures.push("static");
     }
 
     if (this.options.historyApiFallback) {
-      runnableFeatures.push('historyApiFallback', 'middleware');
+      runnableFeatures.push("historyApiFallback", "middleware");
 
       if (this.options.static) {
-        runnableFeatures.push('static');
+        runnableFeatures.push("static");
       }
     }
 
     if (this.options.static) {
-      runnableFeatures.push('staticServeIndex', 'staticWatch');
+      runnableFeatures.push("staticServeIndex", "staticWatch");
     }
 
-    runnableFeatures.push('magicHtml');
+    runnableFeatures.push("magicHtml");
 
     if (this.options.onAfterSetupMiddleware) {
-      runnableFeatures.push('onAfterSetupMiddleware');
+      runnableFeatures.push("onAfterSetupMiddleware");
     }
 
     runnableFeatures.forEach((feature) => {
@@ -480,239 +1143,324 @@ class Server {
     });
   }
 
-  setupHttps() {
-    // if the user enables http2, we can safely enable https
-    if (
-      (this.options.http2 && !this.options.https) ||
-      this.options.https === true
-    ) {
-      this.options.https = {
-        requestCert: false,
-      };
-    }
-
-    if (this.options.https) {
-      for (const property of ['ca', 'pfx', 'key', 'cert']) {
-        const value = this.options.https[property];
-        const isBuffer = value instanceof Buffer;
-
-        if (value && !isBuffer) {
-          let stats = null;
-
-          try {
-            stats = fs.lstatSync(fs.realpathSync(value)).isFile();
-          } catch (error) {
-            // ignore error
-          }
-
-          // It is file
-          this.options.https[property] = stats
-            ? fs.readFileSync(path.resolve(value))
-            : value;
-        }
-      }
-
-      let fakeCert;
-
-      if (!this.options.https.key || !this.options.https.cert) {
-        fakeCert = getCertificate(this.logger);
-      }
-
-      this.options.https.key = this.options.https.key || fakeCert;
-      this.options.https.cert = this.options.https.cert || fakeCert;
-    }
-  }
-
   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.server = require("spdy").createServer(
           {
             ...this.options.https,
             spdy: {
-              protocols: ['h2', 'http/1.1'],
+              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");
+
       this.server = http.createServer(this.app);
     }
 
-    this.server.on('error', (error) => {
+    this.server.on("connection", (socket) => {
+      // Add socket to list
+      this.sockets.push(socket);
+
+      socket.once("close", () => {
+        // Remove socket from list
+        this.sockets.splice(this.sockets.indexOf(socket), 1);
+      });
+    });
+
+    this.server.on("error", (error) => {
       throw error;
     });
   }
 
-  createSocketServer() {
-    this.socketServer = new this.SocketServerImplementation(this);
+  getWebSocketServerImplementation() {
+    let implementation;
+    let implementationFound = true;
+
+    switch (typeof 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") {
+          implementation = require("./servers/SockJSServer");
+        } else if (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);
+          } catch (error) {
+            implementationFound = false;
+          }
+        }
+        break;
+      case "function":
+        implementation = this.options.webSocketServer.type;
+        break;
+      default:
+        implementationFound = false;
+    }
+
+    if (!implementationFound) {
+      throw new Error(
+        "webSocketServer (webSocketServer.type) must be a string denoting a default implementation (e.g. 'ws', 'sockjs'), a full path to " +
+          "a JS file which exports a class extending BaseServer (webpack-dev-server/lib/servers/BaseServer.js) " +
+          "via require.resolve(...), or the class itself which extends BaseServer"
+      );
+    }
+
+    return implementation;
+  }
+
+  createWebSocketServer() {
+    this.webSocketServer = new (this.getWebSocketServerImplementation())(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'
+        );
+      }
+
+      if (
+        !headers ||
+        !this.checkHeader(headers, "host") ||
+        !this.checkHeader(headers, "origin")
+      ) {
+        this.sendMessage([client], "error", "Invalid Host/Origin header");
+
+        client.terminate();
+
+        return;
+      }
+
+      if (this.options.hot === true || this.options.hot === "only") {
+        this.sendMessage([client], "hot");
+      }
+
+      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 && this.options.client.overlay) {
+        this.sendMessage([client], "overlay", this.options.client.overlay);
+      }
+
+      if (!this.stats) {
+        return;
+      }
+
+      this.sendStats([client], this.getStats(this.stats), true);
+    });
+  }
+
+  openBrowser(defaultOpenTarget) {
+    const open = require("open");
+
+    Promise.all(
+      this.options.open.map((item) => {
+        let openTarget;
+
+        if (item.target === "<url>") {
+          openTarget = defaultOpenTarget;
+        } else {
+          openTarget = Server.isAbsoluteURL(item.target)
+            ? item.target
+            : new URL(item.target, defaultOpenTarget).toString();
+        }
+
+        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`
+                      : ""
+                  }`
+                : ""
+            }. If you are running in a headless environment, please do not use the "open" option or related flags like "--open", "--open-target", and "--open-app".`
+          );
+        });
+      })
+    );
+  }
+
+  runBonjour() {
+    const bonjour = require("bonjour")();
+
+    bonjour.publish({
+      name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
+      port: this.options.port,
+      type: this.options.https ? "https" : "http",
+      subtypes: ["webpack"],
+      ...this.options.bonjour,
+    });
+
+    process.on("exit", () => {
+      bonjour.unpublishAll(() => {
+        bonjour.destroy();
+      });
+    });
+  }
+
+  logStatus() {
+    const colorette = require("colorette");
 
-    this.socketServer.onConnection((connection, headers) => {
-      if (!connection) {
-        return;
-      }
-
-      if (!headers) {
-        this.logger.warn(
-          'transportMode.server implementation must pass headers to the callback of onConnection(f) ' +
-            'via f(connection, headers) in order for clients to pass a headers security check'
-        );
-      }
-
-      if (!headers || !this.checkHost(headers) || !this.checkOrigin(headers)) {
-        this.sockWrite([connection], 'error', 'Invalid Host/Origin header');
+    const getColorsOption = (compilerOptions) => {
+      let colorsEnabled;
 
-        this.socketServer.close(connection);
-
-        return;
+      if (
+        compilerOptions.stats &&
+        typeof compilerOptions.stats.colors !== "undefined"
+      ) {
+        colorsEnabled = compilerOptions.stats;
+      } else {
+        colorsEnabled = colorette.options.enabled;
       }
 
-      this.sockets.push(connection);
+      return colorsEnabled;
+    };
 
-      this.socketServer.onConnectionClose(connection, () => {
-        const idx = this.sockets.indexOf(connection);
+    const colors = {
+      info(useColor, msg) {
+        if (useColor) {
+          return colorette.cyan(msg);
+        }
 
-        if (idx >= 0) {
-          this.sockets.splice(idx, 1);
+        return msg;
+      },
+      error(useColor, msg) {
+        if (useColor) {
+          return colorette.red(msg);
         }
-      });
 
-      if (this.options.client.logging) {
-        this.sockWrite([connection], 'logging', this.options.client.logging);
-      }
+        return msg;
+      },
+    };
+    const useColor = getColorsOption(this.getCompilerOptions());
 
-      if (this.options.hot === true || this.options.hot === 'only') {
-        this.sockWrite([connection], 'hot');
-      }
+    if (this.options.ipc) {
+      this.logger.info(`Project is running at: "${this.server.address()}"`);
+    } else {
+      const protocol = this.options.https ? "https" : "http";
+      const { address, port } = this.server.address();
+      const prettyPrintURL = (newHostname) =>
+        url.format({ protocol, hostname: newHostname, port, pathname: "/" });
+
+      let server;
+      let localhost;
+      let loopbackIPv4;
+      let loopbackIPv6;
+      let networkUrlIPv4;
+      let networkUrlIPv6;
+
+      if (this.options.host) {
+        if (this.options.host === "localhost") {
+          localhost = prettyPrintURL("localhost");
+        } else {
+          let isIP;
 
-      if (this.options.liveReload) {
-        this.sockWrite([connection], 'liveReload');
-      }
+          try {
+            isIP = ipaddr.parse(this.options.host);
+          } catch (error) {
+            // Ignore
+          }
 
-      if (this.options.client.progress) {
-        this.sockWrite([connection], 'progress', this.options.client.progress);
+          if (!isIP) {
+            server = prettyPrintURL(this.options.host);
+          }
+        }
       }
 
-      if (this.options.client.overlay) {
-        this.sockWrite([connection], 'overlay', this.options.client.overlay);
-      }
+      const parsedIP = ipaddr.parse(address);
 
-      if (!this.stats) {
-        return;
-      }
+      if (parsedIP.range() === "unspecified") {
+        localhost = prettyPrintURL("localhost");
 
-      this.sendStats([connection], this.getStats(this.stats), true);
-    });
-  }
+        const networkIPv4 = internalIp.v4.sync();
 
-  showStatus() {
-    const useColor = getColorsOption(getCompilerConfigArray(this.compiler));
-    const protocol = this.options.https ? 'https' : 'http';
-    const { address, port } = this.server.address();
-    const prettyPrintUrl = (newHostname) =>
-      url.format({ protocol, hostname: newHostname, port, pathname: '/' });
-
-    let server;
-    let localhost;
-    let loopbackIPv4;
-    let loopbackIPv6;
-    let networkUrlIPv4;
-    let networkUrlIPv6;
-
-    if (this.hostname) {
-      if (this.hostname === 'localhost') {
-        localhost = prettyPrintUrl('localhost');
-      } else {
-        let isIP;
+        if (networkIPv4) {
+          networkUrlIPv4 = prettyPrintURL(networkIPv4);
+        }
 
-        try {
-          isIP = ipaddr.parse(this.hostname);
-        } catch (error) {
-          // Ignore
+        const networkIPv6 = internalIp.v6.sync();
+
+        if (networkIPv6) {
+          networkUrlIPv6 = prettyPrintURL(networkIPv6);
+        }
+      } else if (parsedIP.range() === "loopback") {
+        if (parsedIP.kind() === "ipv4") {
+          loopbackIPv4 = prettyPrintURL(parsedIP.toString());
+        } else if (parsedIP.kind() === "ipv6") {
+          loopbackIPv6 = prettyPrintURL(parsedIP.toString());
         }
+      } else {
+        networkUrlIPv4 =
+          parsedIP.kind() === "ipv6" && parsedIP.isIPv4MappedAddress()
+            ? prettyPrintURL(parsedIP.toIPv4Address().toString())
+            : prettyPrintURL(address);
 
-        if (!isIP) {
-          server = prettyPrintUrl(this.hostname);
+        if (parsedIP.kind() === "ipv6") {
+          networkUrlIPv6 = prettyPrintURL(address);
         }
       }
-    }
 
-    const parsedIP = ipaddr.parse(address);
+      this.logger.info("Project is running at:");
 
-    if (parsedIP.range() === 'unspecified') {
-      localhost = prettyPrintUrl('localhost');
-
-      const networkIPv4 = internalIp.v4.sync();
-
-      if (networkIPv4) {
-        networkUrlIPv4 = prettyPrintUrl(networkIPv4);
+      if (server) {
+        this.logger.info(`Server: ${colors.info(useColor, server)}`);
       }
 
-      const networkIPv6 = internalIp.v6.sync();
+      if (localhost || loopbackIPv4 || loopbackIPv6) {
+        const loopbacks = []
+          .concat(localhost ? [colors.info(useColor, localhost)] : [])
+          .concat(loopbackIPv4 ? [colors.info(useColor, loopbackIPv4)] : [])
+          .concat(loopbackIPv6 ? [colors.info(useColor, loopbackIPv6)] : []);
 
-      if (networkIPv6) {
-        networkUrlIPv6 = prettyPrintUrl(networkIPv6);
+        this.logger.info(`Loopback: ${loopbacks.join(", ")}`);
       }
-    } else if (parsedIP.range() === 'loopback') {
-      if (parsedIP.kind() === 'ipv4') {
-        loopbackIPv4 = prettyPrintUrl(parsedIP.toString());
-      } else if (parsedIP.kind() === 'ipv6') {
-        loopbackIPv6 = prettyPrintUrl(parsedIP.toString());
-      }
-    } else {
-      networkUrlIPv4 =
-        parsedIP.kind() === 'ipv6' && parsedIP.isIPv4MappedAddress()
-          ? prettyPrintUrl(parsedIP.toIPv4Address().toString())
-          : prettyPrintUrl(address);
 
-      if (parsedIP.kind() === 'ipv6') {
-        networkUrlIPv6 = prettyPrintUrl(address);
+      if (networkUrlIPv4) {
+        this.logger.info(
+          `On Your Network (IPv4): ${colors.info(useColor, networkUrlIPv4)}`
+        );
       }
-    }
-
-    this.logger.info('Project is running at:');
-
-    if (server) {
-      this.logger.info(`Server: ${colors.info(useColor, 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)] : []);
-
-      this.logger.info(`Loopback: ${loopbacks.join(', ')}`);
-    }
 
-    if (networkUrlIPv4) {
-      this.logger.info(
-        `On Your Network (IPv4): ${colors.info(useColor, networkUrlIPv4)}`
-      );
-    }
+      if (networkUrlIPv6) {
+        this.logger.info(
+          `On Your Network (IPv6): ${colors.info(useColor, networkUrlIPv6)}`
+        );
+      }
 
-    if (networkUrlIPv6) {
-      this.logger.info(
-        `On Your Network (IPv6): ${colors.info(useColor, networkUrlIPv6)}`
-      );
-    }
+      if (this.options.open.length > 0) {
+        const openTarget = prettyPrintURL(this.options.host || "localhost");
 
-    if (
-      this.options.dev &&
-      typeof this.options.dev.publicPath !== 'undefined'
-    ) {
-      this.logger.info(
-        `webpack output is served from '${colors.info(
-          useColor,
-          this.options.dev.publicPath === 'auto'
-            ? '/'
-            : this.options.dev.publicPath
-        )}' URL`
-      );
+        this.openBrowser(openTarget);
+      }
     }
 
     if (this.options.static && this.options.static.length > 0) {
@@ -721,7 +1469,7 @@ class Server {
           useColor,
           this.options.static
             .map((staticOption) => staticOption.directory)
-            .join(', ')
+            .join(", ")
         )}' directory`
       );
     }
@@ -730,153 +1478,45 @@ class Server {
       this.logger.info(
         `404s will fallback to '${colors.info(
           useColor,
-          this.options.historyApiFallback.index || '/index.html'
+          this.options.historyApiFallback.index || "/index.html"
         )}'`
       );
     }
 
     if (this.options.bonjour) {
-      this.logger.info(
-        'Broadcasting "http" with subtype of "webpack" via ZeroConf DNS (Bonjour)'
-      );
-    }
-
-    if (this.options.open) {
-      const openTarget = prettyPrintUrl(this.hostname || 'localhost');
-
-      runOpen(openTarget, this.options.open, this.logger);
-    }
-  }
-
-  listen(port, hostname, fn) {
-    if (hostname === 'local-ip') {
-      this.hostname = internalIp.v4.sync() || internalIp.v6.sync() || '0.0.0.0';
-    } else if (hostname === 'local-ipv4') {
-      this.hostname = internalIp.v4.sync() || '0.0.0.0';
-    } else if (hostname === 'local-ipv6') {
-      this.hostname = internalIp.v6.sync() || '::';
-    } else {
-      this.hostname = hostname;
-    }
+      const bonjourProtocol =
+        this.options.bonjour.type || this.options.https ? "https" : "http";
 
-    if (typeof port !== 'undefined' && port !== this.options.port) {
-      this.logger.warn(
-        'The port specified in options and the port passed as an argument is different.'
+      this.logger.info(
+        `Broadcasting "${bonjourProtocol}" with subtype of "webpack" via ZeroConf DNS (Bonjour)`
       );
     }
-
-    return (
-      findPort(port || this.options.port)
-        // eslint-disable-next-line no-shadow
-        .then((port) => {
-          this.port = port;
-          return this.server.listen(port, this.hostname, (error) => {
-            if (this.options.hot || this.options.liveReload) {
-              this.createSocketServer();
-            }
-
-            if (this.options.bonjour) {
-              runBonjour(this.options);
-            }
-
-            this.showStatus();
-
-            if (fn) {
-              fn.call(this.server, error);
-            }
-
-            if (typeof this.options.onListening === 'function') {
-              this.options.onListening(this);
-            }
-          });
-        })
-        .catch((error) => {
-          if (fn) {
-            fn.call(this.server, error);
-          }
-        })
-    );
-  }
-
-  close(cb) {
-    this.sockets.forEach((socket) => {
-      this.socketServer.close(socket);
-    });
-
-    this.sockets = [];
-
-    const prom = Promise.all(
-      this.staticWatchers.map((watcher) => watcher.close())
-    );
-    this.staticWatchers = [];
-
-    this.server.kill(() => {
-      // watchers must be closed before closing middleware
-      prom.then(() => {
-        this.middleware.close(cb);
-      });
-    });
-  }
-
-  static get DEFAULT_STATS() {
-    return {
-      all: false,
-      hash: true,
-      assets: true,
-      warnings: true,
-      errors: true,
-      errorDetails: false,
-    };
   }
 
-  getStats(statsObj) {
-    const stats = Server.DEFAULT_STATS;
-
-    const configArr = getCompilerConfigArray(this.compiler);
-    const statsOption = getStatsOption(configArr);
-
-    if (typeof statsOption === 'object' && statsOption.warningsFilter) {
-      stats.warningsFilter = statsOption.warningsFilter;
-    }
-
-    return statsObj.toJson(stats);
-  }
+  setHeaders(req, res, next) {
+    let { headers } = this.options;
 
-  use() {
-    // eslint-disable-next-line prefer-spread
-    this.app.use.apply(this.app, arguments);
-  }
+    if (headers) {
+      if (typeof headers === "function") {
+        headers = headers(req, res, this.middleware.context);
+      }
 
-  setContentHeaders(req, res, next) {
-    if (this.options.headers) {
       // eslint-disable-next-line guard-for-in
-      for (const name in this.options.headers) {
-        res.setHeader(name, this.options.headers[name]);
+      for (const name in headers) {
+        res.setHeader(name, headers[name]);
       }
     }
 
     next();
   }
 
-  checkHost(headers) {
-    return this.checkHeaders(headers, 'host');
-  }
-
-  checkOrigin(headers) {
-    return this.checkHeaders(headers, 'origin');
-  }
-
-  checkHeaders(headers, headerToCheck) {
+  checkHeader(headers, headerToCheck) {
     // allow user to opt out of this security check, at their own risk
-    // by explicitly disabling firewall
-    if (!this.options.firewall) {
+    // by explicitly enabling allowedHosts
+    if (this.options.allowedHosts === "all") {
       return true;
     }
 
-    if (!headerToCheck) {
-      headerToCheck = 'host';
-    }
-
     // get the Host header and extract hostname
     // we don't care about port not matching
     const hostHeader = headers[headerToCheck];
@@ -900,22 +1540,22 @@ class Server {
     // these are removed from the hostname in url.parse(),
     // so we have the pure IPv6-address in hostname.
     // always allow localhost host, for convenience (hostname === 'localhost')
-    // allow hostname of listening address  (hostname === this.hostname)
+    // allow hostname of listening address  (hostname === this.options.host)
     const isValidHostname =
       ipaddr.IPv4.isValid(hostname) ||
       ipaddr.IPv6.isValid(hostname) ||
-      hostname === 'localhost' ||
-      hostname === this.hostname;
+      hostname === "localhost" ||
+      hostname === this.options.host;
 
     if (isValidHostname) {
       return true;
     }
 
-    const allowedHosts = this.options.firewall;
+    const { allowedHosts } = this.options;
 
     // always allow localhost host, for convenience
     // allow if hostname is in allowedHosts
-    if (Array.isArray(allowedHosts) && allowedHosts.length) {
+    if (Array.isArray(allowedHosts) && allowedHosts.length > 0) {
       for (let hostIdx = 0; hostIdx < allowedHosts.length; hostIdx++) {
         const allowedHost = allowedHosts[hostIdx];
 
@@ -925,7 +1565,7 @@ class Server {
 
         // support "." as a subdomain wildcard
         // e.g. ".example.com" will allow "example.com", "www.example.com", "subdomain.example.com", etc
-        if (allowedHost[0] === '.') {
+        if (allowedHost[0] === ".") {
           // "example.com"  (hostname === allowedHost.substring(1))
           // "*.example.com"  (hostname.endsWith(allowedHost))
           if (
@@ -938,76 +1578,82 @@ class Server {
       }
     }
 
-    // also allow public hostname if provided
-    if (typeof this.options.public === 'string') {
-      const idxPublic = this.options.public.indexOf(':');
-      const publicHostname =
-        idxPublic >= 0
-          ? this.options.public.substr(0, idxPublic)
-          : this.options.public;
-
-      if (hostname === publicHostname) {
-        return true;
-      }
+    // Also allow if `client.webSocketURL.hostname` provided
+    if (
+      this.options.client &&
+      typeof this.options.client.webSocketURL !== "undefined"
+    ) {
+      return this.options.client.webSocketURL.hostname === hostname;
     }
 
     // disallow
     return false;
   }
 
-  sockWrite(sockets, type, data) {
-    sockets.forEach((socket) => {
-      this.socketServer.send(socket, JSON.stringify({ type, data }));
+  // eslint-disable-next-line class-methods-use-this
+  sendMessage(clients, type, data) {
+    clients.forEach((client) => {
+      // `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 }));
+      }
     });
   }
 
   serveMagicHtml(req, res, next) {
-    const _path = req.path;
+    this.middleware.waitUntilValid(() => {
+      const _path = req.path;
 
-    try {
-      const filename = getFilenameFromUrl(
-        this.middleware.context,
-        `${_path}.js`
-      );
-      const isFile = this.middleware.context.outputFileSystem
-        .statSync(filename)
-        .isFile();
+      try {
+        const filename = this.middleware.getFilenameFromUrl(`${_path}.js`);
+        const isFile = this.middleware.context.outputFileSystem
+          .statSync(filename)
+          .isFile();
 
-      if (!isFile) {
-        return next();
-      }
+        if (!isFile) {
+          return next();
+        }
 
-      // Serve a page that executes the javascript
-      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>`;
+        // Serve a page that executes the javascript
+        const queries = req._parsedUrl.search || "";
+        const responsePage = `<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><script type="text/javascript" charset="utf-8" src="${_path}.js${queries}"></script></body></html>`;
 
-      res.send(responsePage);
-    } catch (error) {
-      return next();
-    }
+        res.send(responsePage);
+      } catch (error) {
+        return next();
+      }
+    });
   }
 
-  // send stats to a socket or multiple sockets
-  sendStats(sockets, stats, force) {
+  // Send stats to a socket or multiple sockets
+  sendStats(clients, stats, force) {
     const shouldEmit =
       !force &&
       stats &&
       (!stats.errors || stats.errors.length === 0) &&
+      (!stats.warnings || stats.warnings.length === 0) &&
       stats.assets &&
       stats.assets.every((asset) => !asset.emitted);
 
     if (shouldEmit) {
-      return this.sockWrite(sockets, 'still-ok');
+      this.sendMessage(clients, "still-ok");
+
+      return;
     }
 
-    this.sockWrite(sockets, 'hash', 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 (stats.errors.length > 0) {
-      this.sockWrite(sockets, 'errors', stats.errors);
-    } else if (stats.warnings.length > 0) {
-      this.sockWrite(sockets, 'warnings', stats.warnings);
+      if (stats.errors.length > 0) {
+        this.sendMessage(clients, "errors", stats.errors);
+      }
     } else {
-      this.sockWrite(sockets, 'ok');
+      this.sendMessage(clients, "ok");
     }
   }
 
@@ -1016,9 +1662,15 @@ class Server {
     // 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 = watchOptions.poll ? true : undefined;
+    const usePolling =
+      typeof watchOptions.usePolling !== "undefined"
+        ? watchOptions.usePolling
+        : Boolean(watchOptions.poll);
     const interval =
-      typeof watchOptions.poll === 'number'
+      // 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;
@@ -1035,12 +1687,20 @@ class Server {
       interval,
     };
 
+    const chokidar = require("chokidar");
+
     const watcher = chokidar.watch(watchPath, finalWatchOptions);
 
     // disabling refreshing on changing the content
     if (this.options.liveReload) {
-      watcher.on('change', () => {
-        this.sockWrite(this.sockets, 'content-changed');
+      watcher.on("change", (item) => {
+        if (this.webSocketServer) {
+          this.sendMessage(
+            this.webSocketServer.clients,
+            "static-changed",
+            item
+          );
+        }
       });
     }
 
@@ -1052,6 +1712,263 @@ class Server {
       this.middleware.invalidate(callback);
     }
   }
+
+  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();
+
+            return;
+          } else if (error.code === "ENOENT") {
+            resolve();
+
+            return;
+          }
+
+          reject(error);
+        });
+
+        socket.connect({ path: 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);
+    }
+
+    await this.initialize();
+
+    const listenOptions = this.options.ipc
+      ? { path: this.options.ipc }
+      : { host: this.options.host, port: this.options.port };
+
+    await new Promise((resolve) => {
+      this.server.listen(listenOptions, () => {
+        resolve();
+      });
+    });
+
+    if (this.options.ipc) {
+      // chmod 666 (rw rw rw)
+      const READ_WRITE = 438;
+
+      fs.chmodSync(this.options.ipc, READ_WRITE);
+    }
+
+    if (this.options.webSocketServer) {
+      this.createWebSocketServer();
+    }
+
+    if (this.options.bonjour) {
+      this.runBonjour();
+    }
+
+    this.logStatus();
+
+    if (typeof this.options.onListening === "function") {
+      this.options.onListening(this);
+    }
+  }
+
+  startCallback(callback) {
+    this.start().then(() => callback(null), callback);
+  }
+
+  async stop() {
+    this.webSocketProxies = [];
+
+    await Promise.all(this.staticWatchers.map((watcher) => watcher.close()));
+
+    this.staticWatchers = [];
+
+    if (this.webSocketServer) {
+      await new Promise((resolve) => {
+        this.webSocketServer.implementation.close(() => {
+          this.webSocketServer = null;
+
+          resolve();
+        });
+
+        for (const client of this.webSocketServer.clients) {
+          client.terminate();
+        }
+
+        this.webSocketServer.clients = [];
+      });
+    }
+
+    if (this.server) {
+      await new Promise((resolve) => {
+        this.server.close(() => {
+          this.server = null;
+
+          resolve();
+        });
+
+        for (const socket of this.sockets) {
+          socket.destroy();
+        }
+
+        this.sockets = [];
+      });
+
+      if (this.middleware) {
+        await new Promise((resolve, reject) => {
+          this.middleware.close((error) => {
+            if (error) {
+              reject(error);
+
+              return;
+            }
+
+            resolve();
+          });
+        });
+
+        this.middleware = null;
+      }
+    }
+  }
+
+  stopCallback(callback) {
+    this.stop().then(() => callback(null), callback);
+  }
+
+  // TODO remove in the next major release
+  listen(port, hostname, fn) {
+    util.deprecate(
+      () => {},
+      "'listen' is deprecated. Please use async 'start' or 'startCallback' methods.",
+      "DEP_WEBPACK_DEV_SERVER_LISTEN"
+    )();
+
+    this.logger = this.compiler.getInfrastructureLogger("webpack-dev-server");
+
+    if (typeof port === "function") {
+      fn = port;
+    }
+
+    if (
+      typeof port !== "undefined" &&
+      typeof this.options.port !== "undefined" &&
+      port !== this.options.port
+    ) {
+      this.options.port = port;
+
+      this.logger.warn(
+        'The "port" specified in options is different from the port passed as an argument. Will be used from arguments.'
+      );
+    }
+
+    if (!this.options.port) {
+      this.options.port = port;
+    }
+
+    if (
+      typeof hostname !== "undefined" &&
+      typeof this.options.host !== "undefined" &&
+      hostname !== this.options.host
+    ) {
+      this.options.host = hostname;
+
+      this.logger.warn(
+        'The "host" specified in options is different from the host passed as an argument. Will be used from arguments.'
+      );
+    }
+
+    if (!this.options.host) {
+      this.options.host = hostname;
+    }
+
+    return this.start()
+      .then(() => {
+        if (fn) {
+          fn.call(this.server);
+        }
+      })
+      .catch((error) => {
+        // Nothing
+        if (fn) {
+          fn.call(this.server, error);
+        }
+      });
+  }
+
+  // TODO remove in the next major release
+  close(callback) {
+    util.deprecate(
+      () => {},
+      "'close' is deprecated. Please use async 'stop' or 'stopCallback' methods.",
+      "DEP_WEBPACK_DEV_SERVER_CLOSE"
+    )();
+
+    return this.stop()
+      .then(() => {
+        if (callback) {
+          callback(null);
+        }
+      })
+      .catch((error) => {
+        if (callback) {
+          callback(error);
+        }
+      });
+  }
 }
 
-module.exports = 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");
+    },
+  },
+});