webpack-dev-server 3.6.0 → 3.8.0

package/lib/Server.js

@@ -23,6 +23,8 @@ const serveIndex = require('serve-index');
 const webpack = require('webpack');
 const webpackDevMiddleware = require('webpack-dev-middleware');
 const validateOptions = require('schema-utils');
+const isAbsoluteUrl = require('is-absolute-url');
+const normalizeOptions = require('./utils/normalizeOptions');
 const updateCompiler = require('./utils/updateCompiler');
 const createLogger = require('./utils/createLogger');
 const getCertificate = require('./utils/getCertificate');
@@ -54,27 +56,21 @@ class Server {
 
     validateOptions(schema, options, 'webpack Dev Server');
 
-    updateCompiler(compiler, options);
-
     this.compiler = compiler;
     this.options = options;
 
-    // Setup default value
-    this.options.contentBase =
-      this.options.contentBase !== undefined
-        ? this.options.contentBase
-        : process.cwd();
-
     this.log = _log || createLogger(options);
 
-    if (this.options.serverMode === undefined) {
-      this.options.serverMode = 'sockjs';
-    } else {
+    if (this.options.transportMode !== undefined) {
       this.log.warn(
-        'serverMode is an experimental option, meaning its usage could potentially change without warning'
+        'transportMode is an experimental option, meaning its usage could potentially change without warning'
       );
     }
 
+    normalizeOptions(this.compiler, this.options);
+
+    updateCompiler(this.compiler, this.options);
+
     // this.SocketServerImplementation is a class, so it must be instantiated before use
     this.socketServerImplementation = getSocketServerImplementation(
       this.options
@@ -102,10 +98,6 @@ class Server {
     this.allowedHosts = this.options.allowedHosts;
     this.disableHostCheck = !!this.options.disableHostCheck;
 
-    if (!this.options.watchOptions) {
-      this.options.watchOptions = {};
-    }
-
     this.watchOptions = options.watchOptions || {};
 
     // Replace leading and trailing slashes to normalize path
@@ -144,23 +136,25 @@ class Server {
   }
 
   setupProgressPlugin() {
-    const progressPlugin = new webpack.ProgressPlugin(
-      (percent, msg, addInfo) => {
-        percent = Math.floor(percent * 100);
+    // for CLI output
+    new webpack.ProgressPlugin({
+      profile: !!this.options.profile,
+    }).apply(this.compiler);
 
-        if (percent === 100) {
-          msg = 'Compilation completed';
-        }
+    // for browser console output
+    new webpack.ProgressPlugin((percent, msg, addInfo) => {
+      percent = Math.floor(percent * 100);
 
-        if (addInfo) {
-          msg = `${msg} (${addInfo})`;
-        }
+      if (percent === 100) {
+        msg = 'Compilation completed';
+      }
 
-        this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+      if (addInfo) {
+        msg = `${msg} (${addInfo})`;
       }
-    );
 
-    progressPlugin.apply(this.compiler);
+      this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+    }).apply(this.compiler);
   }
 
   setupApp() {
@@ -280,14 +274,12 @@ class Server {
      * ]
      */
     this.options.proxy.forEach((proxyConfigOrCallback) => {
-      let proxyConfig;
       let proxyMiddleware;
 
-      if (typeof proxyConfigOrCallback === 'function') {
-        proxyConfig = proxyConfigOrCallback();
-      } else {
-        proxyConfig = proxyConfigOrCallback;
-      }
+      let proxyConfig =
+        typeof proxyConfigOrCallback === 'function'
+          ? proxyConfigOrCallback()
+          : proxyConfigOrCallback;
 
       proxyMiddleware = getProxyMiddleware(proxyConfig);
 
@@ -347,7 +339,7 @@ class Server {
       contentBase.forEach((item) => {
         this.app.get('*', express.static(item));
       });
-    } else if (/^(https?:)?\/\//.test(contentBase)) {
+    } else if (isAbsoluteUrl(String(contentBase))) {
       this.log.warn(
         'Using a URL as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.'
       );
@@ -399,8 +391,8 @@ class Server {
         this.app.get('*', serveIndex(item));
       });
     } else if (
-      !/^(https?:)?\/\//.test(contentBase) &&
-      typeof contentBase !== 'number'
+      typeof contentBase !== 'number' &&
+      !isAbsoluteUrl(String(contentBase))
     ) {
       this.app.get('*', serveIndex(contentBase));
     }
@@ -409,13 +401,13 @@ class Server {
   setupWatchStaticFeature() {
     const contentBase = this.options.contentBase;
 
-    if (
-      /^(https?:)?\/\//.test(contentBase) ||
-      typeof contentBase === 'number'
-    ) {
+    if (isAbsoluteUrl(String(contentBase)) || typeof contentBase === 'number') {
       throw new Error('Watching remote files is not supported.');
     } else if (Array.isArray(contentBase)) {
       contentBase.forEach((item) => {
+        if (isAbsoluteUrl(String(item))) {
+          throw new Error('Watching remote files is not supported.');
+        }
         this._watch(item);
       });
     } else {
@@ -653,7 +645,6 @@ class Server {
         // The relevant issues are:
         // https://github.com/spdy-http2/node-spdy/issues/350
         // https://github.com/webpack/webpack-dev-server/issues/1592
-        // eslint-disable-next-line global-require
         this.listeningApp = require('spdy').createServer(
           this.options.https,
           this.app
@@ -668,25 +659,29 @@ class Server {
     const SocketServerImplementation = this.socketServerImplementation;
     this.socketServer = new SocketServerImplementation(this);
 
-    this.socketServer.onConnection((connection) => {
+    this.socketServer.onConnection((connection, headers) => {
       if (!connection) {
         return;
       }
 
-      if (
-        !this.checkHost(connection.headers) ||
-        !this.checkOrigin(connection.headers)
-      ) {
+      if (!headers) {
+        this.log.warn(
+          'transportMode.server implementation must pass headers to the callback of onConnection(f) ' +
+            'via f(connection, headers) in order for clients to pass a headers security check'
+        );
+      }
+
+      if (!headers || !this.checkHost(headers) || !this.checkOrigin(headers)) {
         this.sockWrite([connection], 'error', 'Invalid Host/Origin header');
 
-        connection.close();
+        this.socketServer.close(connection);
 
         return;
       }
 
       this.sockets.push(connection);
 
-      connection.on('close', () => {
+      this.socketServer.onConnectionClose(connection, () => {
         const idx = this.sockets.indexOf(connection);
 
         if (idx >= 0) {
@@ -694,10 +689,15 @@ class Server {
         }
       });
 
+      if (this.clientLogLevel) {
+        this.sockWrite([connection], 'log-level', this.clientLogLevel);
+      }
+
       if (this.hot) {
         this.sockWrite([connection], 'hot');
       }
 
+      // TODO: change condition at major version
       if (this.options.liveReload !== false) {
         this.sockWrite([connection], 'liveReload', this.options.liveReload);
       }
@@ -710,10 +710,6 @@ class Server {
         this.sockWrite([connection], 'overlay', this.clientOverlay);
       }
 
-      if (this.clientLogLevel) {
-        this.sockWrite([connection], 'log-level', this.clientLogLevel);
-      }
-
       if (!this._stats) {
         return;
       }
@@ -853,13 +849,18 @@ class Server {
     // an IPv6-address in URLs,
     // these are removed from the hostname in url.parse(),
     // so we have the pure IPv6-address in hostname.
-    if (ip.isV4Format(hostname) || ip.isV6Format(hostname)) {
+    // always allow localhost host, for convenience (hostname === 'localhost')
+    // allow hostname of listening address  (hostname === this.hostname)
+    const isValidHostname =
+      ip.isV4Format(hostname) ||
+      ip.isV6Format(hostname) ||
+      hostname === 'localhost' ||
+      hostname === this.hostname;
+
+    if (isValidHostname) {
       return true;
     }
     // always allow localhost host, for convenience
-    if (hostname === 'localhost') {
-      return true;
-    }
     // allow if hostname is in allowedHosts
     if (this.allowedHosts && this.allowedHosts.length) {
       for (let hostIdx = 0; hostIdx < this.allowedHosts.length; hostIdx++) {
@@ -872,23 +873,18 @@ class Server {
         // support "." as a subdomain wildcard
         // e.g. ".example.com" will allow "example.com", "www.example.com", "subdomain.example.com", etc
         if (allowedHost[0] === '.') {
-          // "example.com"
-          if (hostname === allowedHost.substring(1)) {
-            return true;
-          }
-          // "*.example.com"
-          if (hostname.endsWith(allowedHost)) {
+          // "example.com"  (hostname === allowedHost.substring(1))
+          // "*.example.com"  (hostname.endsWith(allowedHost))
+          if (
+            hostname === allowedHost.substring(1) ||
+            hostname.endsWith(allowedHost)
+          ) {
             return true;
           }
         }
       }
     }
 
-    // allow hostname of listening address
-    if (hostname === this.hostname) {
-      return true;
-    }
-
     // also allow public hostname if provided
     if (typeof this.publicHost === 'string') {
       const idxPublic = this.publicHost.indexOf(':');
@@ -938,13 +934,14 @@ class Server {
 
   // send stats to a socket or multiple sockets
   _sendStats(sockets, stats, force) {
-    if (
+    const shouldEmit =
       !force &&
       stats &&
       (!stats.errors || stats.errors.length === 0) &&
       stats.assets &&
-      stats.assets.every((asset) => !asset.emitted)
-    ) {
+      stats.assets.every((asset) => !asset.emitted);
+
+    if (shouldEmit) {
       return this.sockWrite(sockets, 'still-ok');
     }
 

package/lib/options.json

@@ -255,6 +255,9 @@
         }
       ]
     },
+    "profile": {
+      "type": "boolean"
+    },
     "progress": {
       "type": "boolean"
     },
@@ -297,16 +300,6 @@
     "serveIndex": {
       "type": "boolean"
     },
-    "serverMode": {
-      "anyOf": [
-        {
-          "type": "string"
-        },
-        {
-          "instanceof": "Function"
-        }
-      ]
-    },
     "serverSideRender": {
       "type": "boolean"
     },
@@ -358,6 +351,32 @@
         }
       ]
     },
+    "transportMode": {
+      "anyOf": [
+        {
+          "type": "object",
+          "properties": {
+            "client": {
+              "type": "string"
+            },
+            "server": {
+              "anyOf": [
+                {
+                  "type": "string"
+                },
+                {
+                  "instanceof": "Function"
+                }
+              ]
+            }
+          },
+          "additionalProperties": false
+        },
+        {
+          "enum": ["sockjs", "ws"]
+        }
+      ]
+    },
     "useLocalIp": {
       "type": "boolean"
     },
@@ -389,7 +408,7 @@
       "bonjour": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverbonjour)",
       "ca": "should be {String|Buffer}",
       "cert": "should be {String|Buffer}",
-      "clientLogLevel": "should be {String} and equal to one of the allowed values\n\n [ 'info', 'warn', 'error', 'debug', 'trace', 'silent' ]\n\n (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)",
+      "clientLogLevel": "should be {String} and equal to one of the allowed values\n\n [ 'none', 'silent', 'info', 'debug', 'trace', 'error', 'warning', 'warn' ]\n\n (https://webpack.js.org/configuration/dev-server/#devserverclientloglevel)",
       "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)",
       "disableHostCheck": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverdisablehostcheck)",
@@ -422,6 +441,7 @@
       "pfx": "should be {String|Buffer} (https://webpack.js.org/configuration/dev-server/#devserverpfx)",
       "pfxPassphrase": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserverpfxpassphrase)",
       "port": "should be {Number|String|Null} (https://webpack.js.org/configuration/dev-server/#devserverport)",
+      "profile": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverprofile)",
       "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)",
@@ -430,7 +450,6 @@
       "reporter": "should be {Function} (https://github.com/webpack/webpack-dev-middleware#reporter)",
       "requestCert": "should be {Boolean}",
       "serveIndex": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverserveindex)",
-      "serverMode": "should be {String|Function} (https://webpack.js.org/configuration/dev-server/#devserverservermode-)",
       "serverSideRender": "should be {Boolean} (https://github.com/webpack/webpack-dev-middleware#serversiderender)",
       "setup": "should be {Function} (https://webpack.js.org/configuration/dev-server/#devserversetup)",
       "sockHost": "should be {String|Null} (https://webpack.js.org/configuration/dev-server/#devserversockhost)",
@@ -439,6 +458,7 @@
       "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)",
       "warn": "should be {Function}",
       "watchContentBase": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverwatchcontentbase)",

package/lib/servers/SockJSServer.js

@@ -11,7 +11,6 @@ const BaseServer = require('./BaseServer');
 // sockjs will remove Origin header, however Origin header is required for checking host.
 // See https://github.com/webpack/webpack-dev-server/issues/1604 for more information
 {
-  // eslint-disable-next-line global-require
   const SockjsSession = require('sockjs/lib/transport').Session;
   const decorateConnection = SockjsSession.prototype.decorateConnection;
   SockjsSession.prototype.decorateConnection = function(req) {
@@ -50,6 +49,11 @@ module.exports = class SockJSServer extends BaseServer {
   }
 
   send(connection, message) {
+    // prevent cases where the server is trying to send data while connection is closing
+    if (connection.readyState !== 1) {
+      return;
+    }
+
     connection.write(message);
   }
 
@@ -57,8 +61,14 @@ module.exports = class SockJSServer extends BaseServer {
     connection.close();
   }
 
-  // f should return the resulting connection
+  // f should be passed the resulting connection and the connection headers
   onConnection(f) {
-    this.socket.on('connection', f);
+    this.socket.on('connection', (connection) => {
+      f(connection, connection.headers);
+    });
+  }
+
+  onConnectionClose(connection, f) {
+    connection.on('close', f);
   }
 };

package/lib/servers/WebsocketServer.js

@@ -1,8 +1,45 @@
 'use strict';
 
-// const ws = require('ws');
+/* eslint-disable
+  class-methods-use-this
+*/
+const ws = require('ws');
 const BaseServer = require('./BaseServer');
 
-// ws server implementation under construction
-// will need changes in the client as well to function
-module.exports = class WebsocketServer extends BaseServer {};
+module.exports = class WebsocketServer extends BaseServer {
+  constructor(server) {
+    super(server);
+    this.wsServer = new ws.Server({
+      server: this.server.listeningApp,
+      path: this.server.sockPath,
+    });
+
+    this.wsServer.on('error', (err) => {
+      this.server.log.error(err.message);
+    });
+  }
+
+  send(connection, message) {
+    // prevent cases where the server is trying to send data while connection is closing
+    if (connection.readyState !== 1) {
+      return;
+    }
+
+    connection.send(message);
+  }
+
+  close(connection) {
+    connection.close();
+  }
+
+  // f should be passed the resulting connection and the connection headers
+  onConnection(f) {
+    this.wsServer.on('connection', (connection, req) => {
+      f(connection, req.headers);
+    });
+  }
+
+  onConnectionClose(connection, f) {
+    connection.on('close', f);
+  }
+};

package/lib/utils/addEntries.js

@@ -3,6 +3,18 @@
 const webpack = require('webpack');
 const createDomain = require('./createDomain');
 
+/**
+ * A Entry, it can be of type string or string[] or Object<string | string[],string>
+ * @typedef {(string[] | string | Object<string | string[],string>)} Entry
+ */
+
+/**
+ * Add entries Method
+ * @param {?Object} config - Webpack config
+ * @param {?Object} options - Dev-Server options
+ * @param {?Object} server
+ * @returns {void}
+ */
 function addEntries(config, options, server) {
   if (options.inline !== false) {
     // we're stubbing the app in this method as it's static and doesn't require
@@ -15,13 +27,20 @@ function addEntries(config, options, server) {
       },
     };
 
+    /** @type {string} */
     const domain = createDomain(options, app);
+    /** @type {string} */
     const sockHost = options.sockHost ? `&sockHost=${options.sockHost}` : '';
+    /** @type {string} */
     const sockPath = options.sockPath ? `&sockPath=${options.sockPath}` : '';
+    /** @type {string} */
     const sockPort = options.sockPort ? `&sockPort=${options.sockPort}` : '';
+    /** @type {string} */
     const clientEntry = `${require.resolve(
       '../../client/'
     )}?${domain}${sockHost}${sockPath}${sockPort}`;
+
+    /** @type {(string[] | string)} */
     let hotEntry;
 
     if (options.hotOnly) {
@@ -29,7 +48,12 @@ function addEntries(config, options, server) {
     } else if (options.hot) {
       hotEntry = require.resolve('webpack/hot/dev-server');
     }
-
+    /**
+     * prependEntry Method
+     * @param {Entry} originalEntry
+     * @param {Entry} additionalEntries
+     * @returns {Entry}
+     */
     const prependEntry = (originalEntry, additionalEntries) => {
       if (typeof originalEntry === 'function') {
         return () =>
@@ -39,6 +63,7 @@ function addEntries(config, options, server) {
       }
 
       if (typeof originalEntry === 'object' && !Array.isArray(originalEntry)) {
+        /** @type {Object<string,string>} */
         const clone = {};
 
         Object.keys(originalEntry).forEach((key) => {
@@ -51,6 +76,7 @@ function addEntries(config, options, server) {
 
       // 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)) {
@@ -60,21 +86,38 @@ function addEntries(config, options, server) {
       return entriesClone;
     };
 
+    /**
+     *
+     * Description of the option for checkInject method
+     * @typedef {Function} checkInjectOptionsParam
+     * @param {Object} _config - compilerConfig
+     * @return {Boolean}
+     */
+
+    /**
+     *
+     * @param {Boolean | checkInjectOptionsParam} option - inject(Hot|Client) it is Boolean | fn => Boolean
+     * @param {Object} _config
+     * @param {Boolean} defaultValue
+     * @return {Boolean}
+     */
     // eslint-disable-next-line no-shadow
-    const checkInject = (option, config, defaultValue) => {
+    const checkInject = (option, _config, defaultValue) => {
       if (typeof option === 'boolean') return option;
-      if (typeof option === 'function') return option(config);
+      if (typeof option === 'function') return option(_config);
       return defaultValue;
     };
 
     // eslint-disable-next-line no-shadow
     [].concat(config).forEach((config) => {
+      /** @type {Boolean} */
       const webTarget =
         config.target === 'web' ||
         config.target === 'webworker' ||
         config.target === 'electron-renderer' ||
         config.target === 'node-webkit' ||
         config.target == null;
+      /** @type {Entry} */
       const additionalEntries = checkInject(
         options.injectClient,
         config,
@@ -93,8 +136,9 @@ function addEntries(config, options, server) {
         config.plugins = config.plugins || [];
         if (
           !config.plugins.find(
-            (plugin) =>
-              plugin.constructor === webpack.HotModuleReplacementPlugin
+            // Check for the name rather than the constructor reference in case
+            // there are multiple copies of webpack installed
+            (plugin) => plugin.constructor.name === 'HotModuleReplacementPlugin'
           )
         ) {
           config.plugins.push(new webpack.HotModuleReplacementPlugin());

package/lib/utils/createConfig.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const path = require('path');
+const isAbsoluteUrl = require('is-absolute-url');
 const defaultTo = require('./defaultTo');
 
 function createConfig(config, argv, { port }) {
@@ -46,6 +47,10 @@ function createConfig(config, argv, { port }) {
     options.liveReload = false;
   }
 
+  if (argv.profile) {
+    options.profile = argv.profile;
+  }
+
   if (argv.progress) {
     options.progress = argv.progress;
   }
@@ -60,7 +65,7 @@ function createConfig(config, argv, { port }) {
       (firstWpOpt.output && firstWpOpt.output.publicPath) || '';
 
     if (
-      !/^(https?:)?\/\//.test(options.publicPath) &&
+      !isAbsoluteUrl(String(options.publicPath)) &&
       options.publicPath[0] !== '/'
     ) {
       options.publicPath = `/${options.publicPath}`;
@@ -109,7 +114,7 @@ function createConfig(config, argv, { port }) {
       options.contentBase = options.contentBase.map((p) => path.resolve(p));
     } else if (/^[0-9]$/.test(options.contentBase)) {
       options.contentBase = +options.contentBase;
-    } else if (!/^(https?:)?\/\//.test(options.contentBase)) {
+    } else if (!isAbsoluteUrl(String(options.contentBase))) {
       options.contentBase = path.resolve(options.contentBase);
     }
   }

package/lib/utils/createLogger.js

@@ -2,7 +2,7 @@
 
 const log = require('webpack-log');
 
-function createLogger(options) {
+function createLogger(options = {}) {
   let level = options.logLevel || 'info';
 
   if (options.noInfo === true) {

package/lib/utils/findPort.js

@@ -1,12 +1,26 @@
 'use strict';
 
-const { getPortPromise } = require('portfinder');
+const pRetry = require('p-retry');
+const portfinder = require('portfinder');
 const defaultPort = require('./defaultPort');
 const defaultTo = require('./defaultTo');
 const tryParseInt = require('./tryParseInt');
 
+function runPortFinder() {
+  return new Promise((resolve, reject) => {
+    portfinder.basePort = defaultPort;
+    portfinder.getPort((error, port) => {
+      if (error) {
+        return reject(error);
+      }
+
+      return resolve(port);
+    });
+  });
+}
+
 function findPort(port) {
-  if (typeof port !== 'undefined') {
+  if (port) {
     return Promise.resolve(port);
   }
 
@@ -19,10 +33,7 @@ function findPort(port) {
     3
   );
 
-  return getPortPromise({
-    port: defaultPort,
-    stopPort: defaultPort + defaultPortRetry,
-  });
+  return pRetry(runPortFinder, { retries: defaultPortRetry });
 }
 
 module.exports = findPort;