chore: upgrade dev middleware (#2660)

bin/options.js

@@ -62,17 +62,6 @@ const options = {
     describe: 'Open default browser with the specified page',
     requiresArg: true,
   },
-  color: {
-    type: 'boolean',
-    alias: 'colors',
-    default: function supportsColor() {
-      // Use `require('supports-color').stdout` for supports-color >= 5.0.0.
-      // See https://github.com/webpack/webpack-dev-server/pull/1555.
-      return require('supports-color').stdout;
-    },
-    group: DISPLAY_GROUP,
-    describe: 'Enables/Disables colors on the console',
-  },
   'client-logging': {
     type: 'string',
     group: DISPLAY_GROUP,

bin/webpack-dev-server.js

@@ -15,6 +15,7 @@ const setupExitSignals = require('../lib/utils/setupExitSignals');
 const colors = require('../lib/utils/colors');
 const processOptions = require('../lib/utils/processOptions');
 const getVersions = require('../lib/utils/getVersions');
+const getColorsOption = require('../lib/utils/getColorsOption');
 const options = require('./options');
 
 let server;
@@ -87,11 +88,14 @@ const config = require(convertArgvPath)(yargs, argv, {
 function startDevServer(config, options) {
   let compiler;
 
+  const configArr = config instanceof Array ? config : [config];
+  const statsColors = getColorsOption(configArr);
+
   try {
     compiler = webpack(config);
   } catch (err) {
     if (err instanceof webpack.WebpackOptionsValidationError) {
-      console.error(colors.error(options.stats.colors, err.message));
+      console.error(colors.error(statsColors, err.message));
       // eslint-disable-next-line no-process-exit
       process.exit(1);
     }
@@ -104,7 +108,7 @@ function startDevServer(config, options) {
     serverData.server = server;
   } catch (err) {
     if (err.name === 'ValidationError') {
-      console.error(colors.error(options.stats.colors, err.message));
+      console.error(colors.error(statsColors, err.message));
       // eslint-disable-next-line no-process-exit
       process.exit(1);
     }

lib/Server.js

@@ -20,6 +20,8 @@ const compress = require('compression');
 const serveIndex = require('serve-index');
 const webpack = require('webpack');
 const webpackDevMiddleware = require('webpack-dev-middleware');
+const getFilenameFromUrl = require('webpack-dev-middleware/dist/utils/getFilenameFromUrl')
+  .default;
 const validateOptions = require('schema-utils');
 const isAbsoluteUrl = require('is-absolute-url');
 const normalizeOptions = require('./utils/normalizeOptions');
@@ -30,6 +32,9 @@ const createDomain = require('./utils/createDomain');
 const runBonjour = require('./utils/runBonjour');
 const routes = require('./utils/routes');
 const getSocketServerImplementation = require('./utils/getSocketServerImplementation');
+const getCompilerConfigArray = require('./utils/getCompilerConfigArray');
+const getStatsOption = require('./utils/getStatsOption');
+const getColorsOption = require('./utils/getColorsOption');
 const schema = require('./options.json');
 
 if (!process.env.WEBPACK_DEV_SERVER) {
@@ -146,11 +151,9 @@ class Server {
 
   setupDevMiddleware() {
     // middleware for serving webpack bundle
-    this.middleware = webpackDevMiddleware(
+    this.middleware = webpackDevMiddleware.default(
       this.compiler,
-      Object.assign({}, this.options, {
-        logger: this.logger,
-      })
+      this.options.dev
     );
   }
 
@@ -666,12 +669,10 @@ class Server {
     const suffix = '/';
     const uri = `${createDomain(this.options, this.listeningApp)}${suffix}`;
 
-    status(
-      uri,
-      this.options,
-      this.logger,
-      this.options.stats && this.options.stats.colors
-    );
+    const configArr = getCompilerConfigArray(this.compiler);
+    const colors = getColorsOption(configArr);
+
+    status(uri, this.options, this.logger, colors);
   }
 
   listen(port, hostname, fn) {
@@ -732,8 +733,10 @@ class Server {
   getStats(statsObj) {
     const stats = Server.DEFAULT_STATS;
 
-    if (this.options.stats.warningsFilter) {
-      stats.warningsFilter = this.options.stats.warningsFilter;
+    const configArr = getCompilerConfigArray(this.compiler);
+    const statsOption = getStatsOption(configArr);
+    if (typeof statsOption === 'object' && statsOption.warningsFilter) {
+      stats.warningsFilter = statsOption.warningsFilter;
     }
 
     return statsObj.toJson(stats);
@@ -861,8 +864,12 @@ class Server {
     const _path = req.path;
 
     try {
-      const isFile = this.middleware.fileSystem
-        .statSync(this.middleware.getFilenameFromUrl(`${_path}.js`))
+      const filename = getFilenameFromUrl(
+        this.middleware.context,
+        `${_path}.js`
+      );
+      const isFile = this.middleware.context.outputFileSystem
+        .statSync(filename)
         .isFile();
 
       if (!isFile) {

lib/options.json

@@ -75,12 +75,12 @@
         }
       ]
     },
+    "dev": {
+      "type": "object"
+    },
     "disableHostCheck": {
       "type": "boolean"
     },
-    "fs": {
-      "type": "object"
-    },
     "headers": {
       "type": "object"
     },
@@ -176,9 +176,6 @@
         }
       ]
     },
-    "index": {
-      "type": "string"
-    },
     "injectClient": {
       "anyOf": [
         {
@@ -202,9 +199,6 @@
     "liveReload": {
       "type": "boolean"
     },
-    "mimeTypes": {
-      "type": "object"
-    },
     "onAfterSetupMiddleware": {
       "instanceof": "Function"
     },
@@ -302,44 +296,18 @@
     "public": {
       "type": "string"
     },
-    "publicPath": {
-      "type": "string"
-    },
     "requestCert": {
       "type": "boolean"
     },
     "serveIndex": {
       "type": "boolean"
     },
-    "serverSideRender": {
-      "type": "boolean"
-    },
     "socket": {
       "type": "string"
     },
     "staticOptions": {
       "type": "object"
     },
-    "stats": {
-      "anyOf": [
-        {
-          "type": "object"
-        },
-        {
-          "type": "boolean"
-        },
-        {
-          "enum": [
-            "none",
-            "errors-only",
-            "errors-warnings",
-            "minimal",
-            "normal",
-            "verbose"
-          ]
-        }
-      ]
-    },
     "transportMode": {
       "anyOf": [
         {
@@ -374,16 +342,6 @@
     },
     "watchOptions": {
       "type": "object"
-    },
-    "writeToDisk": {
-      "anyOf": [
-        {
-          "type": "boolean"
-        },
-        {
-          "instanceof": "Function"
-        }
-      ]
     }
   },
   "errorMessage": {
@@ -393,19 +351,17 @@
       "client": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverclient)",
       "compress": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devservercompress)",
       "contentBase": "should be {Number|String|Array} (https://webpack.js.org/configuration/dev-server/#devservercontentbase)",
+      "dev": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverdev-)",
       "disableHostCheck": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck)",
-      "fs": "should be {Object} (https://github.com/webpack/webpack-dev-middleware#fs)",
-      "headers": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverheaders-)",
+      "headers": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverheaders)",
       "historyApiFallback": "should be {Boolean|Object} (https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback)",
       "host": "should be {String|Null} (https://webpack.js.org/configuration/dev-server/#devserverhost)",
       "hot": "should be {Boolean|String} (https://webpack.js.org/configuration/dev-server/#devserverhot)",
       "http2": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverhttp2)",
       "https": "should be {Object|Boolean} (https://webpack.js.org/configuration/dev-server/#devserverhttps)",
-      "index": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverindex)",
       "injectClient": "should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverinjectclient)",
       "injectHot": "should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverinjecthot)",
-      "liveReload": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverlivereload-)",
-      "mimeTypes": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devservermimetypes-)",
+      "liveReload": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverlivereload)",
       "onAfterSetupMiddleware": "should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverafter)",
       "onBeforeSetupMiddleware": "should be {Function} (https://webpack.js.org/configuration/dev-server/#devserverbefore)",
       "onListening": "should be {Function} (https://webpack.js.org/configuration/dev-server/#onlistening)",
@@ -417,19 +373,15 @@
       "progress": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverprogress---cli-only)",
       "proxy": "should be {Object|Array} (https://webpack.js.org/configuration/dev-server/#devserverproxy)",
       "public": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpublic)",
-      "publicPath": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpublicpath-)",
       "requestCert": "should be {Boolean}",
       "contentBasePublicPath": "should be {String|Array} (https://webpack.js.org/configuration/dev-server/#devservercontentbasepublicpath)",
       "serveIndex": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverserveindex)",
-      "serverSideRender": "should be {Boolean} (https://github.com/webpack/webpack-dev-middleware#serversiderender)",
       "socket": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserversocket)",
       "staticOptions": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverstaticoptions)",
