webpack-dev-server 3.3.1 → 3.5.1

package/lib/Server.js

@@ -1,153 +1,169 @@
 'use strict';
 
 /* eslint-disable
-  import/order,
   no-shadow,
   no-undefined,
   func-names
 */
 const fs = require('fs');
 const path = require('path');
-
-const ip = require('ip');
 const tls = require('tls');
 const url = require('url');
 const http = require('http');
 const https = require('https');
-const sockjs = require('sockjs');
-
+const ip = require('ip');
 const semver = require('semver');
-
 const killable = require('killable');
-
-const del = require('del');
 const chokidar = require('chokidar');
-
 const express = require('express');
-
-const compress = require('compression');
-const serveIndex = require('serve-index');
 const httpProxyMiddleware = require('http-proxy-middleware');
 const historyApiFallback = require('connect-history-api-fallback');
-
+const compress = require('compression');
+const serveIndex = require('serve-index');
 const webpack = require('webpack');
 const webpackDevMiddleware = require('webpack-dev-middleware');
-
+const validateOptions = require('schema-utils');
 const updateCompiler = require('./utils/updateCompiler');
 const createLogger = require('./utils/createLogger');
-const createCertificate = require('./utils/createCertificate');
-
-const validateOptions = require('schema-utils');
+const getCertificate = require('./utils/getCertificate');
+const status = require('./utils/status');
+const createDomain = require('./utils/createDomain');
+const runBonjour = require('./utils/runBonjour');
+const routes = require('./utils/routes');
 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;
-    }
-  };
-}
+const SockJSServer = require('./servers/SockJSServer');
 
 // 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
 // change it to auto allows OpenSSL to select the curve automatically
-// See https://github.com/nodejs/node/issues/16196 for more infomation
+// See https://github.com/nodejs/node/issues/16196 for more information
 if (semver.satisfies(process.version, '8.6.0 - 9')) {
   tls.DEFAULT_ECDH_CURVE = 'auto';
 }
 
