webpack-dev-server 4.2.0 → 4.4.0

package/lib/Server.js

@@ -36,13 +36,13 @@ class Server {
     this.webSocketProxies = [];
     this.sockets = [];
     this.compiler = compiler;
+    this.currentHash = null;
   }
 
   static get DEFAULT_STATS() {
     return {
       all: false,
       hash: true,
-      assets: true,
       warnings: true,
       errors: true,
       errorDetails: false,
@@ -74,7 +74,7 @@ class Server {
   }
 
   static async getFreePort(port) {
-    if (port && port !== "auto") {
+    if (typeof port !== "undefined" && port !== null && port !== "auto") {
       return port;
     }
 
@@ -155,7 +155,7 @@ class Server {
         if (typeof this.options.client.webSocketURL.protocol !== "undefined") {
           protocol = this.options.client.webSocketURL.protocol;
         } else {
-          protocol = this.options.https ? "wss:" : "ws:";
+          protocol = this.options.server.type === "http" ? "ws:" : "wss:";
         }
 
         searchParams.set("protocol", protocol);
@@ -258,6 +258,10 @@ class Server {
           searchParams.set("logging", this.options.client.logging);
         }
 
+        if (typeof this.options.client.reconnect !== "undefined") {
+          searchParams.set("reconnect", this.options.client.reconnect);
+        }
+
         webSocketURL = searchParams.toString();
       }
 
@@ -474,6 +478,14 @@ class Server {
         };
       }
 
+      if (typeof options.client.reconnect === "undefined") {
+        options.client.reconnect = 10;
+      } else if (options.client.reconnect === true) {
+        options.client.reconnect = Infinity;
+      } else if (options.client.reconnect === false) {
+        options.client.reconnect = 0;
+      }
+
       // Respect infrastructureLogging.level
       if (typeof options.client.logging === "undefined") {
         options.client.logging = compilerOptions.infrastructureLogging
@@ -508,23 +520,51 @@ class Server {
         ? options.hot
         : true;
 
-    // if the user enables http2, we can safely enable https
-    if ((options.http2 && !options.https) || options.https === true) {
-      options.https = {
-        requestCert: false,
+    const isHTTPs = Boolean(options.https);
+    const isSPDY = Boolean(options.http2);
+
+    options.server = {
+      type:
+        // eslint-disable-next-line no-nested-ternary
+        typeof options.server === "string"
+          ? options.server
+          : // eslint-disable-next-line no-nested-ternary
+          typeof (options.server || {}).type === "string"
+          ? options.server.type
+          : // eslint-disable-next-line no-nested-ternary
+          isSPDY
+          ? "spdy"
+          : isHTTPs
+          ? "https"
+          : "http",
+      options: {
+        ...options.https,
+        ...(options.server || {}).options,
+      },
+    };
+
+    if (
+      options.server.type === "spdy" &&
+      typeof options.server.options.spdy === "undefined"
+    ) {
+      options.server.options.spdy = {
+        protocols: ["h2", "http/1.1"],
       };
     }
 
-    // https option
-    if (options.https) {
+    if (options.server.type === "https" || options.server.type === "spdy") {
+      if (typeof options.server.options.requestCert === "undefined") {
+        options.server.options.requestCert = false;
+      }
+
       // TODO remove the `cacert` option in favor `ca` in the next major release
       for (const property of ["cacert", "ca", "cert", "crl", "key", "pfx"]) {
-        if (typeof options.https[property] === "undefined") {
+        if (typeof options.server.options[property] === "undefined") {
           // eslint-disable-next-line no-continue
           continue;
         }
 
-        const value = options.https[property];
+        const value = options.server.options[property];
         const readFile = (item) => {
           if (
             Buffer.isBuffer(item) ||
@@ -547,14 +587,14 @@ class Server {
           }
         };
 
-        options.https[property] = Array.isArray(value)
+        options.server.options[property] = Array.isArray(value)
           ? value.map((item) => readFile(item))
           : readFile(value);
       }
 
       let fakeCert;
 
-      if (!options.https.key || !options.https.cert) {
+      if (!options.server.options.key || !options.server.options.cert) {
         const certificateDir = Server.findCacheDir();
         const certificatePath = path.join(certificateDir, "server.pem");
         let certificateExists;
@@ -577,7 +617,7 @@ class Server {
             const del = require("del");
 
             this.logger.info(
-              "SSL Certificate is more than 30 days old. Removing..."
+              "SSL certificate is more than 30 days old. Removing..."
             );
 
             await del([certificatePath], { force: true });
@@ -587,7 +627,7 @@ class Server {
         }
 
         if (!certificateExists) {
-          this.logger.info("Generating SSL Certificate...");
+          this.logger.info("Generating SSL certificate...");
 
           const selfsigned = require("selfsigned");
           const attributes = [{ name: "commonName", value: "localhost" }];
@@ -669,20 +709,20 @@ class Server {
         this.logger.info(`SSL certificate: ${certificatePath}`);
       }
 
-      if (options.https.cacert) {
-        if (options.https.ca) {
+      if (options.server.options.cacert) {
+        if (options.server.options.ca) {
           this.logger.warn(
-            "Do not specify 'https.ca' and 'https.cacert' options together, the 'https.ca' option will be used."
+            "Do not specify 'ca' and 'cacert' options together, the 'ca' option will be used."
           );
         } else {
-          options.https.ca = options.https.cacert;
+          options.server.options.ca = options.server.options.cacert;
         }
 
-        delete options.https.cacert;
+        delete options.server.options.cacert;
       }
 
-      options.https.key = options.https.key || fakeCert;
-      options.https.cert = options.https.cert || fakeCert;
+      options.server.options.key = options.server.options.key || fakeCert;
+      options.server.options.cert = options.server.options.cert || fakeCert;
     }
 
     if (typeof options.ipc === "boolean") {
@@ -1063,42 +1103,43 @@ class Server {
   }
 
   async initialize() {
-    const compilers = this.compiler.compilers || [this.compiler];
+    if (this.options.webSocketServer) {
+      const compilers = this.compiler.compilers || [this.compiler];
 
-    // eslint-disable-next-line no-shadow
-    compilers.forEach((compiler) => {
-      this.addAdditionalEntries(compiler);
+      // eslint-disable-next-line no-shadow
+      compilers.forEach((compiler) => {
+        this.addAdditionalEntries(compiler);
 
-      const webpack = compiler.webpack || require("webpack");
+        const webpack = compiler.webpack || require("webpack");
 
-      const providePlugin = new webpack.ProvidePlugin({
-        __webpack_dev_server_client__: this.getClientTransport(),
-      });
+        new webpack.ProvidePlugin({
+          __webpack_dev_server_client__: this.getClientTransport(),
+        }).apply(compiler);
 
-      providePlugin.apply(compiler);
+        // TODO remove after drop webpack v4 support
+        compiler.options.plugins = compiler.options.plugins || [];
 
-      // 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 (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();
 
-        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);
+            plugin.apply(compiler);
+          }
         }
-      }
-    });
+      });
 
-    if (this.options.client && this.options.client.progress) {
-      this.setupProgressPlugin();
+      if (this.options.client && this.options.client.progress) {
+        this.setupProgressPlugin();
+      }
     }
 
     this.setupHooks();
@@ -1114,11 +1155,31 @@ class Server {
     if (this.options.setupExitSignals) {
       const signals = ["SIGINT", "SIGTERM"];
 
+      let needForceShutdown = false;
+
+      const exitProcess = () => {
+        // eslint-disable-next-line no-process-exit
+        process.exit();
+      };
+
       signals.forEach((signal) => {
         process.on(signal, () => {
+          if (needForceShutdown) {
+            exitProcess();
+          }
+
+          this.logger.info(
+            "Gracefully shutting down. To force exit, press ^C again. Please wait..."
+          );
+
+          needForceShutdown = true;
+
           this.stopCallback(() => {
-            // eslint-disable-next-line no-process-exit
-            process.exit();
+            if (typeof this.compiler.close === "function") {
+              this.compiler.close(exitProcess);
+            } else {
+              exitProcess();
+            }
           });
         });
       });
@@ -1150,26 +1211,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() {
@@ -1534,28 +1587,11 @@ class Server {
   }
 
   createServer() {
-    if (this.options.https) {
-      if (this.options.http2) {
-        // TODO: we need to replace spdy with http2 which is an internal module
-        this.server = require("spdy").createServer(
-          {
-            ...this.options.https,
-            spdy: {
-              protocols: ["h2", "http/1.1"],
-            },
-          },
-          this.app
-        );
-      } else {
-        const https = require("https");
-
-        this.server = https.createServer(this.options.https, this.app);
-      }
-    } else {
-      const http = require("http");
-
-      this.server = http.createServer(this.app);
-    }
+    // eslint-disable-next-line import/no-dynamic-require
+    this.server = require(this.options.server.type).createServer(
+      this.options.server.options,
+      this.app
+    );
 
     this.server.on("connection", (socket) => {
       // Add socket to list
@@ -1614,6 +1650,10 @@ class Server {
         this.sendMessage([client], "progress", this.options.client.progress);
       }
 
+      if (this.options.client && this.options.client.reconnect) {
+        this.sendMessage([client], "reconnect", this.options.client.reconnect);
+      }
+
       if (this.options.client && this.options.client.overlay) {
         this.sendMessage([client], "overlay", this.options.client.overlay);
       }
@@ -1667,7 +1707,7 @@ class Server {
     bonjour.publish({
       name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
       port: this.options.port,
-      type: this.options.https ? "https" : "http",
+      type: this.options.server.type === "http" ? "http" : "https",
       subtypes: ["webpack"],
       ...this.options.bonjour,
     });
@@ -1680,7 +1720,7 @@ class Server {
   }
 
   logStatus() {
-    const colorette = require("colorette");
+    const { isColorSupported, cyan, red } = require("colorette");
 
     const getColorsOption = (compilerOptions) => {
       let colorsEnabled;
@@ -1691,7 +1731,7 @@ class Server {
       ) {
         colorsEnabled = compilerOptions.stats;
       } else {
-        colorsEnabled = colorette.options.enabled;
+        colorsEnabled = isColorSupported;
       }
 
       return colorsEnabled;
@@ -1700,14 +1740,14 @@ class Server {
     const colors = {
       info(useColor, msg) {
         if (useColor) {
-          return colorette.cyan(msg);
+          return cyan(msg);
         }
 
         return msg;
       },
       error(useColor, msg) {
         if (useColor) {
-          return colorette.red(msg);
+          return red(msg);
         }
 
         return msg;
@@ -1718,7 +1758,7 @@ class Server {
     if (this.options.ipc) {
       this.logger.info(`Project is running at: "${this.server.address()}"`);
     } else {
-      const protocol = this.options.https ? "https" : "http";
+      const protocol = this.options.server.type === "http" ? "http" : "https";
       const { address, port } = this.server.address();
       const prettyPrintURL = (newHostname) =>
         url.format({ protocol, hostname: newHostname, port, pathname: "/" });
@@ -1837,7 +1877,9 @@ class Server {
 
     if (this.options.bonjour) {
       const bonjourProtocol =
-        this.options.bonjour.type || this.options.https ? "https" : "http";
+        this.options.bonjour.type || this.options.server.type === "http"
+          ? "http"
+          : "https";
 
       this.logger.info(
         `Broadcasting "${bonjourProtocol}" with subtype of "webpack" via ZeroConf DNS (Bonjour)`
@@ -1853,10 +1895,19 @@ class Server {
         headers = headers(req, res, this.middleware.context);
       }
 
-      // eslint-disable-next-line guard-for-in
-      for (const name in headers) {
-        res.setHeader(name, headers[name]);
+      const allHeaders = [];
+
+      if (!Array.isArray(headers)) {
+        // eslint-disable-next-line guard-for-in
+        for (const name in headers) {
+          allHeaders.push({ key: name, value: headers[name] });
+        }
+        headers = allHeaders;
       }
+
+      headers.forEach((header) => {
+        res.setHeader(header.key, header.value);
+      });
     }
 
     next();
@@ -1948,13 +1999,13 @@ class Server {
 
   // eslint-disable-next-line class-methods-use-this
   sendMessage(clients, type, data) {
-    clients.forEach((client) => {
+    for (const client of clients) {
       // `sockjs` uses `1` to indicate client is ready to accept data
       // `ws` uses `WebSocket.OPEN`, but it is mean `1` too
       if (client.readyState === 1) {
         client.send(JSON.stringify({ type, data }));
       }
-    });
+    }
   }
 
   serveMagicHtml(req, res, next) {
@@ -1989,8 +2040,7 @@ class Server {
       stats &&
       (!stats.errors || stats.errors.length === 0) &&
       (!stats.warnings || stats.warnings.length === 0) &&
-      stats.assets &&
-      stats.assets.every((asset) => !asset.emitted);
+      this.currentHash === stats.hash;
 
     if (shouldEmit) {
       this.sendMessage(clients, "still-ok");
@@ -1998,6 +2048,7 @@ class Server {
       return;
     }
 
+    this.currentHash = stats.hash;
     this.sendMessage(clients, "hash", stats.hash);
 
     if (stats.errors.length > 0 || stats.warnings.length > 0) {
@@ -2044,7 +2095,6 @@ class Server {
     };
 
     const chokidar = require("chokidar");
-
     const watcher = chokidar.watch(watchPath, finalWatchOptions);
 
     // disabling refreshing on changing the content
@@ -2138,7 +2188,9 @@ class Server {
   }
 
   startCallback(callback) {
-    this.start().then(() => callback(null), callback);
+    this.start()
+      .then(() => callback(null), callback)
+      .catch(callback);
   }
 
   async stop() {
@@ -2198,7 +2250,9 @@ class Server {
   }
 
   stopCallback(callback) {
-    this.stop().then(() => callback(null), callback);
+    this.stop()
+      .then(() => callback(null), callback)
+      .catch(callback);
   }
 
   // TODO remove in the next major release