webpack · alexander-akait · Jul 2, 2021 · Jun 29, 2021 · Jun 29, 2021 · Jun 29, 2021
@@ -10,11 +10,7 @@ const killable = require('killable');
 const express = require('express');
 const { validate } = require('schema-utils');
 const normalizeOptions = require('./utils/normalizeOptions');
-const colors = require('./utils/colors');
-const routes = require('./utils/routes');
-const getSocketServerImplementation = require('./utils/getSocketServerImplementation');
 const getCompilerConfigArray = require('./utils/getCompilerConfigArray');
-const getStatsOption = require('./utils/getStatsOption');
 const schema = require('./options.json');
 
 if (!process.env.WEBPACK_SERVE) {
@@ -49,10 +45,6 @@ class Server {
   initialize() {
     this.applyDevServerPlugin();
 
-    this.webSocketServerImplementation = getSocketServerImplementation(
-      this.options
-    );
-
     if (this.options.client.progress) {
       this.setupProgressPlugin();
     }
@@ -61,10 +53,8 @@ class Server {
     this.setupApp();
     this.setupHostHeaderCheck();
     this.setupDevMiddleware();
-
     // Should be after `webpack-dev-middleware`, otherwise other middlewares might rewrite response
-    routes(this);
-
+    this.setupBuiltInRoutes();
     this.setupWatchFiles();
     this.setupFeatures();
     this.createServer();
@@ -265,6 +255,71 @@ class Server {
     );
   }
 
+  setupBuiltInRoutes() {
+    const { app, middleware } = this;
+
+    app.get('/__webpack_dev_server__/sockjs.bundle.js', (req, res) => {
+      res.setHeader('Content-Type', 'application/javascript');
+
+      const { createReadStream } = require('graceful-fs');
+      const clientPath = path.join(__dirname, '..', 'client');
+
+      createReadStream(
+        path.join(clientPath, 'modules/sockjs-client/index.js')
+      ).pipe(res);
+    });
+
+    app.get('/webpack-dev-server/invalidate', (_req, res) => {
+      this.invalidate();
+
+      res.end();
+    });
+
+    app.get('/webpack-dev-server', (req, res) => {
+      middleware.waitUntilValid((stats) => {
+        res.setHeader('Content-Type', 'text/html');
+        res.write(
+          '<!DOCTYPE html><html><head><meta charset="utf-8"/></head><body>'
+        );
+
+        const statsForPrint =
+          typeof stats.stats !== 'undefined'
+            ? stats.toJson().children
+            : [stats.toJson()];
+
+        res.write(`<h1>Assets Report:</h1>`);
+
+        statsForPrint.forEach((item, index) => {
+          res.write('<div>');
+
+          const name =
+            item.name || (stats.stats ? `unnamed[${index}]` : 'unnamed');
+
+          res.write(`<h2>Compilation: ${name}</h2>`);
+          res.write('<ul>');
+
+          const publicPath = item.publicPath === 'auto' ? '' : item.publicPath;
+
+          for (const asset of item.assets) {
+            const assetName = asset.name;
+            const assetURL = `${publicPath}${assetName}`;
+
+            res.write(
+              `<li>
+              <strong><a href="${assetURL}" target="_blank">${assetName}</a></strong>
+            </li>`
+            );
+          }
+
+          res.write('</ul>');
+          res.write('</div>');
+        });
+
+        res.end('</body></html>');
+      });
+    });
+  }
+
   setupCompressFeature() {
     const compress = require('compression');
 
@@ -577,7 +632,47 @@ class Server {
     });
   }
 
+  getWebSocketServerImplementation() {
+    let implementation;
+    let implementationFound = true;
+
+    switch (typeof this.options.webSocketServer.type) {
+      case 'string':
+        // Could be 'sockjs', in the future 'ws', or a path that should be required
+        if (this.options.webSocketServer.type === 'sockjs') {
+          implementation = require('./servers/SockJSServer');
+        } else if (this.options.webSocketServer.type === 'ws') {
+          implementation = require('./servers/WebsocketServer');
+        } else {
+          try {
+            // eslint-disable-next-line import/no-dynamic-require
+            implementation = require(this.options.webSocketServer.type);
+          } catch (error) {
+            implementationFound = false;
+          }
+        }
+        break;
+      case 'function':
+        implementation = this.options.webSocketServer.type;
+        break;
+      default:
+        implementationFound = false;
+    }
+
+    if (!implementationFound) {
+      throw new Error(
+        "webSocketServer (webSocketServer.type) must be a string denoting a default implementation (e.g. 'ws', 'sockjs'), a full path to " +
+          'a JS file which exports a class extending BaseServer (webpack-dev-server/lib/servers/BaseServer.js) ' +
+          'via require.resolve(...), or the class itself which extends BaseServer'
+      );
+    }
+
+    return implementation;
+  }
+
   createWebSocketServer() {
+    this.webSocketServerImplementation =
+      this.getWebSocketServerImplementation();
     // eslint-disable-next-line new-cap
     this.webSocketServer = new this.webSocketServerImplementation(this);
 
@@ -748,7 +843,7 @@ class Server {
 
   logStatus() {
     const getColorsOption = (configArray) => {
-      const statsOption = getStatsOption(configArray);
+      const statsOption = this.getStatsOption(configArray);
 
       let colorsEnabled = false;
 
@@ -759,6 +854,25 @@ class Server {
       return colorsEnabled;
     };
 
+    // TODO change it on https://www.npmjs.com/package/colorette
+    const colors = {
+      info(useColor, msg) {
+        if (useColor) {
+          // Make text blue and bold, so it *pops*
+          return `\u001b[1m\u001b[34m${msg}\u001b[39m\u001b[22m`;
+        }
+
+        return msg;
+      },
+      error(useColor, msg) {
+        if (useColor) {
+          // Make text red and bold, so it *pops*
+          return `\u001b[1m\u001b[31m${msg}\u001b[39m\u001b[22m`;
+        }
+
+        return msg;
+      },
+    };
     const useColor = getColorsOption(getCompilerConfigArray(this.compiler));
 
     if (this.options.ipc) {
@@ -1030,11 +1144,28 @@ class Server {
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  getStatsOption(configArray) {
+    const isEmptyObject = (val) =>
+      typeof val === 'object' && Object.keys(val).length === 0;
+
+    // in webpack@4 stats will not be defined if not provided,
+    // but in webpack@5 it will be an empty object
+    const statsConfig = configArray.find(
+      (configuration) =>
+        typeof configuration === 'object' &&
+        configuration.stats &&
+        !isEmptyObject(configuration.stats)
+    );
+
+    return statsConfig ? statsConfig.stats : {};
+  }
+
   getStats(statsObj) {
     const stats = Server.DEFAULT_STATS;
 
-    const configArr = getCompilerConfigArray(this.compiler);
-    const statsOption = getStatsOption(configArr);
+    const configArray = getCompilerConfigArray(this.compiler);
+    const statsOption = this.getStatsOption(configArray);
 
     if (typeof statsOption === 'object' && statsOption.warningsFilter) {
       stats.warningsFilter = statsOption.warningsFilter;