-class Server {
-  static get DEFAULT_STATS() {
-    return {
-      all: false,
-      hash: true,
-      assets: true,
-      warnings: true,
-      errors: true,
-      errorDetails: false,
-    };
-  }
+if (!process.env.WEBPACK_DEV_SERVER) {
+  process.env.WEBPACK_DEV_SERVER = true;
+}
 
+class Server {
   constructor(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.");
     }
 
-    // if the user enables http2, we can safely enable https
-    if (options.http2 && !options.https) {
-      options.https = true;
-    }
+    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);
+
     this.originalStats =
-      options.stats && Object.keys(options.stats).length ? options.stats : {};
+      this.options.stats && Object.keys(this.options.stats).length
+        ? this.options.stats
+        : {};
 
-    this.hot = options.hot || options.hotOnly;
-    this.headers = options.headers;
-    this.progress = options.progress;
+    this.sockets = [];
+    this.contentBaseWatchers = [];
 
-    this.serveIndex = options.serveIndex;
+    // TODO this.<property> is deprecated (remove them in next major release.) in favor this.options.<property>
+    this.hot = this.options.hot || this.options.hotOnly;
+    this.headers = this.options.headers;
+    this.progress = this.options.progress;
 
-    this.clientOverlay = options.overlay;
-    this.clientLogLevel = options.clientLogLevel;
+    this.serveIndex = this.options.serveIndex;
 
-    this.publicHost = options.public;
-    this.allowedHosts = options.allowedHosts;
-    this.disableHostCheck = !!options.disableHostCheck;
+    this.clientOverlay = this.options.overlay;
+    this.clientLogLevel = this.options.clientLogLevel;
 
-    this.sockets = [];
+    this.publicHost = this.options.public;
+    this.allowedHosts = this.options.allowedHosts;
+    this.disableHostCheck = !!this.options.disableHostCheck;
+
+    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 || {};
-    this.contentBaseWatchers = [];
     // Replace leading and trailing slashes to normalize path
     this.sockPath = `/${
-      options.sockPath
-        ? options.sockPath.replace(/^\/|\/$/g, '')
+      this.options.sockPath
+        ? this.options.sockPath.replace(/^\/|\/$/g, '')
         : 'sockjs-node'
     }`;
 
-    // Listening for events
-    const invalidPlugin = () => {
-      this.sockWrite(this.sockets, 'invalid');
-    };
-
     if (this.progress) {
-      const progressPlugin = new webpack.ProgressPlugin(
-        (percent, msg, addInfo) => {
-          percent = Math.floor(percent * 100);
+      this.setupProgressPlugin();
+    }
 
-          if (percent === 100) {
-            msg = 'Compilation completed';
-          }
+    this.setupHooks();
+    this.setupApp();
+    this.setupCheckHostRoute();
+    this.setupDevMiddleware();
 
-          if (addInfo) {
-            msg = `${msg} (${addInfo})`;
-          }
+    // set express routes
+    routes(this.app, this.middleware, this.options);
+
+    // Keep track of websocket proxies for external websocket upgrade.
+    this.websocketProxies = [];
+
+    this.setupFeatures();
+    this.setupHttps();
+    this.createServer();
 
-          this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+    killable(this.listeningApp);
+
+    // Proxy websockets without the initial http request
+    // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
+    this.websocketProxies.forEach(function(wsProxy) {
+      this.listeningApp.on('upgrade', wsProxy.upgrade);
+    }, this);
+  }
+
+  setupProgressPlugin() {
+    const progressPlugin = new webpack.ProgressPlugin(
+      (percent, msg, addInfo) => {
+        percent = Math.floor(percent * 100);
+
+        if (percent === 100) {
+          msg = 'Compilation completed';
         }
-      );
 
-      progressPlugin.apply(compiler);
-    }
+        if (addInfo) {
+          msg = `${msg} (${addInfo})`;
+        }
+
+        this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+      }
+    );
+
+    progressPlugin.apply(this.compiler);
+  }
+
+  setupApp() {
+    // Init express server
+    // eslint-disable-next-line new-cap
+    this.app = new express();
+  }
+
+  setupHooks() {
+    // Listening for events
+    const invalidPlugin = () => {
+      this.sockWrite(this.sockets, 'invalid');
+    };
 
     const addHooks = (compiler) => {
       const { compile, invalid, done } = compiler.hooks;
@@ -160,527 +176,450 @@ class Server {
       });
     };
 
-    if (compiler.compilers) {
-      compiler.compilers.forEach(addHooks);
+    if (this.compiler.compilers) {
+      this.compiler.compilers.forEach(addHooks);
     } else {
-      addHooks(compiler);
-    }
-
-    // Init express server
-    // eslint-disable-next-line
-    const app = (this.app = new express());
-
-    // ref: https://github.com/webpack/webpack-dev-server/issues/1575
-    // ref: https://github.com/webpack/webpack-dev-server/issues/1724
-    // remove this when send@^0.16.3
-    if (express.static && express.static.mime && express.static.mime.types) {
-      express.static.mime.types.wasm = 'application/wasm';
+      addHooks(this.compiler);
     }
+  }
 
