webpack-dev-server 3.4.1 → 3.7.0

package/client/socket.js

@@ -1,24 +1,26 @@
 'use strict';
+/* global __webpack_dev_server_client__ */
 
-var SockJS = require('sockjs-client/dist/sockjs');
+/* eslint-disable
+  camelcase
+*/
 
+var Client = __webpack_dev_server_client__;
 var retries = 0;
-var sock = null;
+var client = null;
 
 var socket = function initSocket(url, handlers) {
-  sock = new SockJS(url);
-
-  sock.onopen = function onopen() {
+  client = new Client(url);
+  client.onOpen(function () {
     retries = 0;
-  };
-
-  sock.onclose = function onclose() {
+  });
+  client.onClose(function () {
     if (retries === 0) {
       handlers.close();
     } // Try to reconnect.
 
 
-    sock = null; // After 10 retries stop trying, to prevent logspam.
+    client = null; // After 10 retries stop trying, to prevent logspam.
 
     if (retries <= 10) {
       // Exponentially increase timeout to reconnect.
@@ -30,16 +32,14 @@ var socket = function initSocket(url, handlers) {
         socket(url, handlers);
       }, retryInMs);
     }
-  };
-
-  sock.onmessage = function onmessage(e) {
-    // This assumes that all data sent via the websocket is JSON.
-    var msg = JSON.parse(e.data);
+  });
+  client.onMessage(function (data) {
+    var msg = JSON.parse(data);
 
     if (handlers[msg.type]) {
       handlers[msg.type](msg.data);
     }
-  };
+  });
 };
 
 module.exports = socket;

package/client/utils/createSocketUrl.js

@@ -0,0 +1,78 @@
+'use strict';
+/* global self */
+
+var url = require('url');
+
+var querystring = require('querystring');
+
+var getCurrentScriptSource = require('./getCurrentScriptSource');
+
+function createSocketUrl(resourceQuery) {
+  var urlParts;
+
+  if (typeof resourceQuery === 'string' && resourceQuery !== '') {
+    // If this bundle is inlined, use the resource query to get the correct url.
+    urlParts = url.parse(resourceQuery.substr(1));
+  } else {
+    // Else, get the url from the <script> this file was called with.
+    var scriptHost = getCurrentScriptSource(); // eslint-disable-next-line no-useless-escape
+
+    scriptHost = scriptHost.replace(/\/[^\/]+$/, '');
+    urlParts = url.parse(scriptHost || '/', false, true);
+  }
+
+  if (!urlParts.port || urlParts.port === '0') {
+    urlParts.port = self.location.port;
+  }
+
+  var _urlParts = urlParts,
+      auth = _urlParts.auth,
+      path = _urlParts.path;
+  var _urlParts2 = urlParts,
+      hostname = _urlParts2.hostname,
+      protocol = _urlParts2.protocol; // check ipv4 and ipv6 `all hostname`
+  // why do we need this check?
+  // hostname n/a for file protocol (example, when using electron, ionic)
+  // see: https://github.com/webpack/webpack-dev-server/pull/384
+
+  if ((hostname === '0.0.0.0' || hostname === '::') && self.location.hostname && // eslint-disable-next-line no-bitwise
+  !!~self.location.protocol.indexOf('http')) {
+    hostname = self.location.hostname;
+  } // `hostname` can be empty when the script path is relative. In that case, specifying
+  // a protocol would result in an invalid URL.
+  // When https is used in the app, secure websockets are always necessary
+  // because the browser doesn't accept non-secure websockets.
+
+
+  if (hostname && (self.location.protocol === 'https:' || urlParts.hostname === '0.0.0.0')) {
+    protocol = self.location.protocol;
+  } // default values of the sock url if they are not provided
+
+
+  var sockHost = hostname;
+  var sockPath = '/sockjs-node';
+  var sockPort = urlParts.port; // eslint-disable-next-line no-undefined
+
+  if (path !== null && path !== undefined && path !== '/') {
+    var parsedQuery = querystring.parse(path); // all of these sock url params are optionally passed in through
+    // resourceQuery, so we need to fall back to the default if
+    // they are not provided
+
+    sockHost = parsedQuery.sockHost || sockHost;
+    sockPath = parsedQuery.sockPath || sockPath;
+    sockPort = parsedQuery.sockPort || sockPort;
+  }
+
+  return url.format({
+    protocol: protocol,
+    auth: auth,
+    hostname: sockHost,
+    port: sockPort,
+    // If sockPath is provided it'll be passed in via the resourceQuery as a
+    // query param so it has to be parsed out of the querystring in order for the
+    // client to open the socket to the correct location.
+    pathname: sockPath
+  });
+}
+
+module.exports = createSocketUrl;

