webpack-dev-server 4.0.0 → 4.2.1

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(options.allowedHosts) &&
+      options.allowedHosts.includes("all")
+    ) {
+      options.allowedHosts = "all";
+    }
 
     if (typeof options.bonjour === "undefined") {
       options.bonjour = false;
@@ -291,24 +517,39 @@ class Server {
 
     // https option
     if (options.https) {
-      for (const property of ["cacert", "pfx", "key", "cert"]) {
+      // TODO remove the `cacert` option in favor `ca` in the next major release
+      for (const property of ["cacert", "ca", "cert", "crl", "key", "pfx"]) {
+        if (typeof options.https[property] === "undefined") {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
         const value = options.https[property];
-        const isBuffer = value instanceof Buffer;
+        const readFile = (item) => {
+          if (
+            Buffer.isBuffer(item) ||
+            (typeof item === "object" && item !== null && !Array.isArray(item))
+          ) {
+            return item;
+          }
 
-        if (value && !isBuffer) {
-          let stats = null;
+          if (item) {
+            let stats = null;
 
-          try {
-            stats = fs.lstatSync(fs.realpathSync(value)).isFile();
-          } catch (error) {
-            // ignore error
+            try {
+              stats = fs.lstatSync(fs.realpathSync(item)).isFile();
+            } catch (error) {
+              // Ignore error
+            }
+
+            // It is file
+            return stats ? fs.readFileSync(item) : item;
           }
+        };
 
-          // It is file
-          options.https[property] = stats
-            ? fs.readFileSync(path.resolve(value))
-            : value;
-        }
+        options.https[property] = Array.isArray(value)
+          ? value.map((item) => readFile(item))
+          : readFile(value);
       }
 
       let fakeCert;
@@ -316,11 +557,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 +580,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,17 +653,34 @@ 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}`);
       }
 
+      if (options.https.cacert) {
+        if (options.https.ca) {
+          this.logger.warn(
+            "Do not specify 'https.ca' and 'https.cacert' options together, the 'https.ca' option will be used."
+          );
+        } else {
+          options.https.ca = options.https.cacert;
+        }
+
+        delete options.https.cacert;
+      }
+
       options.https.key = options.https.key || fakeCert;
       options.https.cert = options.https.cert || fakeCert;
     }
@@ -431,6 +696,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 +935,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;
 
-    const compilers = this.compiler.compilers || [this.compiler];
+    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;
+    }
 
-    // eslint-disable-next-line no-shadow
-    compilers.forEach((compiler) => {
-      new DevServerPlugin(this.options).apply(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"
+      );
+    }
+
+    return implementation;
   }
 
   setupProgressPlugin() {
@@ -744,6 +1062,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
@@ -762,26 +1150,18 @@ class Server {
   }
 
   setupHooks() {
-    const addHooks = (compiler) => {
-      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));
-        }
-
-        this.stats = stats;
-      });
-    };
+    this.compiler.hooks.invalid.tap("webpack-dev-server", () => {
+      if (this.webSocketServer) {
+        this.sendMessage(this.webSocketServer.clients, "invalid");
+      }
+    });
+    this.compiler.hooks.done.tap("webpack-dev-server", (stats) => {
+      if (this.webSocketServer) {
+        this.sendStats(this.webSocketServer.clients, this.getStats(stats));
+      }
 
-    if (this.compiler.compilers) {
-      this.compiler.compilers.forEach(addHooks);
-    } else {
-      addHooks(this.compiler);
-    }
+      this.stats = stats;
+    });
   }
 
   setupHostHeaderCheck() {
@@ -810,7 +1190,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 +1259,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 +1295,7 @@ class Server {
           ? proxyConfigOrCallback()
           : proxyConfigOrCallback;
 
-      if (!proxyConfig.bypass) {
-        proxyMiddleware = getProxyMiddleware(proxyConfig);
-      }
+      proxyMiddleware = getProxyMiddleware(proxyConfig);
 
       if (proxyConfig.ws) {
         this.webSocketProxies.push(proxyMiddleware);
@@ -1132,7 +1512,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 +1564,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
@@ -1525,6 +1869,10 @@ class Server {
       return false;
     }
 
+    if (/^(file|.+-extension):/i.test(hostHeader)) {
+      return true;
+    }
+
     // use the node url-parser to retrieve the hostname from the host-header.
     const hostname = url.parse(
       // if hostHeader doesn't have scheme, add // for parsing.
@@ -1763,7 +2111,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) {