-    app.all('*', (req, res, next) => {
+  setupCheckHostRoute() {
+    this.app.all('*', (req, res, next) => {
       if (this.checkHost(req.headers)) {
         return next();
       }
 
       res.send('Invalid Host header');
     });
+  }
 
-    const wdmOptions = { logLevel: this.log.options.level };
-
+  setupDevMiddleware() {
     // middleware for serving webpack bundle
     this.middleware = webpackDevMiddleware(
-      compiler,
-      Object.assign({}, options, wdmOptions)
+      this.compiler,
+      Object.assign({}, this.options, { logLevel: this.log.options.level })
     );
+  }
 
-    app.get('/__webpack_dev_server__/live.bundle.js', (req, res) => {
-      res.setHeader('Content-Type', 'application/javascript');
+  setupCompressFeature() {
+    this.app.use(compress());
+  }
 
-      fs.createReadStream(
-        path.join(__dirname, '..', 'client', 'live.bundle.js')
-      ).pipe(res);
-    });
+  setupProxyFeature() {
+    /**
+     * Assume a proxy configuration specified as:
+     * proxy: {
+     *   'context': { options }
+     * }
+     * OR
+     * proxy: {
+     *   'context': 'target'
+     * }
+     */
+    if (!Array.isArray(this.options.proxy)) {
+      if (Object.prototype.hasOwnProperty.call(this.options.proxy, 'target')) {
+        this.options.proxy = [this.options.proxy];
+      } else {
+        this.options.proxy = Object.keys(this.options.proxy).map((context) => {
+          let proxyOptions;
+          // For backwards compatibility reasons.
+          const correctedContext = context
+            .replace(/^\*$/, '**')
+            .replace(/\/\*$/, '');
+
+          if (typeof this.options.proxy[context] === 'string') {
+            proxyOptions = {
+              context: correctedContext,
+              target: this.options.proxy[context],
+            };
+          } else {
+            proxyOptions = Object.assign({}, this.options.proxy[context]);
+            proxyOptions.context = correctedContext;
+          }
 
-    app.get('/__webpack_dev_server__/sockjs.bundle.js', (req, res) => {
-      res.setHeader('Content-Type', 'application/javascript');
+          proxyOptions.logLevel = proxyOptions.logLevel || 'warn';
 
-      fs.createReadStream(
-        path.join(__dirname, '..', 'client', 'sockjs.bundle.js')
-      ).pipe(res);
-    });
+          return proxyOptions;
+        });
+      }
+    }
 
-    app.get('/webpack-dev-server.js', (req, res) => {
-      res.setHeader('Content-Type', 'application/javascript');
+    const getProxyMiddleware = (proxyConfig) => {
+      const context = proxyConfig.context || proxyConfig.path;
 
-      fs.createReadStream(
-        path.join(__dirname, '..', 'client', 'index.bundle.js')
-      ).pipe(res);
-    });
+      // 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...
+     *     };
+     *   }
+     * ]
+     */
+    this.options.proxy.forEach((proxyConfigOrCallback) => {
+      let proxyConfig;
+      let proxyMiddleware;
+
+      if (typeof proxyConfigOrCallback === 'function') {
+        proxyConfig = proxyConfigOrCallback();
+      } else {
+        proxyConfig = proxyConfigOrCallback;
+      }
 
-    app.get('/webpack-dev-server/*', (req, res) => {
-      res.setHeader('Content-Type', 'text/html');
+      proxyMiddleware = getProxyMiddleware(proxyConfig);
+
+      if (proxyConfig.ws) {
+        this.websocketProxies.push(proxyMiddleware);
+      }
 
-      fs.createReadStream(
-        path.join(__dirname, '..', 'client', 'live.html')
-      ).pipe(res);
+      this.app.use((req, res, next) => {
+        if (typeof proxyConfigOrCallback === 'function') {
+          const newProxyConfig = proxyConfigOrCallback();
+
+          if (newProxyConfig !== proxyConfig) {
+            proxyConfig = newProxyConfig;
+            proxyMiddleware = getProxyMiddleware(proxyConfig);
+          }
+        }
+
+        // - Check if we have a bypass function defined
+        // - In case the bypass function is defined we'll retrieve the
+        // bypassUrl from it otherwise byPassUrl would be null
+        const isByPassFuncDefined = typeof proxyConfig.bypass === 'function';
+        const bypassUrl = isByPassFuncDefined
+          ? proxyConfig.bypass(req, res, proxyConfig)
+          : null;
+
+        if (typeof bypassUrl === 'boolean') {
+          // skip the proxy
+          req.url = null;
+          next();
+        } else if (typeof bypassUrl === 'string') {
+          // byPass to that url
+          req.url = bypassUrl;
+          next();
+        } else if (proxyMiddleware) {
+          return proxyMiddleware(req, res, next);
+        } else {
+          next();
+        }
+      });
     });
+  }
 
-    app.get('/webpack-dev-server', (req, res) => {
-      res.setHeader('Content-Type', 'text/html');
+  setupHistoryApiFallbackFeature() {
+    const fallback =
+      typeof this.options.historyApiFallback === 'object'
+        ? this.options.historyApiFallback
+        : null;
 
-      res.write(
-        '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
+    // Fall back to /index.html if nothing else matches.
+    this.app.use(historyApiFallback(fallback));
+  }
+
+  setupStaticFeature() {
+    const contentBase = this.options.contentBase;
+
+    if (Array.isArray(contentBase)) {
+      contentBase.forEach((item) => {
+        this.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.'
       );
 
-      const outputPath = this.middleware.getFilenameFromUrl(
-        options.publicPath || '/'
+      this.log.warn(
+        'proxy: {\n\t"*": "<your current contentBase configuration>"\n}'
       );
 
-      const filesystem = this.middleware.fileSystem;
-
-      function writeDirectory(baseUrl, basePath) {
-        const content = filesystem.readdirSync(basePath);
-
-        res.write('<ul>');
-
-        content.forEach((item) => {
-          const p = `${basePath}/${item}`;
-
-          if (filesystem.statSync(p).isFile()) {
-            res.write('<li><a href="');
-            res.write(baseUrl + item);
-            res.write('">');
-            res.write(item);
-            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>');
+      // Redirect every request to contentBase
+      this.app.get('*', (req, res) => {
+        res.writeHead(302, {
+          Location: contentBase + req.path + (req._parsedUrl.search || ''),
+        });
 
-            writeDirectory(`${baseUrl + item}/`, p);
+        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.'
+      );
 
-            res.write('</li>');
-          }
+      this.log.warn(
+        'proxy: {\n\t"*": "//localhost:<your current contentBase configuration>"\n}'
+      );
+
+      // Redirect every request to the port contentBase
+      this.app.get('*', (req, res) => {
+        res.writeHead(302, {
+          Location: `//localhost:${contentBase}${req.path}${req._parsedUrl
+            .search || ''}`,
         });
 
-        res.write('</ul>');
-      }
+        res.end();
+      });
+    } else {
+      // route content request
+      this.app.get(
+        '*',
+        express.static(contentBase, this.options.staticOptions)
+      );
+    }
+  }
 
-      writeDirectory(options.publicPath || '/', outputPath);
+  setupServeIndexFeature() {
+    const contentBase = this.options.contentBase;
 
-      res.end('</body></html>');
-    });
+    if (Array.isArray(contentBase)) {
+      contentBase.forEach((item) => {
+        this.app.get('*', serveIndex(item));
+      });
+    } else if (
+      !/^(https?:)?\/\//.test(contentBase) &&
+      typeof contentBase !== 'number'
+    ) {
+      this.app.get('*', serveIndex(contentBase));
+    }
+  }
 
-    let contentBase;
+  setupWatchStaticFeature() {
+    const contentBase = this.options.contentBase;
 
-    if (options.contentBase !== undefined) {
-      contentBase = options.contentBase;
+    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 {
-      contentBase = process.cwd();
+      this._watch(contentBase);
     }
+  }
 
-    // Keep track of websocket proxies for external websocket upgrade.
-    const websocketProxies = [];
+  setupBeforeFeature() {
+    // Todo rename onBeforeSetupMiddleware in next major release
+    // Todo pass only `this` argument
+    this.options.before(this.app, this, this.compiler);
+  }
+
+  setupMiddleware() {
+    this.app.use(this.middleware);
+  }
+
+  setupAfterFeature() {
+    // Todo rename onAfterSetupMiddleware in next major release
+    // Todo pass only `this` argument
+    this.options.after(this.app, this, this.compiler);
+  }
+
+  setupHeadersFeature() {
+    this.app.all('*', this.setContentHeaders.bind(this));
+  }
 
+  setupMagicHtmlFeature() {
+    this.app.get('*', this.serveMagicHtml.bind(this));
+  }
+
+  setupSetupFeature() {
+    this.log.warn(
+      'The `setup` option is deprecated and will be removed in v4. Please update your config to use `before`'
+    );
+
+    this.options.setup(this.app, this);
+  }
+
+  setupFeatures() {
     const features = {
       compress: () => {
-        if (options.compress) {
-          // Enable gzip compression.
-          app.use(compress());
+        if (this.options.compress) {
+          this.setupCompressFeature();
         }
       },
       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 {
-              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;
-              });
-            }
-          }
-
-          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;
-            }
-
-            proxyMiddleware = getProxyMiddleware(proxyConfig);
-
-            if (proxyConfig.ws) {
-              websocketProxies.push(proxyMiddleware);
-            }
-
-            app.use((req, res, next) => {
-              if (typeof proxyConfigOrCallback === 'function') {
-                const newProxyConfig = proxyConfigOrCallback();
-
-                if (newProxyConfig !== proxyConfig) {
-                  proxyConfig = newProxyConfig;
-                  proxyMiddleware = getProxyMiddleware(proxyConfig);
-                }
-              }
-
-              // - Check if we have a bypass function defined
-              // - In case the bypass function is defined we'll retrieve the
-              // bypassUrl from it otherwise byPassUrl would be null
-              const isByPassFuncDefined =
-                typeof proxyConfig.bypass === 'function';
-              const bypassUrl = isByPassFuncDefined
-                ? proxyConfig.bypass(req, res, proxyConfig)
-                : null;
-
-              if (typeof bypassUrl === 'boolean') {
-                // skip the proxy
-                req.url = null;
-                next();
-              } else if (typeof bypassUrl === 'string') {
-                // byPass to that url
-                req.url = bypassUrl;
-                next();
-              } else if (proxyMiddleware) {
-                return proxyMiddleware(req, res, next);
-              } else {
-                next();
-              }
-            });
-          });
+        if (this.options.proxy) {
+          this.setupProxyFeature();
         }
       },
       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));
+        if (this.options.historyApiFallback) {
+          this.setupHistoryApiFallbackFeature();
         }
       },
+      // Todo rename to `static` in future major release
       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 || ''),
-            });
-
-            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));
-        }
+        this.setupStaticFeature();
       },
