webpack-dev-server 4.0.0 → 4.1.0

package/README.md

@@ -132,6 +132,8 @@ Options:
   --ipc [value]                             Listen to a unix socket.
   --live-reload                             Enables reload/refresh the page(s) when file changes are detected (enabled by default).
   --no-live-reload                          Negative 'live-reload' option.
+  --magic-html                              Enables/Disables magic HTML routes (enabled by default).
+  --no-magic-html                           Negative 'magic-html' option.
   --open [value...]                         Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to
                                             true to open your default browser).
   --no-open                                 Negative 'open' option.

package/bin/cli-flags.js

@@ -534,6 +534,19 @@ module.exports = {
     simpleType: "boolean",
     multiple: false,
   },
+  "magic-html": {
+    configs: [
+      {
+        type: "boolean",
+        multiple: false,
+        description: "Enables/Disables magic HTML routes (enabled by default).",
+        path: "magicHtml",
+      },
+    ],
+    description: "Enables/Disables magic HTML routes (enabled by default).",
+    simpleType: "boolean",
+    multiple: false,
+  },
   open: {
     configs: [
       {

package/client/index.js

@@ -23,6 +23,16 @@ var options = {
 };
 var parsedResourceQuery = parseURL(__resourceQuery);
 
+if (parsedResourceQuery.hot === "true") {
+  options.hot = true;
+  log.info("Hot Module Replacement enabled.");
+}
+
+if (parsedResourceQuery["live-reload"] === "true") {
+  options.liveReload = true;
+  log.info("Live Reloading enabled.");
+}
+
 if (parsedResourceQuery.logging) {
   options.logging = parsedResourceQuery.logging;
 }
@@ -158,7 +168,7 @@ var onSocketMessage = {
     log.error(_error);
   },
   close: function close() {
-    log.error("Disconnected!");
+    log.info("Disconnected!");
     sendMessage("Close");
   }
 };

package/lib/Server.js

@@ -126,6 +126,227 @@ class Server {
     return path.resolve(dir, "node_modules/.cache/webpack-dev-server");
   }
 
+  addAdditionalEntries(compiler) {
+    const additionalEntries = [];
+
+    const isWebTarget = compiler.options.externalsPresets
+      ? compiler.options.externalsPresets.web
+      : [
+          "web",
+          "webworker",
+          "electron-preload",
+          "electron-renderer",
+          "node-webkit",
+          // eslint-disable-next-line no-undefined
+          undefined,
+          null,
+        ].includes(compiler.options.target);
+
+    // TODO maybe empty empty client
+    if (this.options.client && isWebTarget) {
+      let webSocketURL = "";
+      if (this.options.webSocketServer) {
+        const searchParams = new URLSearchParams();
+
+        /** @type {"ws:" | "wss:" | "http:" | "https:" | "auto:"} */
+        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;
+        } else {
+          protocol = this.options.https ? "wss:" : "ws:";
+        }
+
+        searchParams.set("protocol", protocol);
+
+        if (typeof this.options.client.webSocketURL.username !== "undefined") {
+          searchParams.set(
+            "username",
+            this.options.client.webSocketURL.username
+          );
+        }
+
+        if (typeof this.options.client.webSocketURL.password !== "undefined") {
+          searchParams.set(
+            "password",
+            this.options.client.webSocketURL.password
+          );
+        }
+
+        /** @type {string} */
+        let hostname;
+
+        // SockJS is not supported server mode, so `hostname` and `port` can't specified, let's ignore them
+        // TODO show warning about this
+        const isSockJSType = this.options.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;
+        }
+        // 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" &&
+          !isSockJSType
+        ) {
+          hostname = this.options.webSocketServer.options.host;
+        }
+        // The `host` option is specified
+        else if (typeof this.options.host !== "undefined") {
+          hostname = this.options.host;
+        }
+        // The `port` option is not specified
+        else {
+          hostname = "0.0.0.0";
+        }
+
+        searchParams.set("hostname", hostname);
+
+        /** @type {number | string} */
+        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;
+        }
+        // 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" &&
+          !isSockJSType
+        ) {
+          port = this.options.webSocketServer.options.port;
+        }
+        // The `port` option is specified
+        else if (typeof this.options.port === "number") {
+          port = this.options.port;
+        }
+        // The `port` option is specified using `string`
+        else if (
+          typeof this.options.port === "string" &&
+          this.options.port !== "auto"
+        ) {
+          port = Number(this.options.port);
+        }
+        // The `port` option is not specified or set to `auto`
+        else {
+          port = "0";
+        }
+
+        searchParams.set("port", String(port));
+
+        /** @type {string} */
+        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;
+        }
+        // Web socket server works on custom `path`
+        else if (
+          typeof this.options.webSocketServer.options.prefix !== "undefined" ||
+          typeof this.options.webSocketServer.options.path !== "undefined"
+        ) {
+          pathname =
+            this.options.webSocketServer.options.prefix ||
+            this.options.webSocketServer.options.path;
+        }
+
+        searchParams.set("pathname", pathname);
+
+        if (typeof this.options.client.logging !== "undefined") {
+          searchParams.set("logging", this.options.client.logging);
+        }
+
+        webSocketURL = searchParams.toString();
+      }
+
+      additionalEntries.push(
+        `${require.resolve("../client/index.js")}?${webSocketURL}`
+      );
+    }
+
+    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);
+    }
+
+    const webpack = compiler.webpack || require("webpack");
+
+    // use a hook to add entries if available
+    if (typeof webpack.EntryPlugin !== "undefined") {
+      for (const additionalEntry of additionalEntries) {
+        new webpack.EntryPlugin(compiler.context, additionalEntry, {
+          // eslint-disable-next-line no-undefined
+          name: undefined,
+        }).apply(compiler);
+      }
+    }
+    // TODO remove after drop webpack v4 support
+    else {
+      /**
+       * prependEntry Method for webpack 4
+       * @param {Entry} originalEntry
+       * @param {Entry} newAdditionalEntries
+       * @returns {Entry}
+       */
+      const prependEntry = (originalEntry, newAdditionalEntries) => {
+        if (typeof originalEntry === "function") {
+          return () =>
+            Promise.resolve(originalEntry()).then((entry) =>
+              prependEntry(entry, newAdditionalEntries)
+            );
+        }
+
+        if (
+          typeof originalEntry === "object" &&
+          !Array.isArray(originalEntry)
+        ) {
+          /** @type {Object<string,string>} */
+          const clone = {};
+
+          Object.keys(originalEntry).forEach((key) => {
+            // entry[key] should be a string here
+            const entryDescription = originalEntry[key];
+
+            clone[key] = prependEntry(entryDescription, newAdditionalEntries);
+          });
+
+          return clone;
+        }
+
+        // in this case, entry is a string or an array.
+        // make sure that we do not add duplicates.
+        /** @type {Entry} */
+        const entriesClone = additionalEntries.slice(0);
+
+        [].concat(originalEntry).forEach((newEntry) => {
+          if (!entriesClone.includes(newEntry)) {
+            entriesClone.push(newEntry);
+          }
+        });
+
+        return entriesClone;
+      };
+
+      compiler.options.entry = prependEntry(
+        compiler.options.entry || "./src",
+        additionalEntries
+      );
+      compiler.hooks.entryOption.call(
+        compiler.options.context,
+        compiler.options.entry
+      );
+    }
+  }
+
   getCompilerOptions() {
     if (typeof this.compiler.compilers !== "undefined") {
       if (this.compiler.compilers.length === 1) {
@@ -190,19 +411,24 @@ class Server {
     };
 
     if (typeof options.allowedHosts === "undefined") {
-      // allowedHosts allows some default hosts picked from
-      // `options.host` or `webSocketURL.hostname` and `localhost`
+      // AllowedHosts allows some default hosts picked from `options.host` or `webSocketURL.hostname` and `localhost`
       options.allowedHosts = "auto";
     }
-
-    if (
+    // We store allowedHosts as array when supplied as string
+    else if (
       typeof options.allowedHosts === "string" &&
       options.allowedHosts !== "auto" &&
       options.allowedHosts !== "all"
     ) {
-      // we store allowedHosts as array when supplied as string
       options.allowedHosts = [options.allowedHosts];
     }
+    // CLI pass options as array, we should normalize them
+    else if (
+      Array.isArray(this.options.allowedHosts) &&
+      this.options.allowedHosts.includes("all")
+    ) {
+      options.allowedHosts = "all";
+    }
 
     if (typeof options.bonjour === "undefined") {
       options.bonjour = false;
@@ -316,11 +542,18 @@ class Server {
       if (!options.https.key || !options.https.cert) {
         const certificateDir = Server.findCacheDir();
         const certificatePath = path.join(certificateDir, "server.pem");
-        let certificateExists = fs.existsSync(certificatePath);
+        let certificateExists;
+
+        try {
+          const certificate = await fs.promises.stat(certificatePath);
+          certificateExists = certificate.isFile();
+        } catch {
+          certificateExists = false;
+        }
 
         if (certificateExists) {
           const certificateTtl = 1000 * 60 * 60 * 24;
-          const certificateStat = fs.statSync(certificatePath);
+          const certificateStat = await fs.promises.stat(certificatePath);
 
           const now = new Date();
 
@@ -332,7 +565,7 @@ class Server {
               "SSL Certificate is more than 30 days old. Removing..."
             );
 
-            del.sync([certificatePath], { force: true });
+            await del([certificatePath], { force: true });
 
             certificateExists = false;
           }
@@ -405,13 +638,18 @@ class Server {
             ],
           });
 
-          fs.mkdirSync(certificateDir, { recursive: true });
-          fs.writeFileSync(certificatePath, pems.private + pems.cert, {
-            encoding: "utf8",
-          });
+          await fs.promises.mkdir(certificateDir, { recursive: true });
+
+          await fs.promises.writeFile(
+            certificatePath,
+            pems.private + pems.cert,
+            {
+              encoding: "utf8",
+            }
+          );
         }
 
-        fakeCert = fs.readFileSync(certificatePath);
+        fakeCert = await fs.promises.readFile(certificatePath);
 
         this.logger.info(`SSL certificate: ${certificatePath}`);
       }
@@ -431,6 +669,9 @@ class Server {
     options.liveReload =
       typeof options.liveReload !== "undefined" ? options.liveReload : true;
 
+    options.magicHtml =
+      typeof options.magicHtml !== "undefined" ? options.magicHtml : true;
+
     // https://github.com/webpack/webpack-dev-server/issues/1990
     const defaultOpenOptions = { wait: false };
     const getOpenItemsFromObject = ({ target, ...rest }) => {
@@ -667,53 +908,103 @@ class Server {
     }
   }
 
-  async initialize() {
-    this.applyDevServerPlugin();
+  getClientTransport() {
+    let ClientImplementation;
+    let clientImplementationFound = true;
 
-    if (this.options.client && this.options.client.progress) {
-      this.setupProgressPlugin();
-    }
+    const isKnownWebSocketServerImplementation =
+      this.options.webSocketServer &&
+      typeof this.options.webSocketServer.type === "string" &&
+      (this.options.webSocketServer.type === "ws" ||
+        this.options.webSocketServer.type === "sockjs");
 
-    this.setupHooks();
-    this.setupApp();
-    this.setupHostHeaderCheck();
-    this.setupDevMiddleware();
-    // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
-    this.setupBuiltInRoutes();
-    this.setupWatchFiles();
-    this.setupFeatures();
-    this.createServer();
+    let clientTransport;
 
-    if (this.options.setupExitSignals) {
-      const signals = ["SIGINT", "SIGTERM"];
+    if (this.options.client) {
+      if (typeof this.options.client.webSocketTransport !== "undefined") {
+        clientTransport = this.options.client.webSocketTransport;
+      } else if (isKnownWebSocketServerImplementation) {
+        clientTransport = this.options.webSocketServer.type;
+      } else {
+        clientTransport = "ws";
+      }
+    } else {
+      clientTransport = "ws";
+    }
 
-      signals.forEach((signal) => {
-        process.on(signal, () => {
-          this.stopCallback(() => {
-            // eslint-disable-next-line no-process-exit
-            process.exit();
-          });
-        });
-      });
+    switch (typeof clientTransport) {
+      case "string":
+        // could be 'sockjs', 'ws', or a path that should be required
+        if (clientTransport === "sockjs") {
+          ClientImplementation = require.resolve(
+            "../client/clients/SockJSClient"
+          );
+        } else if (clientTransport === "ws") {
+          ClientImplementation = require.resolve(
+            "../client/clients/WebSocketClient"
+          );
+        } else {
+          try {
+            // eslint-disable-next-line import/no-dynamic-require
+            ClientImplementation = require.resolve(clientTransport);
+          } catch (e) {
+            clientImplementationFound = false;
+          }
+        }
+        break;
+      default:
+        clientImplementationFound = false;
     }
 
-    // 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);
-    }, this);
+    if (!clientImplementationFound) {
+      throw new Error(
+        `${
+          !isKnownWebSocketServerImplementation
+            ? "When you use custom web socket implementation you must explicitly specify client.webSocketTransport. "
+            : ""
+        }client.webSocketTransport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class `
+      );
+    }
+
+    return ClientImplementation;
   }
 
-  applyDevServerPlugin() {
-    const DevServerPlugin = require("./utils/DevServerPlugin");
+  getServerTransport() {
+    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;
+    }
 
-    const compilers = this.compiler.compilers || [this.compiler];
+    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"
+      );
+    }
 
-    // eslint-disable-next-line no-shadow
-    compilers.forEach((compiler) => {
-      new DevServerPlugin(this.options).apply(compiler);
-    });
+    return implementation;
   }
 
   setupProgressPlugin() {
@@ -744,6 +1035,76 @@ class Server {
     }).apply(this.compiler);
   }
 
+  async initialize() {
+    const compilers = this.compiler.compilers || [this.compiler];
+
+    // eslint-disable-next-line no-shadow
+    compilers.forEach((compiler) => {
+      this.addAdditionalEntries(compiler);
+
+      const webpack = compiler.webpack || require("webpack");
+
+      const providePlugin = new webpack.ProvidePlugin({
+        __webpack_dev_server_client__: this.getClientTransport(),
+      });
+
+      providePlugin.apply(compiler);
+
+      // TODO remove after drop webpack v4 support
+      compiler.options.plugins = compiler.options.plugins || [];
+
+      if (this.options.hot) {
+        const HMRPluginExists = compiler.options.plugins.find(
+          (p) => p.constructor === webpack.HotModuleReplacementPlugin
+        );
+
+        if (HMRPluginExists) {
+          this.logger.warn(
+            `"hot: true" automatically applies HMR plugin, you don't have to add it manually to your webpack configuration.`
+          );
+        } else {
+          // apply the HMR plugin
+          const plugin = new webpack.HotModuleReplacementPlugin();
+          plugin.apply(compiler);
+        }
+      }
+    });
+
+    if (this.options.client && this.options.client.progress) {
+      this.setupProgressPlugin();
+    }
+
+    this.setupHooks();
+    this.setupApp();
+    this.setupHostHeaderCheck();
+    this.setupDevMiddleware();
+    // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
+    this.setupBuiltInRoutes();
+    this.setupWatchFiles();
+    this.setupFeatures();
+    this.createServer();
+
+    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 (webSocketProxy) {
+      this.server.on("upgrade", webSocketProxy.upgrade);
+    }, this);
+  }
+
   setupApp() {
     // Init express server
     // eslint-disable-next-line new-cap
@@ -810,7 +1171,7 @@ class Server {
     app.get("/__webpack_dev_server__/sockjs.bundle.js", (req, res) => {
       res.setHeader("Content-Type", "application/javascript");
 
-      const { createReadStream } = require("graceful-fs");
+      const { createReadStream } = fs;
       const clientPath = path.join(__dirname, "..", "client");
 
       createReadStream(
@@ -879,15 +1240,17 @@ class Server {
     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`.
+      // 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 (context) {
+      if (proxyConfig.target) {
+        const context = proxyConfig.context || proxyConfig.path;
+
         return createProxyMiddleware(context, proxyConfig);
       }
 
-      return createProxyMiddleware(proxyConfig);
+      if (proxyConfig.router) {
+        return createProxyMiddleware(proxyConfig);
+      }
     };
     /**
      * Assume a proxy configuration specified as:
@@ -913,9 +1276,7 @@ class Server {
           ? proxyConfigOrCallback()
           : proxyConfigOrCallback;
 
-      if (!proxyConfig.bypass) {
-        proxyMiddleware = getProxyMiddleware(proxyConfig);
-      }
+      proxyMiddleware = getProxyMiddleware(proxyConfig);
 
       if (proxyConfig.ws) {
         this.webSocketProxies.push(proxyMiddleware);
@@ -1132,7 +1493,9 @@ class Server {
       runnableFeatures.push("staticServeIndex", "staticWatch");
     }
 
-    runnableFeatures.push("magicHtml");
+    if (this.options.magicHtml) {
+      runnableFeatures.push("magicHtml");
+    }
 
     if (this.options.onAfterSetupMiddleware) {
       runnableFeatures.push("onAfterSetupMiddleware");
@@ -1182,46 +1545,8 @@ class Server {
     });
   }
 
-  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 = new (this.getServerTransport())(this);
     this.webSocketServer.implementation.on("connection", (client, request) => {
       const headers =
         // eslint-disable-next-line no-nested-ternary
@@ -1763,7 +2088,7 @@ class Server {
       // chmod 666 (rw rw rw)
       const READ_WRITE = 438;
 
-      fs.chmodSync(this.options.ipc, READ_WRITE);
+      await fs.promises.chmod(this.options.ipc, READ_WRITE);
     }
 
     if (this.options.webSocketServer) {

package/lib/options.json

@@ -71,12 +71,14 @@
     },
     "ClientLogging": {
       "enum": ["none", "error", "warn", "info", "log", "verbose"],
-      "decription": "Allows to set log level in the browser."
+      "decription": "Allows to set log level in the browser.",
+      "link": "https://webpack.js.org/configuration/dev-server/#logging"
     },
     "ClientOverlay": {
       "anyOf": [
         {
           "description": "Enables a full-screen overlay in the browser when there are compiler errors or warnings.",
+          "link": "https://webpack.js.org/configuration/dev-server/#overlay",
           "type": "boolean"
         },
         {
@@ -97,6 +99,7 @@
     },
     "ClientProgress": {
       "description": "Prints compilation progress in percentage in the browser.",
+      "link": "https://webpack.js.org/configuration/dev-server/#progress",
       "type": "boolean"
     },
     "ClientWebSocketTransport": {
@@ -108,7 +111,8 @@
           "$ref": "#/definitions/ClientWebSocketTransportString"
         }
       ],
-      "description": "Allows to set custom web socket transport to communicate with dev server."
+      "description": "Allows to set custom web socket transport to communicate with dev server.",
+      "link": "https://webpack.js.org/configuration/dev-server/#websockettransport"
     },
     "ClientWebSocketTransportEnum": {
       "enum": ["sockjs", "ws"]
@@ -119,6 +123,7 @@
     },
     "ClientWebSocketURL": {
       "description": "Allows to specify URL to web socket server (useful when you're proxying dev server and client script does not always know where to connect to).",
+      "link": "https://webpack.js.org/configuration/dev-server/#websocketurl",
       "anyOf": [
         {
           "type": "string",
@@ -326,6 +331,11 @@
       "description": "Enables reload/refresh the page(s) when file changes are detected (enabled by default).",
       "link": "https://webpack.js.org/configuration/dev-server/#devserverlivereload"
     },
+    "MagicHTML": {
+      "type": "boolean",
+      "description": "Enables/Disables magic HTML routes (enabled by default).",
+      "link": "https://webpack.js.org/configuration/dev-server/#devservermagichtml"
+    },
     "OnAfterSetupMiddleware": {
       "instanceof": "Function",
       "description": "Provides the ability to execute a custom function and apply custom middleware(s) after all other middlewares.",
@@ -514,10 +524,12 @@
         "directory": {
           "type": "string",
           "minLength": 1,
-          "description": "Directory for static contents."
+          "description": "Directory for static contents.",
+          "link": "https://webpack.js.org/configuration/dev-server/#directory"
         },
         "staticOptions": {
           "type": "object",
+          "link": "https://webpack.js.org/configuration/dev-server/#staticoptions",
           "additionalProperties": true
         },
         "publicPath": {
@@ -533,7 +545,8 @@
               "type": "string"
             }
           ],
-          "description": "The static files will be available in the browser under this public path."
+          "description": "The static files will be available in the browser under this public path.",
+          "link": "https://webpack.js.org/configuration/dev-server/#publicpath"
         },
         "serveIndex": {
           "anyOf": [
@@ -545,7 +558,8 @@
               "additionalProperties": true
             }
           ],
-          "description": "Tells dev server to use serveIndex middleware when enabled."
+          "description": "Tells dev server to use serveIndex middleware when enabled.",
+          "link": "https://webpack.js.org/configuration/dev-server/#serveindex"
         },
         "watch": {
           "anyOf": [
@@ -558,7 +572,8 @@
               "link": "https://github.com/paulmillr/chokidar#api"
             }
           ],
-          "description": "Watches for files in static content directory."
+          "description": "Watches for files in static content directory.",
+          "link": "https://webpack.js.org/configuration/dev-server/#watch"
         }
       }
     },
@@ -719,6 +734,9 @@
     "liveReload": {
       "$ref": "#/definitions/LiveReload"
     },
+    "magicHtml": {
+      "$ref": "#/definitions/MagicHTML"
+    },
     "onAfterSetupMiddleware": {
       "$ref": "#/definitions/OnAfterSetupMiddleware"
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-server",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Serves a webpack app. Updates the browser on changes.",
   "bin": "bin/webpack-dev-server.js",
   "main": "lib/Server.js",

package/lib/utils/DevServerPlugin.js

@@ -1,352 +0,0 @@
-"use strict";
-
-/**
- * An Entry, it can be of type string or string[] or Object<string | string[],string>
- * @typedef {(string[] | string | Object<string | string[],string>)} Entry
- */
-
-class DevServerPlugin {
-  /**
-   * @param {Object} options - Dev-Server options
-   */
-  constructor(options) {
-    this.options = options;
-  }
-
-  getWebsocketTransport() {
-    let ClientImplementation;
-    let clientImplementationFound = true;
-
-    const isKnownWebSocketServerImplementation =
-      this.options.webSocketServer &&
-      typeof this.options.webSocketServer.type === "string" &&
-      (this.options.webSocketServer.type === "ws" ||
-        this.options.webSocketServer.type === "sockjs");
-
-    let clientTransport;
-
-    if (this.options.client) {
-      if (typeof this.options.client.webSocketTransport !== "undefined") {
-        clientTransport = this.options.client.webSocketTransport;
-      } else if (isKnownWebSocketServerImplementation) {
-        clientTransport = this.options.webSocketServer.type;
-      } else {
-        clientTransport = "ws";
-      }
-    } else {
-      clientTransport = "ws";
-    }
-
-    switch (typeof clientTransport) {
-      case "string":
-        // could be 'sockjs', 'ws', or a path that should be required
-        if (clientTransport === "sockjs") {
-          ClientImplementation = require.resolve(
-            "../../client/clients/SockJSClient"
-          );
-        } else if (clientTransport === "ws") {
-          ClientImplementation = require.resolve(
-            "../../client/clients/WebSocketClient"
-          );
-        } else {
-          try {
-            // eslint-disable-next-line import/no-dynamic-require
-            ClientImplementation = require.resolve(clientTransport);
-          } catch (e) {
-            clientImplementationFound = false;
-          }
-        }
-        break;
-      default:
-        clientImplementationFound = false;
-    }
-
-    if (!clientImplementationFound) {
-      throw new Error(
-        `${
-          !isKnownWebSocketServerImplementation
-            ? "When you use custom web socket implementation you must explicitly specify client.webSocketTransport. "
-            : ""
-        }client.webSocketTransport must be a string denoting a default implementation (e.g. 'sockjs', 'ws') or a full path to a JS file via require.resolve(...) which exports a class `
-      );
-    }
-
-    return ClientImplementation;
-  }
-
-  /**
-   * @returns {string}
-   */
-  getWebSocketURL() {
-    const { options } = this;
-    const searchParams = new URLSearchParams();
-
-    /** @type {"ws:" | "wss:" | "http:" | "https:" | "auto:"} */
-    let protocol;
-
-    // We are proxying dev server and need to specify custom `hostname`
-    if (typeof options.client.webSocketURL.protocol !== "undefined") {
-      protocol = options.client.webSocketURL.protocol;
-    } else {
-      protocol = options.https ? "wss:" : "ws:";
-    }
-
-    searchParams.set("protocol", protocol);
-
-    if (typeof options.client.webSocketURL.username !== "undefined") {
-      searchParams.set("username", options.client.webSocketURL.username);
-    }
-
-    if (typeof options.client.webSocketURL.password !== "undefined") {
-      searchParams.set("password", options.client.webSocketURL.password);
-    }
-
-    /** @type {string} */
-    let hostname;
-
-    // SockJS is not supported server mode, so `hostname` and `port` can't specified, let's ignore them
-    // TODO show warning about this
-    const isSockJSType = options.webSocketServer.type === "sockjs";
-
-    // We are proxying dev server and need to specify custom `hostname`
-    if (typeof options.client.webSocketURL.hostname !== "undefined") {
-      hostname = options.client.webSocketURL.hostname;
-    }
-    // Web socket server works on custom `hostname`, only for `ws` because `sock-js` is not support custom `hostname`
-    else if (
-      typeof options.webSocketServer.options.host !== "undefined" &&
-      !isSockJSType
-    ) {
-      hostname = options.webSocketServer.options.host;
-    }
-    // The `host` option is specified
-    else if (typeof this.options.host !== "undefined") {
-      hostname = this.options.host;
-    }
-    // The `port` option is not specified
-    else {
-      hostname = "0.0.0.0";
-    }
-
-    searchParams.set("hostname", hostname);
-
-    /** @type {number | string} */
-    let port;
-
-    // We are proxying dev server and need to specify custom `port`
-    if (typeof options.client.webSocketURL.port !== "undefined") {
-      port = options.client.webSocketURL.port;
-    }
-    // Web socket server works on custom `port`, only for `ws` because `sock-js` is not support custom `port`
-    else if (
-      typeof options.webSocketServer.options.port !== "undefined" &&
-      !isSockJSType
-    ) {
-      port = options.webSocketServer.options.port;
-    }
-    // The `port` option is specified
-    else if (typeof options.port === "number") {
-      port = options.port;
-    }
-    // The `port` option is specified using `string`
-    else if (typeof options.port === "string" && options.port !== "auto") {
-      port = Number(options.port);
-    }
-    // The `port` option is not specified or set to `auto`
-    else {
-      port = "0";
-    }
-
-    searchParams.set("port", String(port));
-
-    /** @type {string} */
-    let pathname = "";
-
-    // We are proxying dev server and need to specify custom `pathname`
-    if (typeof options.client.webSocketURL.pathname !== "undefined") {
-      pathname = options.client.webSocketURL.pathname;
-    }
-    // Web socket server works on custom `path`
-    else if (
-      typeof options.webSocketServer.options.prefix !== "undefined" ||
-      typeof options.webSocketServer.options.path !== "undefined"
-    ) {
-      pathname =
-        options.webSocketServer.options.prefix ||
-        options.webSocketServer.options.path;
-    }
-
-    searchParams.set("pathname", pathname);
-
-    if (typeof options.client.logging !== "undefined") {
-      searchParams.set("logging", options.client.logging);
-    }
-
-    return searchParams.toString();
-  }
-
-  /**
-   * @returns {string}
-   */
-  getClientEntry() {
-    /** @type {string} */
-    const webSocketURL = this.options.webSocketServer
-      ? this.getWebSocketURL()
-      : "";
-
-    return `${require.resolve("../../client/index.js")}?${webSocketURL}`;
-  }
-
-  getHotEntry() {
-    const { options } = this;
-
-    /** @type {(string[] | string)} */
-    let hotEntry;
-
-    if (options.hot === "only") {
-      hotEntry = require.resolve("webpack/hot/only-dev-server");
-    } else if (options.hot) {
-      hotEntry = require.resolve("webpack/hot/dev-server");
-    }
-
-    return hotEntry;
-  }
-
-  /**
-   * @param {Object} compilerOptions
-   * @returns {boolean}
-   */
-  // eslint-disable-next-line class-methods-use-this
-  isWebTarget(compilerOptions) {
-    return compilerOptions.externalsPresets
-      ? compilerOptions.externalsPresets.web
-      : [
-          "web",
-          "webworker",
-          "electron-preload",
-          "electron-renderer",
-          "node-webkit",
-          // eslint-disable-next-line no-undefined
-          undefined,
-          null,
-        ].includes(compilerOptions.target);
-  }
-
-  /**
-   * Apply the plugin
-   * @param {Object} compiler the compiler instance
-   * @returns {void}
-   */
-  apply(compiler) {
-    /**
-     *
-     * Description of the option for checkInject method
-     * @typedef {Function} checkInjectOptionsParam
-     * @param {Object} _config - compilerConfig
-     * @return {Boolean}
-     */
-
-    const additionalEntries = [];
-
-    // TODO maybe empty empty client
-    if (this.options.client && this.isWebTarget(compiler.options)) {
-      const clientEntry = this.getClientEntry();
-
-      additionalEntries.push(clientEntry);
-    }
-
-    if (this.options.hot) {
-      const hotEntry = this.getHotEntry();
-
-      additionalEntries.push(hotEntry);
-    }
-
-    const webpack = compiler.webpack || require("webpack");
-
-    // use a hook to add entries if available
-    if (typeof webpack.EntryPlugin !== "undefined") {
-      for (const additionalEntry of additionalEntries) {
-        new webpack.EntryPlugin(compiler.context, additionalEntry, {
-          // eslint-disable-next-line no-undefined
-          name: undefined,
-        }).apply(compiler);
-      }
-    } else {
-      /**
-       * prependEntry Method for webpack 4
-       * @param {Entry} originalEntry
-       * @param {Entry} newAdditionalEntries
-       * @returns {Entry}
-       */
-      const prependEntry = (originalEntry, newAdditionalEntries) => {
-        if (typeof originalEntry === "function") {
-          return () =>
-            Promise.resolve(originalEntry()).then((entry) =>
-              prependEntry(entry, newAdditionalEntries)
-            );
-        }
-
-        if (
-          typeof originalEntry === "object" &&
-          !Array.isArray(originalEntry)
-        ) {
-          /** @type {Object<string,string>} */
-          const clone = {};
-
-          Object.keys(originalEntry).forEach((key) => {
-            // entry[key] should be a string here
-            const entryDescription = originalEntry[key];
-
-            clone[key] = prependEntry(entryDescription, newAdditionalEntries);
-          });
-
-          return clone;
-        }
-
-        // in this case, entry is a string or an array.
-        // make sure that we do not add duplicates.
-        /** @type {Entry} */
-        const entriesClone = additionalEntries.slice(0);
-
-        [].concat(originalEntry).forEach((newEntry) => {
-          if (!entriesClone.includes(newEntry)) {
-            entriesClone.push(newEntry);
-          }
-        });
-
-        return entriesClone;
-      };
-
-      compiler.options.entry = prependEntry(
-        compiler.options.entry || "./src",
-        additionalEntries
-      );
-      compiler.hooks.entryOption.call(
-        compiler.options.context,
-        compiler.options.entry
-      );
-    }
-
-    const providePlugin = new webpack.ProvidePlugin({
-      __webpack_dev_server_client__: this.getWebsocketTransport(),
-    });
-
-    providePlugin.apply(compiler);
-
-    compiler.options.plugins = compiler.options.plugins || [];
-
-    if (
-      this.options.hot &&
-      !compiler.options.plugins.find(
-        (p) => p.constructor === webpack.HotModuleReplacementPlugin
-      )
-    ) {
-      // apply the HMR plugin, if it didn't exist before.
-      const plugin = new webpack.HotModuleReplacementPlugin();
-
-      plugin.apply(compiler);
-    }
-  }
-}
-
-module.exports = DevServerPlugin;