package/client/utils/getCurrentScriptSource.js

@@ -0,0 +1,22 @@
+'use strict';
+
+function getCurrentScriptSource() {
+  // `document.currentScript` is the most accurate way to find the current script,
+  // but is not supported in all browsers.
+  if (document.currentScript) {
+    return document.currentScript.getAttribute('src');
+  } // Fall back to getting all scripts in the document.
+
+
+  var scriptElements = document.scripts || [];
+  var currentScript = scriptElements[scriptElements.length - 1];
+
+  if (currentScript) {
+    return currentScript.getAttribute('src');
+  } // Fail as there was no script to use.
+
+
+  throw new Error('[WDS] Failed to get current script source.');
+}
+
+module.exports = getCurrentScriptSource;

package/client/utils/log.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var log = require('loglevel').getLogger('webpack-dev-server');
+
+var INFO = 'info';
+var WARN = 'warn';
+var ERROR = 'error';
+var DEBUG = 'debug';
+var TRACE = 'trace';
+var SILENT = 'silent'; // deprecated
+// TODO: remove these at major released
+// https://github.com/webpack/webpack-dev-server/pull/1825
+
+var WARNING = 'warning';
+var NONE = 'none'; // Set the default log level
+
+log.setDefaultLevel(INFO);
+
+function setLogLevel(level) {
+  switch (level) {
+    case INFO:
+    case WARN:
+    case ERROR:
+    case DEBUG:
+    case TRACE:
+      log.setLevel(level);
+      break;
+    // deprecated
+
+    case WARNING:
+      // loglevel's warning name is different from webpack's
+      log.setLevel('warn');
+      break;
+    // deprecated
+
+    case NONE:
+    case SILENT:
+      log.disableAll();
+      break;
+
+    default:
+      log.error("[WDS] Unknown clientLogLevel '".concat(level, "'"));
+  }
+}
+
+module.exports = {
+  log: log,
+  setLogLevel: setLogLevel
+};

package/client/utils/reloadApp.js

@@ -0,0 +1,55 @@
+'use strict';
+/* global WorkerGlobalScope self */
+
+var _require = require('./log'),
+    log = _require.log;
+
+function reloadApp(_ref, _ref2) {
+  var hotReload = _ref.hotReload,
+      hot = _ref.hot,
+      liveReload = _ref.liveReload;
+  var isUnloading = _ref2.isUnloading,
+      currentHash = _ref2.currentHash;
+
+  if (isUnloading || !hotReload) {
+    return;
+  }
+
+  if (hot) {
+    log.info('[WDS] App hot update...'); // eslint-disable-next-line global-require
+
+    var hotEmitter = require('webpack/hot/emitter');
+
+    hotEmitter.emit('webpackHotUpdate', currentHash);
+
+    if (typeof self !== 'undefined' && self.window) {
+      // broadcast update to window
+      self.postMessage("webpackHotUpdate".concat(currentHash), '*');
+    }
+  } // allow refreshing the page only if liveReload isn't disabled
+  else if (liveReload) {
+      var rootWindow = self; // use parent window for reload (in case we're in an iframe with no valid src)
+
+      var intervalId = self.setInterval(function () {
+        if (rootWindow.location.protocol !== 'about:') {
+          // reload immediately if protocol is valid
+          applyReload(rootWindow, intervalId);
+        } else {
+          rootWindow = rootWindow.parent;
+
+          if (rootWindow.parent === rootWindow) {
+            // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
+            applyReload(rootWindow, intervalId);
+          }
+        }
+      });
+    }
+
+  function applyReload(rootWindow, intervalId) {
+    clearInterval(intervalId);
+    log.info('[WDS] App updated. Reloading...');
+    rootWindow.location.reload();
+  }
+}
+
+module.exports = reloadApp;