+      // Todo rename to `serveIndex` in future major release
       contentBaseIndex: () => {
-        if (Array.isArray(contentBase)) {
-          contentBase.forEach((item) => {
-            app.get('*', serveIndex(item));
-          });
-        } else if (
-          !/^(https?:)?\/\//.test(contentBase) &&
-          typeof contentBase !== 'number'
-        ) {
-          app.get('*', serveIndex(contentBase));
-        }
+        this.setupServeIndexFeature();
       },
+      // Todo rename to `watchStatic` in future major release
       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);
-        }
+        this.setupWatchStaticFeature();
       },
       before: () => {
-        if (typeof options.before === 'function') {
-          options.before(app, this, compiler);
+        if (typeof this.options.before === 'function') {
+          this.setupBeforeFeature();
         }
       },
       middleware: () => {
         // include our middleware to ensure
         // it is able to handle '/index.html' request after redirect
-        app.use(this.middleware);
+        this.setupMiddleware();
       },
       after: () => {
-        if (typeof options.after === 'function') {
-          options.after(app, this, compiler);
+        if (typeof this.options.after === 'function') {
+          this.setupAfterFeature();
         }
       },
       headers: () => {
-        app.all('*', this.setContentHeaders.bind(this));
+        this.setupHeadersFeature();
       },
       magicHtml: () => {
-        app.get('*', this.serveMagicHtml.bind(this));
+        this.setupMagicHtmlFeature();
       },
       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);
+        if (typeof this.options.setup === 'function') {
+          this.setupSetupFeature();
         }
       },
     };
 
