webpack-dev-server 4.2.1 → 4.3.0

package/client/index.js

@@ -3,7 +3,7 @@ import webpackHotLog from "webpack/hot/log.js";
 import stripAnsi from "./modules/strip-ansi/index.js";
 import parseURL from "./utils/parseURL.js";
 import socket from "./socket.js";
-import { show, hide } from "./overlay.js";
+import { formatProblem, show, hide } from "./overlay.js";
 import { log, setLogLevel } from "./utils/log.js";
 import sendMessage from "./utils/sendMessage.js";
 import reloadApp from "./utils/reloadApp.js";
@@ -128,20 +128,24 @@ var onSocketMessage = {
   warnings: function warnings(_warnings) {
     log.warn("Warnings while compiling.");
 
-    var strippedWarnings = _warnings.map(function (warning) {
-      return stripAnsi(warning.message ? warning.message : warning);
+    var printableWarnings = _warnings.map(function (error) {
+      var _formatProblem = formatProblem("warning", error),
+          header = _formatProblem.header,
+          body = _formatProblem.body;
+
+      return "".concat(header, "\n").concat(stripAnsi(body));
     });
 
-    sendMessage("Warnings", strippedWarnings);
+    sendMessage("Warnings", printableWarnings);
 
-    for (var i = 0; i < strippedWarnings.length; i++) {
-      log.warn(strippedWarnings[i]);
+    for (var i = 0; i < printableWarnings.length; i++) {
+      log.warn(printableWarnings[i]);
     }
 
     var needShowOverlayForWarnings = typeof options.overlay === "boolean" ? options.overlay : options.overlay && options.overlay.warnings;
 
     if (needShowOverlayForWarnings) {
-      show(_warnings, "warnings");
+      show("warning", _warnings);
     }
 
     reloadApp(options, status);
@@ -149,20 +153,24 @@ var onSocketMessage = {
   errors: function errors(_errors) {
     log.error("Errors while compiling. Reload prevented.");
 
-    var strippedErrors = _errors.map(function (error) {
-      return stripAnsi(error.message ? error.message : error);
+    var printableErrors = _errors.map(function (error) {
+      var _formatProblem2 = formatProblem("error", error),
+          header = _formatProblem2.header,
+          body = _formatProblem2.body;
+
+      return "".concat(header, "\n").concat(stripAnsi(body));
     });
 
-    sendMessage("Errors", strippedErrors);
+    sendMessage("Errors", printableErrors);
 
-    for (var i = 0; i < strippedErrors.length; i++) {
-      log.error(strippedErrors[i]);
+    for (var i = 0; i < printableErrors.length; i++) {
+      log.error(printableErrors[i]);
     }
 
     var needShowOverlayForErrors = typeof options.overlay === "boolean" ? options.overlay : options.overlay && options.overlay.errors;
 
     if (needShowOverlayForErrors) {
-      show(_errors, "errors");
+      show("error", _errors);
     }
   },
   error: function error(_error) {

package/client/overlay.js

@@ -108,19 +108,44 @@ function hide() {
   document.body.removeChild(iframeContainerElement);
   iframeContainerElement = null;
   containerElement = null;
+}
+
+function formatProblem(type, item) {
+  var header = type === "warning" ? "WARNING" : "ERROR";
+  var body = "";
+
+  if (typeof item === "string") {
+    body += item;
+  } else {
+    var file = item.file || ""; // eslint-disable-next-line no-nested-ternary
+
+    var moduleName = item.moduleName ? item.moduleName.indexOf("!") !== -1 ? "".concat(item.moduleName.replace(/^(\s|\S)*!/, ""), " (").concat(item.moduleName, ")") : "".concat(item.moduleName) : "";
+    var loc = item.loc;
+    header += "".concat(moduleName || file ? " in ".concat(moduleName ? "".concat(moduleName).concat(file ? " (".concat(file, ")") : "") : file).concat(loc ? " ".concat(loc) : "") : "");
+    body += item.message || "";
+  }
+
+  return {
+    header: header,
+    body: body
+  };
 } // Compilation with errors (e.g. syntax error or missing modules).
 
 
-function show(messages, type) {
+function show(type, messages) {
   ensureOverlayExists(function () {
     messages.forEach(function (message) {
       var entryElement = document.createElement("div");
       var typeElement = document.createElement("span");
-      typeElement.innerText = type === "warnings" ? "Warning:" : "Error:";
+
+      var _formatProblem = formatProblem(type, message),
+          header = _formatProblem.header,
+          body = _formatProblem.body;
+
+      typeElement.innerText = header;
       typeElement.style.color = "#".concat(colors.red); // Make it look similar to our terminal.
 
-      var errorMessage = message.message || messages[0];
-      var text = ansiHTML(encode(errorMessage));
+      var text = ansiHTML(encode(body));
       var messageTextNode = document.createElement("div");
       messageTextNode.innerHTML = text;
       entryElement.appendChild(typeElement);
@@ -134,4 +159,4 @@ function show(messages, type) {
   });
 }
 
-export { show, hide };
+export { formatProblem, show, hide };

package/lib/Server.js

@@ -74,7 +74,7 @@ class Server {
   }
 
   static async getFreePort(port) {
-    if (port && port !== "auto") {
+    if (typeof port !== "undefined" && port !== null && port !== "auto") {
       return port;
     }
 
@@ -1063,42 +1063,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 +1115,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();
+            }
           });
         });
       });
@@ -1672,7 +1693,7 @@ class Server {
   }
 
   logStatus() {
-    const colorette = require("colorette");
+    const { isColorSupported, cyan, red } = require("colorette");
 
     const getColorsOption = (compilerOptions) => {
       let colorsEnabled;
@@ -1683,7 +1704,7 @@ class Server {
       ) {
         colorsEnabled = compilerOptions.stats;
       } else {
-        colorsEnabled = colorette.options.enabled;
+        colorsEnabled = isColorSupported;
       }
 
       return colorsEnabled;
@@ -1692,14 +1713,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;
@@ -1845,10 +1866,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();
@@ -2036,7 +2066,6 @@ class Server {
     };
 
     const chokidar = require("chokidar");
-
     const watcher = chokidar.watch(watchPath, finalWatchOptions);
 
     // disabling refreshing on changing the content

package/lib/options.json

@@ -369,8 +369,32 @@
       "description": "Allows to configure the server's listening socket for TLS (by default, dev server will be served over HTTP).",
       "link": "https://webpack.js.org/configuration/dev-server/#devserverhttps"
     },
+    "HeaderObject": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "key": {
+          "description": "key of header.",
+          "type": "string"
+        },
+        "value": {
+          "description": "value of header.",
+          "type": "string"
+        }
+      },
+      "cli": {
+        "exclude": true
+      }
+    },
     "Headers": {
       "anyOf": [
+        {
+          "type": "array",
+          "items": {
+            "$ref": "#/definitions/HeaderObject"
+          },
+          "minItems": 1
+        },
         {
           "type": "object"
         },
@@ -554,7 +578,9 @@
     "Port": {
       "anyOf": [
         {
-          "type": "number"
+          "type": "number",
+          "minimum": 0,
+          "maximum": 65535
         },
         {
           "type": "string",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-dev-server",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "Serves a webpack app. Updates the browser on changes.",
   "bin": "bin/webpack-dev-server.js",
   "main": "lib/Server.js",
@@ -35,7 +35,7 @@
     "ansi-html-community": "^0.0.8",
     "bonjour": "^3.5.0",
     "chokidar": "^3.5.1",
-    "colorette": "^1.2.2",
+    "colorette": "^2.0.10",
     "compression": "^1.7.4",
     "connect-history-api-fallback": "^1.6.0",
     "del": "^6.0.0",
@@ -55,7 +55,7 @@
     "spdy": "^4.0.2",
     "strip-ansi": "^7.0.0",
     "url": "^0.11.0",
-    "webpack-dev-middleware": "^5.1.0",
+    "webpack-dev-middleware": "^5.2.1",
     "ws": "^8.1.0"
   },
   "devDependencies": {
@@ -103,7 +103,7 @@
     "tcp-port-used": "^1.0.2",
     "typescript": "^4.2.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.50.0",
+    "webpack": "^5.54.0",
     "webpack-cli": "^4.7.2",
     "webpack-merge": "^5.8.0"
   },