package/client/utils/sendMessage.js

@@ -0,0 +1,14 @@
+'use strict';
+/* global __resourceQuery WorkerGlobalScope self */
+// Send messages to the outside, so plugins can consume it.
+
+function sendMsg(type, data) {
+  if (typeof self !== 'undefined' && (typeof WorkerGlobalScope === 'undefined' || !(self instanceof WorkerGlobalScope))) {
+    self.postMessage({
+      type: "webpack".concat(type),
+      data: data
+    }, '*');
+  }
+}
+
+module.exports = sendMsg;

package/lib/Server.js

@@ -12,7 +12,6 @@ const url = require('url');
 const http = require('http');
 const https = require('https');
 const ip = require('ip');
-const sockjs = require('sockjs');
 const semver = require('semver');
 const killable = require('killable');
 const chokidar = require('chokidar');
@@ -31,28 +30,9 @@ const status = require('./utils/status');
 const createDomain = require('./utils/createDomain');
 const runBonjour = require('./utils/runBonjour');
 const routes = require('./utils/routes');
+const getSocketServerImplementation = require('./utils/getSocketServerImplementation');
 const schema = require('./options.json');
 
-// Workaround for sockjs@~0.3.19
-// 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) {
-    decorateConnection.call(this, req);
-    const connection = this.connection;
-    if (
-      connection.headers &&
-      !('origin' in connection.headers) &&
-      'origin' in req.headers
-    ) {
-      connection.headers.origin = req.headers.origin;
-    }
-  };
-}
-
 // Workaround for node ^8.6.0, ^9.0.0
 // DEFAULT_ECDH_CURVE is default to prime256v1 in these version
 // breaking connection when certificate is not signed with prime256v1
@@ -62,6 +42,10 @@ if (semver.satisfies(process.version, '8.6.0 - 9')) {
   tls.DEFAULT_ECDH_CURVE = 'auto';
 }
 
