webpack-dev-server 4.2.1 → 4.5.0

package/lib/Server.js

@@ -32,17 +32,18 @@ class Server {
 
     this.options = options;
     this.staticWatchers = [];
+    this.listeners = [];
     // Keep track of websocket proxies for external websocket upgrade.
     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 +75,7 @@ class Server {
   }
 
   static async getFreePort(port) {
-    if (port && port !== "auto") {
+    if (typeof port !== "undefined" && port !== null && port !== "auto") {
       return port;
     }
 
@@ -155,7 +156,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 +259,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 +479,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 +521,62 @@ class Server {
         ? options.hot
         : true;
 
-    // if the user enables http2, we can safely enable https
-    if ((options.http2 && !options.https) || options.https === true) {
-      options.https = {
-        requestCert: false,
+    const isHTTPs = Boolean(options.https);
+    const isSPDY = Boolean(options.http2);
+
+    if (isHTTPs || isSPDY) {
+      // TODO: remove in the next major release
+      util.deprecate(
+        () => {},
+        `'${
+          isHTTPs ? "https" : "http2"
+        }' option is deprecated. Please use the 'server' option.`,
+        `DEP_WEBPACK_DEV_SERVER_${isHTTPs ? "HTTPS" : "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 +599,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 +629,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 +639,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 +721,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 +1115,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,20 +1167,43 @@ class Server {
     if (this.options.setupExitSignals) {
       const signals = ["SIGINT", "SIGTERM"];
 
+      let needForceShutdown = false;
+
       signals.forEach((signal) => {
-        process.on(signal, () => {
-          this.stopCallback(() => {
+        const listener = () => {
+          if (needForceShutdown) {
             // eslint-disable-next-line no-process-exit
             process.exit();
+          }
+
+          this.logger.info(
+            "Gracefully shutting down. To force exit, press ^C again. Please wait..."
+          );
+
+          needForceShutdown = true;
+
+          this.stopCallback(() => {
+            if (typeof this.compiler.close === "function") {
+              this.compiler.close(() => {
+                // eslint-disable-next-line no-process-exit
+                process.exit();
+              });
+            } else {
+              // eslint-disable-next-line no-process-exit
+              process.exit();
+            }
           });
-        });
+        };
+
+        this.listeners.push({ name: signal, listener });
+
+        process.on(signal, listener);
       });
     }
 
     // Proxy WebSocket without the initial http request
     // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
-    // eslint-disable-next-line func-names
-    this.webSocketProxies.forEach(function (webSocketProxy) {
+    this.webSocketProxies.forEach((webSocketProxy) => {
       this.server.on("upgrade", webSocketProxy.upgrade);
     }, this);
   }
@@ -1526,28 +1602,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
@@ -1564,6 +1623,7 @@ class Server {
     });
   }
 
+  // TODO: remove `--web-socket-server` in favor of `--web-socket-server-type`
   createWebSocketServer() {
     this.webSocketServer = new (this.getServerTransport())(this);
     this.webSocketServer.implementation.on("connection", (client, request) => {
@@ -1589,7 +1649,9 @@ class Server {
       ) {
         this.sendMessage([client], "error", "Invalid Host/Origin header");
 
-        client.terminate();
+        // With https enabled, the sendMessage above is encrypted asynchronously so not yet sent
+        // Terminate would prevent it sending, so use close to allow it to be sent
+        client.close();
 
         return;
       }
@@ -1606,6 +1668,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);
       }
@@ -1653,26 +1719,29 @@ class Server {
     );
   }
 
-  runBonjour() {
-    const bonjour = require("bonjour")();
+  stopBonjour(callback = () => {}) {
+    this.bonjour.unpublishAll(() => {
+      this.bonjour.destroy();
+
+      if (callback) {
+        callback();
+      }
+    });
+  }
 
-    bonjour.publish({
+  runBonjour() {
+    this.bonjour = require("bonjour")();
+    this.bonjour.publish({
       name: `Webpack Dev Server ${os.hostname()}:${this.options.port}`,
       port: this.options.port,
-      type: this.options.https ? "https" : "http",
+      type: this.options.server.type === "http" ? "http" : "https",
       subtypes: ["webpack"],
       ...this.options.bonjour,
     });
-
-    process.on("exit", () => {
-      bonjour.unpublishAll(() => {
-        bonjour.destroy();
-      });
-    });
   }
 
   logStatus() {
-    const colorette = require("colorette");
+    const { isColorSupported, cyan, red } = require("colorette");
 
     const getColorsOption = (compilerOptions) => {
       let colorsEnabled;
@@ -1683,7 +1752,7 @@ class Server {
       ) {
         colorsEnabled = compilerOptions.stats;
       } else {
-        colorsEnabled = colorette.options.enabled;
+        colorsEnabled = isColorSupported;
       }
 
       return colorsEnabled;
@@ -1692,14 +1761,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;
@@ -1710,7 +1779,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: "/" });
@@ -1829,7 +1898,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)`
@@ -1845,10 +1916,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();
@@ -1940,13 +2020,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) {
@@ -1981,8 +2061,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");
@@ -1990,6 +2069,7 @@ class Server {
       return;
     }
 
+    this.currentHash = stats.hash;
     this.sendMessage(clients, "hash", stats.hash);
 
     if (stats.errors.length > 0 || stats.warnings.length > 0) {
@@ -2036,7 +2116,6 @@ class Server {
     };
 
     const chokidar = require("chokidar");
-
     const watcher = chokidar.watch(watchPath, finalWatchOptions);
 
     // disabling refreshing on changing the content
@@ -2129,11 +2208,21 @@ class Server {
     }
   }
 
-  startCallback(callback) {
-    this.start().then(() => callback(null), callback);
+  startCallback(callback = () => {}) {
+    this.start()
+      .then(() => callback(null), callback)
+      .catch(callback);
   }
 
   async stop() {
+    if (this.bonjour) {
+      await new Promise((resolve) => {
+        this.stopBonjour(() => {
+          resolve();
+        });
+      });
+    }
+
     this.webSocketProxies = [];
 
     await Promise.all(this.staticWatchers.map((watcher) => watcher.close()));
@@ -2187,10 +2276,18 @@ class Server {
         this.middleware = null;
       }
     }
+
+    // We add listeners to signals when creating a new Server instance
+    // So ensure they are removed to prevent EventEmitter memory leak warnings
+    for (const item of this.listeners) {
+      process.removeListener(item.name, item.listener);
+    }
   }
 
-  stopCallback(callback) {
-    this.stop().then(() => callback(null), callback);
+  stopCallback(callback = () => {}) {
+    this.stop()
+      .then(() => callback(null), callback)
+      .catch(callback);
   }
 
   // TODO remove in the next major release