webpack-dev-server 3.1.12 → 3.2.1

package/lib/Server.js

@@ -4,10 +4,7 @@
   import/order,
   no-shadow,
   no-undefined,
-  func-names,
-  multiline-ternary,
-  array-bracket-spacing,
-  space-before-function-paren
+  func-names
 */
 const fs = require('fs');
 const path = require('path');
@@ -17,7 +14,6 @@ const tls = require('tls');
 const url = require('url');
 const http = require('http');
 const https = require('https');
-const spdy = require('spdy');
 const sockjs = require('sockjs');
 
 const semver = require('semver');
@@ -43,6 +39,26 @@ const createCertificate = require('./utils/createCertificate');
 const validateOptions = require('schema-utils');
 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
@@ -58,843 +74,896 @@ const STATS = {
   assets: true,
   warnings: true,
   errors: true,
-  errorDetails: false
+  errorDetails: false,
 };
 
-function Server (compiler, options = {}, _log) {
-  this.log = _log || createLogger(options);
-
-  validateOptions(schema, options, 'webpack Dev Server');
-
-  if (options.lazy && !options.filename) {
-    throw new Error("'filename' option must be set in lazy mode.");
-  }
-
-  this.hot = options.hot || options.hotOnly;
-  this.headers = options.headers;
-  this.progress = options.progress;
+class Server {
+  constructor(compiler, options = {}, _log) {
+    this.log = _log || createLogger(options);
 
-  this.clientOverlay = options.overlay;
-  this.clientLogLevel = options.clientLogLevel;
+    validateOptions(schema, options, 'webpack Dev Server');
 
-  this.publicHost = options.public;
-  this.allowedHosts = options.allowedHosts;
-  this.disableHostCheck = !!options.disableHostCheck;
+    if (options.lazy && !options.filename) {
+      throw new Error("'filename' option must be set in lazy mode.");
+    }
 
-  this.sockets = [];
+    this.hot = options.hot || options.hotOnly;
+    this.headers = options.headers;
+    this.progress = options.progress;
 
-  this.watchOptions = options.watchOptions || {};
-  this.contentBaseWatchers = [];
+    this.clientOverlay = options.overlay;
+    this.clientLogLevel = options.clientLogLevel;
 
-  // Listening for events
-  const invalidPlugin = () => {
-    this.sockWrite(this.sockets, 'invalid');
-  };
+    this.publicHost = options.public;
+    this.allowedHosts = options.allowedHosts;
+    this.disableHostCheck = !!options.disableHostCheck;
 
-  if (this.progress) {
-    const progressPlugin = new webpack.ProgressPlugin(
-      (percent, msg, addInfo) => {
-        percent = Math.floor(percent * 100);
+    this.sockets = [];
 
-        if (percent === 100) {
-          msg = 'Compilation completed';
-        }
+    this.watchOptions = options.watchOptions || {};
+    this.contentBaseWatchers = [];
+    // Replace leading and trailing slashes to normalize path
+    this.sockPath = `/${
+      options.sockPath
+        ? options.sockPath.replace(/^\/|\/$/g, '')
+        : 'sockjs-node'
+    }`;
 
-        if (addInfo) {
-          msg = `${msg} (${addInfo})`;
-        }
+    // Listening for events
+    const invalidPlugin = () => {
+      this.sockWrite(this.sockets, 'invalid');
+    };
 
-        this.sockWrite(this.sockets, 'progress-update', { percent, msg });
-      }
-    );
+    if (this.progress) {
+      const progressPlugin = new webpack.ProgressPlugin(
+        (percent, msg, addInfo) => {
+          percent = Math.floor(percent * 100);
 
-    progressPlugin.apply(compiler);
-  }
+          if (percent === 100) {
+            msg = 'Compilation completed';
+          }
 
-  const addHooks = (compiler) => {
-    const { compile, invalid, done } = compiler.hooks;
+          if (addInfo) {
+            msg = `${msg} (${addInfo})`;
+          }
 
-    compile.tap('webpack-dev-server', invalidPlugin);
-    invalid.tap('webpack-dev-server', invalidPlugin);
-    done.tap('webpack-dev-server', (stats) => {
-      this._sendStats(this.sockets, stats.toJson(STATS));
-      this._stats = stats;
-    });
-  };
+          this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+        }
+      );
 
-  if (compiler.compilers) {
-    compiler.compilers.forEach(addHooks);
-  } else {
-    addHooks(compiler);
-  }
+      progressPlugin.apply(compiler);
+    }
 
-  // Init express server
-  // eslint-disable-next-line
-  const app = this.app = new express();
+    const addHooks = (compiler) => {
+      const { compile, invalid, done } = compiler.hooks;
 
-  // ref: https://github.com/webpack/webpack-dev-server/issues/1575
-  // remove this when send@^0.16.3
-  express.static.mime.types.wasm = 'application/wasm';
+      compile.tap('webpack-dev-server', invalidPlugin);
+      invalid.tap('webpack-dev-server', invalidPlugin);
+      done.tap('webpack-dev-server', (stats) => {
+        this._sendStats(this.sockets, stats.toJson(STATS));
+        this._stats = stats;
+      });
+    };
 
-  app.all('*', (req, res, next) => {
-    if (this.checkHost(req.headers)) {
-      return next();
+    if (compiler.compilers) {
+      compiler.compilers.forEach(addHooks);
+    } else {
+      addHooks(compiler);
     }
 
-    res.send('Invalid Host header');
-  });
+    // Init express server
+    // eslint-disable-next-line
+    const app = (this.app = new express());
 
-  const wdmOptions = { logLevel: this.log.options.level };
+    // ref: https://github.com/webpack/webpack-dev-server/issues/1575
+    // remove this when send@^0.16.3
+    express.static.mime.types.wasm = 'application/wasm';
 
-  // middleware for serving webpack bundle
-  this.middleware = webpackDevMiddleware(compiler, Object.assign({}, options, wdmOptions));
+    app.all('*', (req, res, next) => {
+      if (this.checkHost(req.headers)) {
+        return next();
+      }
 
-  app.get('/__webpack_dev_server__/live.bundle.js', (req, res) => {
-    res.setHeader('Content-Type', 'application/javascript');
+      res.send('Invalid Host header');
+    });
 
-    fs.createReadStream(
-      path.join(__dirname, '..', 'client', 'live.bundle.js')
-    ).pipe(res);
-  });
+    const wdmOptions = { logLevel: this.log.options.level };
 
-  app.get('/__webpack_dev_server__/sockjs.bundle.js', (req, res) => {
-    res.setHeader('Content-Type', 'application/javascript');
+    // middleware for serving webpack bundle
+    this.middleware = webpackDevMiddleware(
+      compiler,
+      Object.assign({}, options, wdmOptions)
+    );
 
-    fs.createReadStream(
-      path.join(__dirname, '..', 'client', 'sockjs.bundle.js')
-    ).pipe(res);
-  });
+    app.get('/__webpack_dev_server__/live.bundle.js', (req, res) => {
+      res.setHeader('Content-Type', 'application/javascript');
 
-  app.get('/webpack-dev-server.js', (req, res) => {
-    res.setHeader('Content-Type', 'application/javascript');
+      fs.createReadStream(
+        path.join(__dirname, '..', 'client', 'live.bundle.js')
+      ).pipe(res);
+    });
 
-    fs.createReadStream(
-      path.join(__dirname, '..', 'client', 'index.bundle.js')
-    ).pipe(res);
-  });
+    app.get('/__webpack_dev_server__/sockjs.bundle.js', (req, res) => {
+      res.setHeader('Content-Type', 'application/javascript');
 
-  app.get('/webpack-dev-server/*', (req, res) => {
-    res.setHeader('Content-Type', 'text/html');
+      fs.createReadStream(
+        path.join(__dirname, '..', 'client', 'sockjs.bundle.js')
+      ).pipe(res);
+    });
 
-    fs.createReadStream(
-      path.join(__dirname, '..', 'client', 'live.html')
-    ).pipe(res);
-  });
+    app.get('/webpack-dev-server.js', (req, res) => {
+      res.setHeader('Content-Type', 'application/javascript');
 
-  app.get('/webpack-dev-server', (req, res) => {
-    res.setHeader('Content-Type', 'text/html');
+      fs.createReadStream(
+        path.join(__dirname, '..', 'client', 'index.bundle.js')
+      ).pipe(res);
+    });
 
-    res.write(
-      '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
-    );
+    app.get('/webpack-dev-server/*', (req, res) => {
+      res.setHeader('Content-Type', 'text/html');
 
-    const outputPath = this.middleware.getFilenameFromUrl(
-      options.publicPath || '/'
-    );
+      fs.createReadStream(
+        path.join(__dirname, '..', 'client', 'live.html')
+      ).pipe(res);
+    });
 
-    const filesystem = this.middleware.fileSystem;
+    app.get('/webpack-dev-server', (req, res) => {
+      res.setHeader('Content-Type', 'text/html');
 
-    function writeDirectory(baseUrl, basePath) {
-      const content = filesystem.readdirSync(basePath);
+      res.write(
+        '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
+      );
 
-      res.write('<ul>');
+      const outputPath = this.middleware.getFilenameFromUrl(
+        options.publicPath || '/'
+      );
 
-      content.forEach((item) => {
-        const p = `${basePath}/${item}`;
+      const filesystem = this.middleware.fileSystem;
 
-        if (filesystem.statSync(p).isFile()) {
-          res.write('<li><a href="');
-          res.write(baseUrl + item);
-          res.write('">');
-          res.write(item);
-          res.write('</a></li>');
+      function writeDirectory(baseUrl, basePath) {
+        const content = filesystem.readdirSync(basePath);
 
-          if (/\.js$/.test(item)) {
-            const html = item.substr(0, item.length - 3);
+        res.write('<ul>');
 
+        content.forEach((item) => {
+          const p = `${basePath}/${item}`;
+
+          if (filesystem.statSync(p).isFile()) {
             res.write('<li><a href="');
-            res.write(baseUrl + html);
+            res.write(baseUrl + item);
             res.write('">');
-            res.write(html);
-            res.write('</a> (magic html for ');
             res.write(item);
-            res.write(') (<a href="');
-            res.write(
-              baseUrl.replace(
-                // eslint-disable-next-line
-                /(^(https?:\/\/[^\/]+)?\/)/,
-                '$1webpack-dev-server/'
-              ) + html
-            );
-            res.write('">webpack-dev-server</a>)</li>');
-          }
-        } else {
-          res.write('<li>');
-          res.write(item);
-          res.write('<br>');
+            res.write('</a></li>');
+
+            if (/\.js$/.test(item)) {
+              const html = item.substr(0, item.length - 3);
+
+              res.write('<li><a href="');
+              res.write(baseUrl + html);
+              res.write('">');
+              res.write(html);
+              res.write('</a> (magic html for ');
+              res.write(item);
+              res.write(') (<a href="');
+              res.write(
+                baseUrl.replace(
+                  // eslint-disable-next-line
+                  /(^(https?:\/\/[^\/]+)?\/)/,
+                  '$1webpack-dev-server/'
+                ) + html
+              );
+              res.write('">webpack-dev-server</a>)</li>');
+            }
+          } else {
+            res.write('<li>');
+            res.write(item);
+            res.write('<br>');
 
-          writeDirectory(`${baseUrl + item}/`, p);
+            writeDirectory(`${baseUrl + item}/`, p);
 
-          res.write('</li>');
-        }
-      });
+            res.write('</li>');
+          }
+        });
 
-      res.write('</ul>');
-    }
+        res.write('</ul>');
+      }
 
-    writeDirectory(options.publicPath || '/', outputPath);
+      writeDirectory(options.publicPath || '/', outputPath);
 
-    res.end('</body></html>');
-  });
+      res.end('</body></html>');
+    });
 
-  let contentBase;
+    let contentBase;
 
-  if (options.contentBase !== undefined) {
-    contentBase = options.contentBase;
-  } else {
-    contentBase = process.cwd();
-  }
+    if (options.contentBase !== undefined) {
+      contentBase = options.contentBase;
+    } else {
+      contentBase = process.cwd();
+    }
 
-  // Keep track of websocket proxies for external websocket upgrade.
-  const websocketProxies = [];
+    // Keep track of websocket proxies for external websocket upgrade.
+    const websocketProxies = [];
 
-  const features = {
-    compress: () => {
-      if (options.compress) {
-        // Enable gzip compression.
-        app.use(compress());
-      }
-    },
-    proxy: () => {
-      if (options.proxy) {
-        /**
-          * Assume a proxy configuration specified as:
-          * proxy: {
-          *   'context': { options }
-          * }
-          * OR
-          * proxy: {
-          *   'context': 'target'
-          * }
-          */
-        if (!Array.isArray(options.proxy)) {
-          options.proxy = Object.keys(options.proxy).map((context) => {
-            let proxyOptions;
-            // For backwards compatibility reasons.
-            const correctedContext = context
-              .replace(/^\*$/, '**')
-              .replace(/\/\*$/, '');
-
-            if (typeof options.proxy[context] === 'string') {
-              proxyOptions = {
-                context: correctedContext,
-                target: options.proxy[context]
-              };
+    const features = {
+      compress: () => {
+        if (options.compress) {
+          // Enable gzip compression.
+          app.use(compress());
+        }
+      },
+      proxy: () => {
+        if (options.proxy) {
+          /**
+           * Assume a proxy configuration specified as:
+           * proxy: {
+           *   'context': { options }
+           * }
+           * OR
+           * proxy: {
+           *   'context': 'target'
+           * }
+           */
+          if (!Array.isArray(options.proxy)) {
+            if (Object.prototype.hasOwnProperty.call(options.proxy, 'target')) {
+              options.proxy = [options.proxy];
             } else {
-              proxyOptions = Object.assign({}, options.proxy[context]);
-              proxyOptions.context = correctedContext;
+              options.proxy = Object.keys(options.proxy).map((context) => {
+                let proxyOptions;
+                // For backwards compatibility reasons.
+                const correctedContext = context
+                  .replace(/^\*$/, '**')
+                  .replace(/\/\*$/, '');
+
+                if (typeof options.proxy[context] === 'string') {
+                  proxyOptions = {
+                    context: correctedContext,
+                    target: options.proxy[context],
+                  };
+                } else {
+                  proxyOptions = Object.assign({}, options.proxy[context]);
+                  proxyOptions.context = correctedContext;
+                }
+
+                proxyOptions.logLevel = proxyOptions.logLevel || 'warn';
+
+                return proxyOptions;
+              });
             }
+          }
 
-            proxyOptions.logLevel = proxyOptions.logLevel || 'warn';
-
-            return proxyOptions;
-          });
-        }
+          const getProxyMiddleware = (proxyConfig) => {
+            const context = proxyConfig.context || proxyConfig.path;
+            // It is possible to use the `bypass` method without a `target`.
+            // However, the proxy middleware has no use in this case, and will fail to instantiate.
+            if (proxyConfig.target) {
+              return httpProxyMiddleware(context, proxyConfig);
+            }
+          };
+          /**
+           * Assume a proxy configuration specified as:
+           * proxy: [
+           *   {
+           *     context: ...,
+           *     ...options...
+           *   },
+           *   // or:
+           *   function() {
+           *     return {
+           *       context: ...,
+           *       ...options...
+           *     };
+           *   }
+           * ]
+           */
+          options.proxy.forEach((proxyConfigOrCallback) => {
+            let proxyConfig;
+            let proxyMiddleware;
 
-        const getProxyMiddleware = (proxyConfig) => {
-          const context = proxyConfig.context || proxyConfig.path;
-          // It is possible to use the `bypass` method without a `target`.
-          // However, the proxy middleware has no use in this case, and will fail to instantiate.
-          if (proxyConfig.target) {
-            return httpProxyMiddleware(context, proxyConfig);
-          }
-        };
-        /**
-        * Assume a proxy configuration specified as:
-        * proxy: [
-        *   {
-        *     context: ...,
-        *     ...options...
-        *   },
-        *   // or:
-        *   function() {
-        *     return {
-        *       context: ...,
-        *       ...options...
-        *     };
-        *   }
-        * ]
-        */
-        options.proxy.forEach((proxyConfigOrCallback) => {
-          let proxyConfig;
-          let proxyMiddleware;
-
-          if (typeof proxyConfigOrCallback === 'function') {
-            proxyConfig = proxyConfigOrCallback();
-          } else {
-            proxyConfig = proxyConfigOrCallback;
-          }
+            if (typeof proxyConfigOrCallback === 'function') {
+              proxyConfig = proxyConfigOrCallback();
+            } else {
+              proxyConfig = proxyConfigOrCallback;
+            }
 
-          proxyMiddleware = getProxyMiddleware(proxyConfig);
+            proxyMiddleware = getProxyMiddleware(proxyConfig);
 
-          if (proxyConfig.ws) {
-            websocketProxies.push(proxyMiddleware);
-          }
+            if (proxyConfig.ws) {
+              websocketProxies.push(proxyMiddleware);
+            }
 
-          app.use((req, res, next) => {
-            if (typeof proxyConfigOrCallback === 'function') {
-              const newProxyConfig = proxyConfigOrCallback();
+            app.use((req, res, next) => {
+              if (typeof proxyConfigOrCallback === 'function') {
+                const newProxyConfig = proxyConfigOrCallback();
 
-              if (newProxyConfig !== proxyConfig) {
-                proxyConfig = newProxyConfig;
-                proxyMiddleware = getProxyMiddleware(proxyConfig);
+                if (newProxyConfig !== proxyConfig) {
+                  proxyConfig = newProxyConfig;
+                  proxyMiddleware = getProxyMiddleware(proxyConfig);
+                }
               }
-            }
 
-            const bypass = typeof proxyConfig.bypass === 'function';
+              const bypass = typeof proxyConfig.bypass === 'function';
 
-            const bypassUrl = (bypass && proxyConfig.bypass(req, res, proxyConfig)) || false;
+              const bypassUrl =
+                (bypass && proxyConfig.bypass(req, res, proxyConfig)) || false;
 
-            if (bypassUrl) {
-              req.url = bypassUrl;
+              if (bypassUrl) {
+                req.url = bypassUrl;
 
-              next();
-            } else if (proxyMiddleware) {
-              return proxyMiddleware(req, res, next);
-            } else {
-              next();
-            }
+                next();
+              } else if (proxyMiddleware) {
+                return proxyMiddleware(req, res, next);
+              } else {
+                next();
+              }
+            });
           });
-        });
-      }
-    },
-    historyApiFallback: () => {
-      if (options.historyApiFallback) {
-        const fallback = typeof options.historyApiFallback === 'object'
-          ? options.historyApiFallback
-          : null;
-        // Fall back to /index.html if nothing else matches.
-        app.use(historyApiFallback(fallback));
-      }
-    },
-    contentBaseFiles: () => {
-      if (Array.isArray(contentBase)) {
-        contentBase.forEach((item) => {
-          app.get('*', express.static(item));
-        });
-      } else if (/^(https?:)?\/\//.test(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.'
-        );
-
-        this.log.warn(
-          'proxy: {\n\t"*": "<your current contentBase configuration>"\n}'
-        );
-        // Redirect every request to contentBase
-        app.get('*', (req, res) => {
-          res.writeHead(302, {
-            Location: contentBase + req.path + (req._parsedUrl.search || '')
+        }
+      },
+      historyApiFallback: () => {
+        if (options.historyApiFallback) {
+          const fallback =
+            typeof options.historyApiFallback === 'object'
+              ? options.historyApiFallback
+              : null;
+          // Fall back to /index.html if nothing else matches.
+          app.use(historyApiFallback(fallback));
+        }
+      },
+      contentBaseFiles: () => {
+        if (Array.isArray(contentBase)) {
+          contentBase.forEach((item) => {
+            app.get('*', express.static(item));
           });
-
-          res.end();
-        });
-      } else if (typeof contentBase === 'number') {
-        this.log.warn(
-          'Using a number as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.'
-        );
-
-        this.log.warn(
-          'proxy: {\n\t"*": "//localhost:<your current contentBase configuration>"\n}'
-        );
-        // Redirect every request to the port contentBase
-        app.get('*', (req, res) => {
-          res.writeHead(302, {
-            Location: `//localhost:${contentBase}${req.path}${req._parsedUrl.search || ''}`
+        } else if (/^(https?:)?\/\//.test(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.'
+          );
+
+          this.log.warn(
+            'proxy: {\n\t"*": "<your current contentBase configuration>"\n}'
+          );
+          // Redirect every request to contentBase
+          app.get('*', (req, res) => {
+            res.writeHead(302, {
+              Location: contentBase + req.path + (req._parsedUrl.search || ''),
+            });
+
+            res.end();
+          });
+        } else if (typeof contentBase === 'number') {
+          this.log.warn(
+            'Using a number as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.'
+          );
+
+          this.log.warn(
+            'proxy: {\n\t"*": "//localhost:<your current contentBase configuration>"\n}'
+          );
+          // Redirect every request to the port contentBase
+          app.get('*', (req, res) => {
+            res.writeHead(302, {
+              Location: `//localhost:${contentBase}${req.path}${req._parsedUrl
+                .search || ''}`,
+            });
+
+            res.end();
           });
+        } else {
+          // route content request
+          app.get('*', express.static(contentBase, options.staticOptions));
+        }
+      },
+      contentBaseIndex: () => {
+        if (Array.isArray(contentBase)) {
+          contentBase.forEach((item) => {
+            app.get('*', serveIndex(item));
+          });
+        } else if (
+          !/^(https?:)?\/\//.test(contentBase) &&
+          typeof contentBase !== 'number'
+        ) {
+          app.get('*', serveIndex(contentBase));
+        }
+      },
+      watchContentBase: () => {
+        if (
+          /^(https?:)?\/\//.test(contentBase) ||
+          typeof contentBase === 'number'
+        ) {
+          throw new Error('Watching remote files is not supported.');
+        } else if (Array.isArray(contentBase)) {
+          contentBase.forEach((item) => {
+            this._watch(item);
+          });
+        } else {
+          this._watch(contentBase);
+        }
+      },
+      before: () => {
+        if (typeof options.before === 'function') {
+          options.before(app, this);
+        }
+      },
+      middleware: () => {
+        // include our middleware to ensure
+        // it is able to handle '/index.html' request after redirect
+        app.use(this.middleware);
+      },
+      after: () => {
+        if (typeof options.after === 'function') {
+          options.after(app, this);
+        }
+      },
+      headers: () => {
+        app.all('*', this.setContentHeaders.bind(this));
+      },
+      magicHtml: () => {
+        app.get('*', this.serveMagicHtml.bind(this));
+      },
+      setup: () => {
+        if (typeof options.setup === 'function') {
+          this.log.warn(
+            'The `setup` option is deprecated and will be removed in v4. Please update your config to use `before`'
+          );
+
+          options.setup(app, this);
+        }
+      },
+    };
 
-          res.end();
-        });
-      } else {
-        // route content request
-        app.get('*', express.static(contentBase, options.staticOptions));
-      }
-    },
-    contentBaseIndex: () => {
-      if (Array.isArray(contentBase)) {
-        contentBase.forEach((item) => {
-          app.get('*', serveIndex(item));
-        });
-      } else if (
-        !/^(https?:)?\/\//.test(contentBase) &&
-        typeof contentBase !== 'number'
-      ) {
-        app.get('*', serveIndex(contentBase));
-      }
-    },
-    watchContentBase: () => {
-      if (
-        /^(https?:)?\/\//.test(contentBase) ||
-        typeof contentBase === 'number'
-      ) {
-        throw new Error('Watching remote files is not supported.');
-      } else if (Array.isArray(contentBase)) {
-        contentBase.forEach((item) => {
-          this._watch(item);
-        });
-      } else {
-        this._watch(contentBase);
-      }
-    },
-    before: () => {
-      if (typeof options.before === 'function') {
-        options.before(app, this);
-      }
-    },
-    middleware: () => {
-      // include our middleware to ensure
-      // it is able to handle '/index.html' request after redirect
-      app.use(this.middleware);
-    },
-    after: () => {
-      if (typeof options.after === 'function') {
-        options.after(app, this);
-      }
-    },
-    headers: () => {
-      app.all('*', this.setContentHeaders.bind(this));
-    },
-    magicHtml: () => {
-      app.get('*', this.serveMagicHtml.bind(this));
-    },
-    setup: () => {
-      if (typeof options.setup === 'function') {
-        this.log.warn(
-          'The `setup` option is deprecated and will be removed in v3. Please update your config to use `before`'
-        );
-
-        options.setup(app, this);
-      }
+    const defaultFeatures = ['setup', 'before', 'headers', 'middleware'];
+
+    if (options.proxy) {
+      defaultFeatures.push('proxy', 'middleware');
     }
-  };
 
-  const defaultFeatures = [
-    'setup',
-    'before',
-    'headers',
-    'middleware'
-  ];
+    if (contentBase !== false) {
+      defaultFeatures.push('contentBaseFiles');
+    }
 
-  if (options.proxy) {
-    defaultFeatures.push('proxy', 'middleware');
-  }
+    if (options.watchContentBase) {
+      defaultFeatures.push('watchContentBase');
+    }
 
-  if (contentBase !== false) {
-    defaultFeatures.push('contentBaseFiles');
-  }
+    if (options.historyApiFallback) {
+      defaultFeatures.push('historyApiFallback', 'middleware');
 
-  if (options.watchContentBase) {
-    defaultFeatures.push('watchContentBase');
-  }
+      if (contentBase !== false) {
+        defaultFeatures.push('contentBaseFiles');
+      }
+    }
 
-  if (options.historyApiFallback) {
-    defaultFeatures.push('historyApiFallback', 'middleware');
+    defaultFeatures.push('magicHtml');
 
     if (contentBase !== false) {
-      defaultFeatures.push('contentBaseFiles');
+      defaultFeatures.push('contentBaseIndex');
+    }
+    // compress is placed last and uses unshift so that it will be the first middleware used
+    if (options.compress) {
+      defaultFeatures.unshift('compress');
     }
-  }
 
-  defaultFeatures.push('magicHtml');
+    if (options.after) {
+      defaultFeatures.push('after');
+    }
 
-  if (contentBase !== false) {
-    defaultFeatures.push('contentBaseIndex');
-  }
-  // compress is placed last and uses unshift so that it will be the first middleware used
-  if (options.compress) {
-    defaultFeatures.unshift('compress');
-  }
+    (options.features || defaultFeatures).forEach((feature) => {
+      features[feature]();
+    });
 
-  if (options.after) {
-    defaultFeatures.push('after');
-  }
+    if (options.https) {
+      // for keep supporting CLI parameters
+      if (typeof options.https === 'boolean') {
+        options.https = {
+          ca: options.ca,
+          pfx: options.pfx,
+          key: options.key,
+          cert: options.cert,
+          passphrase: options.pfxPassphrase,
+          requestCert: options.requestCert || false,
+        };
+      }
 
-  (options.features || defaultFeatures).forEach((feature) => {
-    features[feature]();
-  });
-
-  if (options.https) {
-    // for keep supporting CLI parameters
-    if (typeof options.https === 'boolean') {
-      options.https = {
-        ca: options.ca,
-        pfx: options.pfx,
-        key: options.key,
-        cert: options.cert,
-        passphrase: options.pfxPassphrase,
-        requestCert: options.requestCert || false
-      };
-    }
+      for (const property of ['ca', 'pfx', 'key', 'cert']) {
+        const value = options.https[property];
+        const isBuffer = value instanceof Buffer;
+
+        if (value && !isBuffer) {
+          let stats = null;
+
+          try {
+            stats = fs.lstatSync(value).isFile();
+          } catch (error) {
+            // ignore error
+          }
+
+          if (stats) {
+            // It is file
+            options.https[property] = fs.readFileSync(path.resolve(value));
+          } else {
+            options.https[property] = value;
+          }
+        }
+      }
 
-    let fakeCert;
+      let fakeCert;
 
-    if (!options.https.key || !options.https.cert) {
-      // Use a self-signed certificate if no certificate was configured.
-      // Cycle certs every 24 hours
-      const certPath = path.join(__dirname, '../ssl/server.pem');
+      if (!options.https.key || !options.https.cert) {
+        // Use a self-signed certificate if no certificate was configured.
+        // Cycle certs every 24 hours
+        const certPath = path.join(__dirname, '../ssl/server.pem');
 
-      let certExists = fs.existsSync(certPath);
+        let certExists = fs.existsSync(certPath);
 
-      if (certExists) {
-        const certTtl = 1000 * 60 * 60 * 24;
-        const certStat = fs.statSync(certPath);
+        if (certExists) {
+          const certTtl = 1000 * 60 * 60 * 24;
+          const certStat = fs.statSync(certPath);
 
-        const now = new Date();
+          const now = new Date();
 
-        // cert is more than 30 days old, kill it with fire
-        if ((now - certStat.ctime) / certTtl > 30) {
-          this.log.info('SSL Certificate is more than 30 days old. Removing.');
+          // cert is more than 30 days old, kill it with fire
+          if ((now - certStat.ctime) / certTtl > 30) {
+            this.log.info(
+              'SSL Certificate is more than 30 days old. Removing.'
+            );
 
-          del.sync([certPath], { force: true });
+            del.sync([certPath], { force: true });
 
-          certExists = false;
+            certExists = false;
+          }
         }
-      }
 
-      if (!certExists) {
-        this.log.info('Generating SSL Certificate');
+        if (!certExists) {
+          this.log.info('Generating SSL Certificate');
 
-        const attrs = [
-          { name: 'commonName', value: 'localhost' }
-        ];
+          const attrs = [{ name: 'commonName', value: 'localhost' }];
 
-        const pems = createCertificate(attrs);
+          const pems = createCertificate(attrs);
 
-        fs.writeFileSync(
-          certPath,
-          pems.private + pems.cert,
-          { encoding: 'utf-8' }
-        );
-      }
+          fs.writeFileSync(certPath, pems.private + pems.cert, {
+            encoding: 'utf8',
+          });
+        }
 
-      fakeCert = fs.readFileSync(certPath);
-    }
+        fakeCert = fs.readFileSync(certPath);
+      }
 
-    options.https.key = options.https.key || fakeCert;
-    options.https.cert = options.https.cert || fakeCert;
+      options.https.key = options.https.key || fakeCert;
+      options.https.cert = options.https.cert || fakeCert;
 
-    if (!options.https.spdy) {
-      options.https.spdy = {
-        protocols: ['h2', 'http/1.1']
-      };
-    }
+      if (!options.https.spdy) {
+        options.https.spdy = {
+          protocols: ['h2', 'http/1.1'],
+        };
+      }
 
-    // `spdy` is effectively unmaintained, and as a consequence of an
-    // implementation that extensively relies on Node’s non-public APIs, broken
-    // on Node 10 and above. In those cases, only https will be used for now.
-    // Once express supports Node's built-in HTTP/2 support, migrating over to
-    // that should be the best way to go.
-    // The relevant issues are:
-    // - https://github.com/nodejs/node/issues/21665
-    // - https://github.com/webpack/webpack-dev-server/issues/1449
-    // - https://github.com/expressjs/express/issues/3388
-    if (semver.gte(process.version, '10.0.0')) {
-      this.listeningApp = https.createServer(options.https, app);
+      // `spdy` is effectively unmaintained, and as a consequence of an
+      // implementation that extensively relies on Node’s non-public APIs, broken
+      // on Node 10 and above. In those cases, only https will be used for now.
+      // Once express supports Node's built-in HTTP/2 support, migrating over to
+      // that should be the best way to go.
+      // The relevant issues are:
+      // - https://github.com/nodejs/node/issues/21665
+      // - https://github.com/webpack/webpack-dev-server/issues/1449
+      // - https://github.com/expressjs/express/issues/3388
+      if (semver.gte(process.version, '10.0.0')) {
+        this.listeningApp = https.createServer(options.https, app);
+      } else {
+        /* eslint-disable global-require */
+        // The relevant issues are:
+        // https://github.com/spdy-http2/node-spdy/issues/350
+        // https://github.com/webpack/webpack-dev-server/issues/1592
+        this.listeningApp = require('spdy').createServer(options.https, app);
+        /* eslint-enable global-require */
+      }
     } else {
-      this.listeningApp = spdy.createServer(options.https, app);
+      this.listeningApp = http.createServer(app);
     }
-  } else {
-    this.listeningApp = http.createServer(app);
-  }
 
-  killable(this.listeningApp);
-
-  // Proxy websockets without the initial http request
-  // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
-  websocketProxies.forEach(function (wsProxy) {
-    this.listeningApp.on('upgrade', wsProxy.upgrade);
-  }, this);
-}
-
-Server.prototype.use = function () {
-  // eslint-disable-next-line
-  this.app.use.apply(this.app, arguments);
-};
+    killable(this.listeningApp);
 
-Server.prototype.setContentHeaders = function (req, res, next) {
-  if (this.headers) {
-    for (const name in this.headers) { // eslint-disable-line
-      res.setHeader(name, this.headers[name]);
-    }
+    // Proxy websockets without the initial http request
+    // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
+    websocketProxies.forEach(function(wsProxy) {
+      this.listeningApp.on('upgrade', wsProxy.upgrade);
+    }, this);
   }
 
-  next();
-};
-
-Server.prototype.checkHost = function (headers, headerToCheck) {
-  // allow user to opt-out this security check, at own risk
-  if (this.disableHostCheck) {
-    return true;
+  use() {
+    // eslint-disable-next-line
+    this.app.use.apply(this.app, arguments);
   }
 
-  if (!headerToCheck) headerToCheck = 'host';
-  // get the Host header and extract hostname
-  // we don't care about port not matching
-  const hostHeader = headers[headerToCheck];
+  setContentHeaders(req, res, next) {
+    if (this.headers) {
+      // eslint-disable-next-line
+      for (const name in this.headers) {
+        // eslint-disable-line
+        res.setHeader(name, this.headers[name]);
+      }
+    }
 
-  if (!hostHeader) {
-    return false;
+    next();
   }
 
-  // use the node url-parser to retrieve the hostname from the host-header.
-  const hostname = url.parse(
-    // if hostHeader doesn't have scheme, add // for parsing.
-    /^(.+:)?\/\//.test(hostHeader) ? hostHeader : `//${hostHeader}`,
-    false,
-    true,
-  ).hostname;
-  // always allow requests with explicit IPv4 or IPv6-address.
-  // A note on IPv6 addresses:
-  // hostHeader will always contain the brackets denoting
-  // 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)) {
-    return true;
+  checkHost(headers) {
+    return this.checkHeaders(headers, 'host');
   }
-  // always allow localhost host, for convience
-  if (hostname === 'localhost') {
-    return true;
+
+  checkOrigin(headers) {
+    return this.checkHeaders(headers, 'origin');
   }
-  // allow if hostname is in allowedHosts
-  if (this.allowedHosts && this.allowedHosts.length) {
-    for (let hostIdx = 0; hostIdx < this.allowedHosts.length; hostIdx++) {
-      const allowedHost = this.allowedHosts[hostIdx];
-
-      if (allowedHost === hostname) return true;
-
-      // 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)) {
-          return true;
-        }
-      }
+
+  checkHeaders(headers, headerToCheck) {
+    // allow user to opt-out this security check, at own risk
+    if (this.disableHostCheck) {
+      return true;
     }
-  }
 
-  // allow hostname of listening adress
-  if (hostname === this.hostname) {
-    return true;
-  }
+    if (!headerToCheck) {
+      headerToCheck = 'host';
+    }
 
-  // also allow public hostname if provided
-  if (typeof this.publicHost === 'string') {
-    const idxPublic = this.publicHost.indexOf(':');
+    // get the Host header and extract hostname
+    // we don't care about port not matching
+    const hostHeader = headers[headerToCheck];
 
-    const publicHostname = idxPublic >= 0
-      ? this.publicHost.substr(0, idxPublic)
-      : this.publicHost;
+    if (!hostHeader) {
+      return false;
+    }
 
-    if (hostname === publicHostname) {
+    // use the node url-parser to retrieve the hostname from the host-header.
+    const hostname = url.parse(
+      // if hostHeader doesn't have scheme, add // for parsing.
+      /^(.+:)?\/\//.test(hostHeader) ? hostHeader : `//${hostHeader}`,
+      false,
+      true
+    ).hostname;
+    // always allow requests with explicit IPv4 or IPv6-address.
+    // A note on IPv6 addresses:
+    // hostHeader will always contain the brackets denoting
+    // 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)) {
       return true;
     }
-  }
+    // always allow localhost host, for convience
+    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++) {
+        const allowedHost = this.allowedHosts[hostIdx];
 
-  // disallow
-  return false;
-};
+        if (allowedHost === hostname) {
+          return true;
+        }
 
-// delegate listen call and init sockjs
-Server.prototype.listen = function (port, hostname, fn) {
-  this.hostname = hostname;
-
-  const returnValue = this.listeningApp.listen(port, hostname, (err) => {
-    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);
+        // 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)) {
+            return true;
+          }
         }
       }
-    });
+    }
 
-    socket.on('connection', (connection) => {
-      if (!connection) {
-        return;
-      }
+    // allow hostname of listening adress
+    if (hostname === this.hostname) {
+      return true;
+    }
 
-      if (!this.checkHost(connection.headers) || !this.checkHost(connection.headers, 'origin')) {
-        this.sockWrite([ connection ], 'error', 'Invalid Host/Origin header');
+    // also allow public hostname if provided
+    if (typeof this.publicHost === 'string') {
+      const idxPublic = this.publicHost.indexOf(':');
 
-        connection.close();
+      const publicHostname =
+        idxPublic >= 0 ? this.publicHost.substr(0, idxPublic) : this.publicHost;
 
-        return;
+      if (hostname === publicHostname) {
+        return true;
       }
+    }
 
-      this.sockets.push(connection);
+    // disallow
+    return false;
+  }
 
-      connection.on('close', () => {
-        const idx = this.sockets.indexOf(connection);
+  // delegate listen call and init sockjs
+  listen(port, hostname, fn) {
+    this.hostname = hostname;
+
+    return this.listeningApp.listen(port, hostname, (err) => {
+      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);
+          }
+        },
+      });
 
-        if (idx >= 0) {
-          this.sockets.splice(idx, 1);
+      socket.on('connection', (connection) => {
+        if (!connection) {
+          return;
         }
-      });
 
-      if (this.hot) {
-        this.sockWrite([ connection ], 'hot');
-      }
+        if (
+          !this.checkHost(connection.headers) ||
+          !this.checkOrigin(connection.headers)
+        ) {
+          this.sockWrite([connection], 'error', 'Invalid Host/Origin header');
 
-      if (this.progress) {
-        this.sockWrite([ connection ], 'progress', this.progress);
-      }
+          connection.close();
 
-      if (this.clientOverlay) {
-        this.sockWrite([ connection ], 'overlay', this.clientOverlay);
-      }
+          return;
+        }
 
-      if (this.clientLogLevel) {
-        this.sockWrite([ connection ], 'log-level', this.clientLogLevel);
-      }
+        this.sockets.push(connection);
 
-      if (!this._stats) {
-        return;
-      }
+        connection.on('close', () => {
+          const idx = this.sockets.indexOf(connection);
 
-      this._sendStats([ connection ], this._stats.toJson(STATS), true);
-    });
+          if (idx >= 0) {
+            this.sockets.splice(idx, 1);
+          }
+        });
 
-    socket.installHandlers(this.listeningApp, {
-      prefix: '/sockjs-node'
-    });
+        if (this.hot) {
+          this.sockWrite([connection], 'hot');
+        }
 
-    if (fn) {
-      fn.call(this.listeningApp, err);
-    }
-  });
+        if (this.progress) {
+          this.sockWrite([connection], 'progress', this.progress);
+        }
 
-  return returnValue;
-};
+        if (this.clientOverlay) {
+          this.sockWrite([connection], 'overlay', this.clientOverlay);
+        }
 
-Server.prototype.close = function (cb) {
-  this.sockets.forEach((socket) => {
-    socket.close();
-  });
+        if (this.clientLogLevel) {
+          this.sockWrite([connection], 'log-level', this.clientLogLevel);
+        }
 
-  this.sockets = [];
+        if (!this._stats) {
+          return;
+        }
 
-  this.contentBaseWatchers.forEach((watcher) => {
-    watcher.close();
-  });
+        this._sendStats([connection], this._stats.toJson(STATS), true);
+      });
 
-  this.contentBaseWatchers = [];
+      socket.installHandlers(this.listeningApp, {
+        prefix: this.sockPath,
+      });
 
-  this.listeningApp.kill(() => {
-    this.middleware.close(cb);
-  });
-};
+      if (fn) {
+        fn.call(this.listeningApp, err);
+      }
+    });
+  }
 
-Server.prototype.sockWrite = function (sockets, type, data) {
-  sockets.forEach((socket) => {
-    socket.write(
-      JSON.stringify({ type, data })
-    );
-  });
-};
+  close(cb) {
+    this.sockets.forEach((socket) => {
+      socket.close();
+    });
 
-Server.prototype.serveMagicHtml = function (req, res, next) {
-  const _path = req.path;
+    this.sockets = [];
 
-  try {
-    const isFile = this.middleware.fileSystem.statSync(
-      this.middleware.getFilenameFromUrl(`${_path}.js`)
-    ).isFile();
+    this.contentBaseWatchers.forEach((watcher) => {
+      watcher.close();
+    });
 
-    if (!isFile) {
-      return next();
-    }
-    // Serve a page that executes the javascript
-    res.write(
-      '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><script type="text/javascript" charset="utf-8" src="'
-    );
-    res.write(_path);
-    res.write('.js');
-    res.write(req._parsedUrl.search || '');
+    this.contentBaseWatchers = [];
 
-    res.end('"></script></body></html>');
-  } catch (err) {
-    return next();
+    this.listeningApp.kill(() => {
+      this.middleware.close(cb);
+    });
   }
-};
 
-// send stats to a socket or multiple sockets
-Server.prototype._sendStats = function (sockets, stats, force) {
-  if (
-    !force &&
-    stats &&
-    (!stats.errors || stats.errors.length === 0) &&
-    stats.assets &&
-    stats.assets.every(asset => !asset.emitted)
-  ) {
-    return this.sockWrite(sockets, 'still-ok');
+  // eslint-disable-next-line
+  sockWrite(sockets, type, data) {
+    sockets.forEach((socket) => {
+      socket.write(JSON.stringify({ type, data }));
+    });
   }
 
-  this.sockWrite(sockets, 'hash', stats.hash);
+  serveMagicHtml(req, res, next) {
+    const _path = req.path;
+
+    try {
+      const isFile = this.middleware.fileSystem
+        .statSync(this.middleware.getFilenameFromUrl(`${_path}.js`))
+        .isFile();
 
-  if (stats.errors.length > 0) {
-    this.sockWrite(sockets, 'errors', stats.errors);
-  } else if (stats.warnings.length > 0) {
-    this.sockWrite(sockets, 'warnings', stats.warnings);
-  } else {
-    this.sockWrite(sockets, 'ok');
+      if (!isFile) {
+        return next();
+      }
+      // Serve a page that executes the javascript
+      res.write(
+        '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body><script type="text/javascript" charset="utf-8" src="'
+      );
+      res.write(_path);
+      res.write('.js');
+      res.write(req._parsedUrl.search || '');
+
+      res.end('"></script></body></html>');
+    } catch (err) {
+      return next();
+    }
   }
-};
 
-Server.prototype._watch = function (watchPath) {
-  // duplicate the same massaging of options that watchpack performs
-  // https://github.com/webpack/watchpack/blob/master/lib/DirectoryWatcher.js#L49
-  // this isn't an elegant solution, but we'll improve it in the future
-  const usePolling = this.watchOptions.poll ? true : undefined;
-  const interval = typeof this.watchOptions.poll === 'number'
-    ? this.watchOptions.poll
-    : undefined;
-
-  const options = {
-    ignoreInitial: true,
-    persistent: true,
-    followSymlinks: false,
-    depth: 0,
-    atomic: false,
-    alwaysStat: true,
-    ignorePermissionErrors: true,
-    ignored: this.watchOptions.ignored,
-    usePolling,
-    interval
-  };
+  // send stats to a socket or multiple sockets
+  _sendStats(sockets, stats, force) {
+    if (
+      !force &&
+      stats &&
+      (!stats.errors || stats.errors.length === 0) &&
+      stats.assets &&
+      stats.assets.every((asset) => !asset.emitted)
+    ) {
+      return this.sockWrite(sockets, 'still-ok');
+    }
 
-  const watcher = chokidar.watch(watchPath, options);
+    this.sockWrite(sockets, 'hash', stats.hash);
 
-  watcher.on('change', () => {
-    this.sockWrite(this.sockets, 'content-changed');
-  });
+    if (stats.errors.length > 0) {
+      this.sockWrite(sockets, 'errors', stats.errors);
+    } else if (stats.warnings.length > 0) {
+      this.sockWrite(sockets, 'warnings', stats.warnings);
+    } else {
+      this.sockWrite(sockets, 'ok');
+    }
+  }
 
-  this.contentBaseWatchers.push(watcher);
-};
+  _watch(watchPath) {
+    // duplicate the same massaging of options that watchpack performs
+    // https://github.com/webpack/watchpack/blob/master/lib/DirectoryWatcher.js#L49
+    // this isn't an elegant solution, but we'll improve it in the future
+    const usePolling = this.watchOptions.poll ? true : undefined;
+    const interval =
+      typeof this.watchOptions.poll === 'number'
+        ? this.watchOptions.poll
+        : undefined;
+
+    const options = {
+      ignoreInitial: true,
+      persistent: true,
+      followSymlinks: false,
+      depth: 0,
+      atomic: false,
+      alwaysStat: true,
+      ignorePermissionErrors: true,
+      ignored: this.watchOptions.ignored,
+      usePolling,
+      interval,
+    };
+
+    const watcher = chokidar.watch(watchPath, options);
+
+    watcher.on('change', () => {
+      this.sockWrite(this.sockets, 'content-changed');
+    });
 
-Server.prototype.invalidate = function () {
-  if (this.middleware) {
-    this.middleware.invalidate();
+    this.contentBaseWatchers.push(watcher);
   }
-};
+
+  invalidate() {
+    if (this.middleware) {
+      this.middleware.invalidate();
+    }
+  }
+}
 
 // Export this logic,
 // so that other implementations,