+if (!process.env.WEBPACK_DEV_SERVER) {
+  process.env.WEBPACK_DEV_SERVER = true;
+}
+
 class Server {
   constructor(compiler, options = {}, _log) {
     if (options.lazy && !options.filename) {
@@ -83,6 +67,19 @@ class Server {
 
     this.log = _log || createLogger(options);
 
+    if (this.options.serverMode === undefined) {
+      this.options.serverMode = 'sockjs';
+    } else {
+      this.log.warn(
+        'serverMode is an experimental option, meaning its usage could potentially change without warning'
+      );
+    }
+
+    // this.SocketServerImplementation is a class, so it must be instantiated before use
+    this.socketServerImplementation = getSocketServerImplementation(
+      this.options
+    );
+
     this.originalStats =
       this.options.stats && Object.keys(this.options.stats).length
         ? this.options.stats
@@ -108,11 +105,8 @@ class Server {
     if (!this.options.watchOptions) {
       this.options.watchOptions = {};
     }
-    // Ignoring node_modules folder by default
-    this.options.watchOptions.ignored = this.options.watchOptions.ignored || [
-      /node_modules/,
-    ];
-    this.watchOptions = this.options.watchOptions;
+
+    this.watchOptions = options.watchOptions || {};
 
     // Replace leading and trailing slashes to normalize path
     this.sockPath = `/${
@@ -430,6 +424,8 @@ class Server {
   }
 
   setupBeforeFeature() {
+    // Todo rename onBeforeSetupMiddleware in next major release
+    // Todo pass only `this` argument
     this.options.before(this.app, this, this.compiler);
   }
 
@@ -438,6 +434,8 @@ class Server {
   }
 
   setupAfterFeature() {
+    // Todo rename onAfterSetupMiddleware in next major release
+    // Todo pass only `this` argument
     this.options.after(this.app, this, this.compiler);
   }
 
@@ -667,20 +665,10 @@ class Server {
   }
 
   createSocketServer() {
-    const socket = sockjs.createServer({
-      // Use provided up-to-date sockjs-client
-      sockjs_url: '/__webpack_dev_server__/sockjs.bundle.js',
-      // Limit useless logs
-      log: (severity, line) => {
-        if (severity === 'error') {
-          this.log.error(line);
-        } else {
-          this.log.debug(line);
-        }
-      },
-    });
+    const SocketServerImplementation = this.socketServerImplementation;
+    this.socketServer = new SocketServerImplementation(this);
 
-    socket.on('connection', (connection) => {
+    this.socketServer.onConnection((connection) => {
       if (!connection) {
         return;
       }
@@ -706,10 +694,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);
       }
@@ -722,20 +715,27 @@ class Server {
         this.sockWrite([connection], 'overlay', this.clientOverlay);
       }
 
-      if (this.clientLogLevel) {
-        this.sockWrite([connection], 'log-level', this.clientLogLevel);
-      }
-
       if (!this._stats) {
         return;
       }
 
       this._sendStats([connection], this.getStats(this._stats), true);
     });
+  }
 
-    socket.installHandlers(this.listeningApp, {
-      prefix: this.sockPath,
-    });
+  showStatus() {
+    const suffix =
+      this.options.inline !== false || this.options.lazy === true
+        ? '/'
+        : '/webpack-dev-server/';
+    const uri = `${createDomain(this.options, this.listeningApp)}${suffix}`;
+
+    status(
+      uri,
+      this.options,
+      this.log,
+      this.options.stats && this.options.stats.colors
+    );
   }
 
   listen(port, hostname, fn) {
@@ -753,12 +753,16 @@ class Server {
       if (fn) {
         fn.call(this.listeningApp, err);
       }
+
+      if (typeof this.options.onListening === 'function') {
+        this.options.onListening(this);
+      }
     });
   }
 
   close(cb) {
     this.sockets.forEach((socket) => {
-      socket.close();
+      this.socketServer.close(socket);
     });
 
     this.sockets = [];
@@ -901,25 +905,10 @@ class Server {
     return false;
   }
 
-  showStatus() {
-    const suffix =
-      this.options.inline !== false || this.options.lazy === true
-        ? '/'
-        : '/webpack-dev-server/';
-    const uri = `${createDomain(this.options, this.listeningApp)}${suffix}`;
-
-    status(
-      uri,
-      this.options,
-      this.log,
-      this.options.stats && this.options.stats.colors
-    );
-  }
-
   // eslint-disable-next-line
   sockWrite(sockets, type, data) {
     sockets.forEach((socket) => {
-      socket.write(JSON.stringify({ type, data }));
+      this.socketServer.send(socket, JSON.stringify({ type, data }));
     });
   }
 
@@ -1003,9 +992,9 @@ class Server {
     this.contentBaseWatchers.push(watcher);
   }
 
-  invalidate() {
+  invalidate(callback) {
     if (this.middleware) {
-      this.middleware.invalidate();
+      this.middleware.invalidate(callback);
     }
   }
 }

package/lib/options.json

@@ -195,6 +195,9 @@
     "noInfo": {
       "type": "boolean"
     },
+    "onListening": {
+      "instanceof": "Function"
+    },
     "open": {
       "anyOf": [
         {
@@ -294,6 +297,16 @@
     "serveIndex": {
       "type": "boolean"
     },
+    "serverMode": {
+      "anyOf": [
+        {
+          "type": "string"
+        },
+        {
+          "instanceof": "Function"
+        }
+      ]
+    },
     "serverSideRender": {
       "type": "boolean"
     },
@@ -391,8 +404,8 @@
       "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}",
-      "injectHot": "should be {Boolean|Function}",
+      "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)",
       "inline": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverinline)",
       "key": "should be {String|Buffer}",
       "lazy": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devserverlazy-)",
@@ -402,6 +415,7 @@
       "logTime": "should be {Boolean} (https://github.com/webpack/webpack-dev-middleware#logtime)",
       "mimeTypes": "should be {Object} (https://webpack.js.org/configuration/dev-server/#devservermimetypes-)",
       "noInfo": "should be {Boolean} (https://webpack.js.org/configuration/dev-server/#devservernoinfo-)",
+      "onListening": "should be {Function} (https://webpack.js.org/configuration/dev-server/#onlistening)",
       "open": "should be {String|Boolean} (https://webpack.js.org/configuration/dev-server/#devserveropen)",
       "openPage": "should be {String} (https://webpack.js.org/configuration/dev-server/#devserveropenpage)",
       "overlay": "should be {Boolean|Object} (https://webpack.js.org/configuration/dev-server/#devserveroverlay)",
@@ -416,6 +430,7 @@
       "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)",

package/lib/servers/BaseServer.js

@@ -0,0 +1,9 @@
+'use strict';
+
+// base class that users should extend if they are making their own
+// server implementation
+module.exports = class BaseServer {
+  constructor(server) {
+    this.server = server;
+  }
+};

package/lib/servers/SockJSServer.js

@@ -0,0 +1,64 @@
+'use strict';
+
+/* eslint-disable
+  class-methods-use-this,
+  func-names
+*/
+const sockjs = require('sockjs');
+const BaseServer = require('./BaseServer');
+
+// Workaround for sockjs@~0.3.19
+// 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) {
+    decorateConnection.call(this, req);
+    const connection = this.connection;
+    if (
+      connection.headers &&
+      !('origin' in connection.headers) &&
+      'origin' in req.headers
+    ) {
+      connection.headers.origin = req.headers.origin;
+    }
+  };
+}
+
+module.exports = class SockJSServer extends BaseServer {
+  // options has: error (function), debug (function), server (http/s server), path (string)
+  constructor(server) {
+    super(server);
+    this.socket = sockjs.createServer({
+      // Use provided up-to-date sockjs-client
+      sockjs_url: '/__webpack_dev_server__/sockjs.bundle.js',
+      // Limit useless logs
+      log: (severity, line) => {
+        if (severity === 'error') {
+          this.server.log.error(line);
+        } else {
+          this.server.log.debug(line);
+        }
+      },
+    });
+
+    this.socket.installHandlers(this.server.listeningApp, {
+      prefix: this.server.sockPath,
+    });
+  }
+
+  send(connection, message) {
+    connection.write(message);
+  }
+
+  close(connection) {
+    connection.close();
+  }
+
+  // f should return the resulting connection
+  onConnection(f) {
+    this.socket.on('connection', f);
+  }
+};

package/lib/servers/WebsocketServer.js

@@ -0,0 +1,8 @@
+'use strict';
+
+// 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 {};

package/lib/utils/addEntries.js

@@ -72,6 +72,8 @@ function addEntries(config, options, server) {
       const webTarget =
         config.target === 'web' ||
         config.target === 'webworker' ||
+        config.target === 'electron-renderer' ||
+        config.target === 'node-webkit' ||
         config.target == null;
       const additionalEntries = checkInject(
         options.injectClient,

package/lib/utils/createConfig.js

@@ -50,6 +50,10 @@ function createConfig(config, argv, { port }) {
     options.progress = argv.progress;
   }
 
+  if (argv.overlay) {
+    options.overlay = argv.overlay;
+  }
+
   if (!options.publicPath) {
     // eslint-disable-next-line
     options.publicPath =

package/lib/utils/defaultPort.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = 8080;