-    const defaultFeatures = ['setup', 'before', 'headers', 'middleware'];
+    const runnableFeatures = [];
 
-    if (options.proxy) {
-      defaultFeatures.push('proxy', 'middleware');
+    // compress is placed last and uses unshift so that it will be the first middleware used
+    if (this.options.compress) {
+      runnableFeatures.push('compress');
     }
 
-    if (contentBase !== false) {
-      defaultFeatures.push('contentBaseFiles');
+    runnableFeatures.push('setup', 'before', 'headers', 'middleware');
+
+    if (this.options.proxy) {
+      runnableFeatures.push('proxy', 'middleware');
     }
 
-    if (options.watchContentBase) {
-      defaultFeatures.push('watchContentBase');
+    if (this.options.contentBase !== false) {
+      runnableFeatures.push('contentBaseFiles');
     }
 
-    if (options.historyApiFallback) {
-      defaultFeatures.push('historyApiFallback', 'middleware');
+    if (this.options.historyApiFallback) {
+      runnableFeatures.push('historyApiFallback', 'middleware');
 
-      if (contentBase !== false) {
-        defaultFeatures.push('contentBaseFiles');
+      if (this.options.contentBase !== false) {
+        runnableFeatures.push('contentBaseFiles');
       }
     }
 
-    defaultFeatures.push('magicHtml');
-
     // checking if it's set to true or not set (Default : undefined => true)
     this.serveIndex = this.serveIndex || this.serveIndex === undefined;
 
-    const shouldHandleServeIndex = contentBase && this.serveIndex;
-
-    if (shouldHandleServeIndex) {
-      defaultFeatures.push('contentBaseIndex');
+    if (this.options.contentBase && this.serveIndex) {
+      runnableFeatures.push('contentBaseIndex');
     }
 
-    // compress is placed last and uses unshift so that it will be the first middleware used
-    if (options.compress) {
-      defaultFeatures.unshift('compress');
+    if (this.options.watchContentBase) {
+      runnableFeatures.push('watchContentBase');
     }
 
-    if (options.after) {
-      defaultFeatures.push('after');
+    runnableFeatures.push('magicHtml');
+
+    if (this.options.after) {
+      runnableFeatures.push('after');
     }
 
-    (options.features || defaultFeatures).forEach((feature) => {
+    (this.options.features || runnableFeatures).forEach((feature) => {
       features[feature]();
     });
+  }
+
+  setupHttps() {
+    // if the user enables http2, we can safely enable https
+    if (this.options.http2 && !this.options.https) {
+      this.options.https = true;
+    }
 
-    if (options.https) {
+    if (this.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,
+      if (typeof this.options.https === 'boolean') {
+        this.options.https = {
+          ca: this.options.ca,
+          pfx: this.options.pfx,
+          key: this.options.key,
+          cert: this.options.cert,
+          passphrase: this.options.pfxPassphrase,
+          requestCert: this.options.requestCert || false,
         };
       }
 
       for (const property of ['ca', 'pfx', 'key', 'cert']) {
-        const value = options.https[property];
+        const value = this.options.https[property];
         const isBuffer = value instanceof Buffer;
 
         if (value && !isBuffer) {
           let stats = null;
 
           try {
-            stats = fs.lstatSync(value).isFile();
+            stats = fs.lstatSync(fs.realpathSync(value)).isFile();
           } catch (error) {
             // ignore error
           }
 
-          if (stats) {
-            // It is file
-            options.https[property] = fs.readFileSync(path.resolve(value));
-          } else {
-            options.https[property] = value;
-          }
+          // It is file
+          this.options.https[property] = stats
+            ? fs.readFileSync(path.resolve(value))
+            : value;
         }
       }
 
       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');
-
-        let certExists = fs.existsSync(certPath);
-
-        if (certExists) {
-          const certTtl = 1000 * 60 * 60 * 24;
-          const certStat = fs.statSync(certPath);
-
-          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.'
-            );
-
-            del.sync([certPath], { force: true });
-
-            certExists = false;
-          }
-        }
-
-        if (!certExists) {
-          this.log.info('Generating SSL Certificate');
-
-          const attrs = [{ name: 'commonName', value: 'localhost' }];
-
-          const pems = createCertificate(attrs);
-
-          fs.writeFileSync(certPath, pems.private + pems.cert, {
-            encoding: 'utf8',
-          });
-        }
-
-        fakeCert = fs.readFileSync(certPath);
+      if (!this.options.https.key || !this.options.https.cert) {
+        fakeCert = getCertificate(this.log);
       }
 
-      options.https.key = options.https.key || fakeCert;
-      options.https.cert = options.https.cert || fakeCert;
-
-      // Only prevent HTTP/2 if http2 is explicitly set to false
-      const isHttp2 = options.http2 !== false;
+      this.options.https.key = this.options.https.key || fakeCert;
+      this.options.https.cert = this.options.https.cert || fakeCert;
 
       // note that options.spdy never existed. The user was able
       // to set options.https.spdy before, though it was not in the
       // docs. Keep options.https.spdy if the user sets it for
-      // backwards compatability, but log a deprecation warning.
-      if (options.https.spdy) {
-        // for backwards compatability: if options.https.spdy was passed in before,
+      // backwards compatibility, but log a deprecation warning.
+      if (this.options.https.spdy) {
+        // for backwards compatibility: if options.https.spdy was passed in before,
         // it was not altered in any way
         this.log.warn(
           'Providing custom spdy server options is deprecated and will be removed in the next major version.'
         );
       } else {
         // if the normal https server gets this option, it will not affect it.
-        options.https.spdy = {
+        this.options.https.spdy = {
           protocols: ['h2', 'http/1.1'],
         };
       }
+    }
+  }
+
+  createServer() {
+    if (this.options.https) {
+      // Only prevent HTTP/2 if http2 is explicitly set to false
+      const isHttp2 = this.options.http2 !== false;
 
       // `spdy` is effectively unmaintained, and as a consequence of an
       // implementation that extensively relies on Node’s non-public APIs, broken
@@ -692,33 +631,150 @@ class Server {
       // - https://github.com/webpack/webpack-dev-server/issues/1449
       // - https://github.com/expressjs/express/issues/3388
       if (semver.gte(process.version, '10.0.0') || !isHttp2) {
-        if (options.http2) {
+        if (this.options.http2) {
           // the user explicitly requested http2 but is not getting it because
           // of the node version.
           this.log.warn(
             'HTTP/2 is currently unsupported for Node 10.0.0 and above, but will be supported once Express supports it'
           );
         }
-        this.listeningApp = https.createServer(options.https, app);
+        this.listeningApp = https.createServer(this.options.https, this.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 */
+        // eslint-disable-next-line global-require
+        this.listeningApp = require('spdy').createServer(
+          this.options.https,
+          this.app
+        );
       }
     } else {
-      this.listeningApp = http.createServer(app);
+      this.listeningApp = http.createServer(this.app);
     }
+  }
 
-    killable(this.listeningApp);
+  createSocketServer() {
+    this.socketServer = new SockJSServer(this);
 
-    // 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);
+    this.socketServer.onConnection((connection) => {
+      if (!connection) {
+        return;
+      }
+
+      if (
+        !this.checkHost(connection.headers) ||
+        !this.checkOrigin(connection.headers)
+      ) {
+        this.sockWrite([connection], 'error', 'Invalid Host/Origin header');
+
+        connection.close();
+
+        return;
+      }
+
+      this.sockets.push(connection);
+
+      connection.on('close', () => {
+        const idx = this.sockets.indexOf(connection);
+
+        if (idx >= 0) {
+          this.sockets.splice(idx, 1);
+        }
+      });
+
+      if (this.hot) {
+        this.sockWrite([connection], 'hot');
+      }
+
+      if (this.options.liveReload !== false) {
+        this.sockWrite([connection], 'liveReload', this.options.liveReload);
+      }
+
+      if (this.progress) {
+        this.sockWrite([connection], 'progress', this.progress);
+      }
+
+      if (this.clientOverlay) {
+        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);
+    });
+  }
+
+  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) {
+    this.hostname = hostname;
+
+    return this.listeningApp.listen(port, hostname, (err) => {
+      this.createSocketServer();
+
+      if (this.options.bonjour) {
+        runBonjour(this.options);
+      }
+
+      this.showStatus();
+
+      if (fn) {
+        fn.call(this.listeningApp, err);
+      }
+
+      if (typeof this.options.onListening === 'function') {
+        this.options.onListening(this);
+      }
+    });
+  }
+
+  close(cb) {
+    this.sockets.forEach((socket) => {
+      this.socketServer.close(socket);
+    });
+
+    this.sockets = [];
+
+    this.contentBaseWatchers.forEach((watcher) => {
+      watcher.close();
+    });
+
+    this.contentBaseWatchers = [];
+
+    this.listeningApp.kill(() => {
+      this.middleware.close(cb);
+    });
+  }
+
+  static get DEFAULT_STATS() {
+    return {
+      all: false,
+      hash: true,
+      assets: true,
+      warnings: true,
+      errors: true,
+      errorDetails: false,
+    };
   }
 
   getStats(statsObj) {
@@ -740,7 +796,6 @@ class Server {
     if (this.headers) {
       // eslint-disable-next-line
       for (const name in this.headers) {
-        // eslint-disable-line
         res.setHeader(name, this.headers[name]);
       }
     }
@@ -790,7 +845,7 @@ class Server {
     if (ip.isV4Format(hostname) || ip.isV6Format(hostname)) {
       return true;
     }
-    // always allow localhost host, for convience
+    // always allow localhost host, for convenience
     if (hostname === 'localhost') {
       return true;
     }
@@ -818,7 +873,7 @@ class Server {
       }
     }
 
-    // allow hostname of listening adress
+    // allow hostname of listening address
     if (hostname === this.hostname) {
       return true;
     }
@@ -826,7 +881,6 @@ class Server {
     // also allow public hostname if provided
     if (typeof this.publicHost === 'string') {
       const idxPublic = this.publicHost.indexOf(':');
-
       const publicHostname =
         idxPublic >= 0 ? this.publicHost.substr(0, idxPublic) : this.publicHost;
 
@@ -839,105 +893,10 @@ class Server {
     return false;
   }
 
-  // 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);
-          }
-        },
-      });
-
-      socket.on('connection', (connection) => {
-        if (!connection) {
-          return;
-        }
-
-        if (
-          !this.checkHost(connection.headers) ||
-          !this.checkOrigin(connection.headers)
-        ) {
-          this.sockWrite([connection], 'error', 'Invalid Host/Origin header');
-
-          connection.close();
-
-          return;
-        }
-
-        this.sockets.push(connection);
-
-        connection.on('close', () => {
-          const idx = this.sockets.indexOf(connection);
-
-          if (idx >= 0) {
-            this.sockets.splice(idx, 1);
-          }
-        });
-
-        if (this.hot) {
-          this.sockWrite([connection], 'hot');
-        }
-
-        if (this.progress) {
-          this.sockWrite([connection], 'progress', this.progress);
-        }
-
-        if (this.clientOverlay) {
-          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,
-      });
-
-      if (fn) {
-        fn.call(this.listeningApp, err);
-      }
-    });
-  }
-
-  close(cb) {
-    this.sockets.forEach((socket) => {
-      socket.close();
-    });
-
-    this.sockets = [];
-
-    this.contentBaseWatchers.forEach((watcher) => {
-      watcher.close();
-    });
-
-    this.contentBaseWatchers = [];
-
-    this.listeningApp.kill(() => {
-      this.middleware.close(cb);
-    });
-  }
-
   // 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 }));
     });
   }
 
@@ -999,7 +958,7 @@ class Server {
         ? this.watchOptions.poll
         : undefined;
 
-    const options = {
+    const watchOptions = {
       ignoreInitial: true,
       persistent: true,
       followSymlinks: false,
@@ -1011,18 +970,19 @@ class Server {
       interval,
     };
 
-    const watcher = chokidar.watch(watchPath, options);
-
-    watcher.on('change', () => {
-      this.sockWrite(this.sockets, 'content-changed');
-    });
-
+    const watcher = chokidar.watch(watchPath, watchOptions);
+    // disabling refreshing on changing the content
+    if (this.options.liveReload !== false) {
+      watcher.on('change', () => {
+        this.sockWrite(this.sockets, 'content-changed');
+      });
+    }
     this.contentBaseWatchers.push(watcher);
   }
 
-  invalidate() {
+  invalidate(callback) {
     if (this.middleware) {
-      this.middleware.invalidate();
+      this.middleware.invalidate(callback);
     }
   }
 }