-      "stats": "should be {Object|Boolean} (https://webpack.js.org/configuration/dev-server/#devserverstats-)",
       "transportMode": "should be {String|Object} (https://webpack.js.org/configuration/dev-server/#devservertransportmode)",
       "useLocalIp": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserveruselocalip)",
       "watchContentBase": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverwatchcontentbase)",
-      "watchOptions": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverwatchoptions-)",
-      "writeToDisk": "should be {Boolean|Function} (https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-)"
+      "watchOptions": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devserverwatchoptions)"
     }
   },
   "additionalProperties": false

lib/utils/createConfig.js

@@ -47,16 +47,18 @@ function createConfig(config, argv, { port }) {
     options.overlay = argv.overlay;
   }
 
-  if (!options.publicPath) {
+  options.dev = options.dev || {};
+
+  if (!options.dev.publicPath) {
     // eslint-disable-next-line
-    options.publicPath =
+    options.dev.publicPath =
       (firstWpOpt.output && firstWpOpt.output.publicPath) || '';
 
     if (
-      !isAbsoluteUrl(String(options.publicPath)) &&
-      options.publicPath[0] !== '/'
+      !isAbsoluteUrl(String(options.dev.publicPath)) &&
+      options.dev.publicPath[0] !== '/'
     ) {
-      options.publicPath = `/${options.publicPath}`;
+      options.dev.publicPath = `/${options.dev.publicPath}`;
     }
   }
 
@@ -111,21 +113,6 @@ function createConfig(config, argv, { port }) {
     options.watchContentBase = true;
   }
 
-  if (!options.stats) {
-    options.stats = defaultTo(firstWpOpt.stats, {
-      cached: false,
-      cachedAssets: false,
-    });
-  }
-
-  if (
-    typeof options.stats === 'object' &&
-    typeof options.stats.colors === 'undefined' &&
-    argv.color
-  ) {
-    options.stats = Object.assign({}, options.stats, { colors: argv.color });
-  }
-
   if (argv.https) {
     options.https = true;
   }

lib/utils/getColorsOption.js

@@ -0,0 +1,15 @@
+'use strict';
+
+const getStatsOption = require('./getStatsOption');
+
+function getColorsOption(configArr) {
+  const statsOption = getStatsOption(configArr);
+  let colors = false;
+  if (typeof statsOption === 'object' && statsOption.colors) {
+    colors = statsOption.colors;
+  }
+
+  return colors;
+}
+
+module.exports = getColorsOption;

lib/utils/getCompilerConfigArray.js

@@ -0,0 +1,8 @@
+'use strict';
+
+function getCompilerConfigArray(compiler) {
+  const compilers = compiler.compilers ? compiler.compilers : [compiler];
+  return compilers.map((comp) => comp.options);
+}
+
+module.exports = getCompilerConfigArray;

lib/utils/getStatsOption.js

@@ -0,0 +1,16 @@
+'use strict';
+
+function getStatsOption(configArr) {
+  const isEmptyObject = (val) =>
+    typeof val === 'object' && Object.keys(val).length === 0;
+
+  // in webpack@4 stats will not be defined if not provided,
+  // but in webpack@5 it will be an empty object
+  const statsConfig = configArr.find(
+    (conf) =>
+      typeof conf === 'object' && conf.stats && !isEmptyObject(conf.stats)
+  );
+  return statsConfig ? statsConfig.stats : {};
+}
+
+module.exports = getStatsOption;

lib/utils/normalizeOptions.js

@@ -16,10 +16,6 @@ function normalizeOptions(compiler, options) {
       : true;
   options.liveReload =
     typeof options.liveReload !== 'undefined' ? options.liveReload : true;
-  options.stats =
-    options.stats && Object.keys(options.stats).length !== 0
-      ? options.stats
-      : {};
 
   // normalize transportMode option
   if (typeof options.transportMode === 'undefined') {
@@ -49,6 +45,8 @@ function normalizeOptions(compiler, options) {
   options.client.path = `/${
     options.client.path ? options.client.path.replace(/^\/|\/$/g, '') : 'ws'
   }`;
+
+  options.dev = options.dev || {};
 }
 
 module.exports = normalizeOptions;