feat: implement dev server as plugin

lib/Server.js

@@ -21,26 +21,36 @@ if (!process.env.WEBPACK_SERVE) {
 }
 
 class Server {
+  // TODO: change this after legacy dev server usage is deprecated and serve package is updated
   constructor(options = {}, compiler) {
+    this.name = 'webpack-dev-server';
+
     // TODO: remove this after plugin support is published
     if (options.hooks) {
       [options, compiler] = [compiler, options];
     }
 
     validate(schema, options, 'webpack Dev Server');
 
-    this.compiler = compiler;
     this.options = options;
-    this.logger = this.compiler.getInfrastructureLogger('webpack-dev-server');
     this.sockets = [];
     this.staticWatchers = [];
     // Keep track of websocket proxies for external websocket upgrade.
     this.websocketProxies = [];
     // this value of ws can be overwritten for tests
     this.wsHeartbeatInterval = 30000;
 
+    if (compiler) {
+      this.apply(compiler);
+    }
+  }
+
+  apply(compiler) {
+    this.compiler = compiler;
+    this.logger = this.compiler.getInfrastructureLogger(this.name);
+
     normalizeOptions(this.compiler, this.options);
-    this.applyDevServerPlugin();
+    this.configureChildCompilers();
 
     this.SocketServerImplementation = getSocketServerImplementation(
       this.options
@@ -74,14 +84,218 @@ class Server {
     }, this);
   }
 
-  applyDevServerPlugin() {
-    const DevServerPlugin = require('./utils/DevServerPlugin');
+  configureChildCompilers() {
+    const {
+      EntryPlugin,
+      ProvidePlugin,
+      HotModuleReplacementPlugin,
+    } = require('webpack');
+    const createDomain = require('./utils/createDomain');
+    const getSocketClientPath = require('./utils/getSocketClientPath');
 
     const compilers = this.compiler.compilers || [this.compiler];
+    const options = this.options;
 
-    // eslint-disable-next-line no-shadow
     compilers.forEach((compiler) => {
-      new DevServerPlugin(this.options).apply(compiler);
+      /** @type {string} */
+      const domain = createDomain(options);
+
+      // SockJS is not supported server mode, so `host` and `port` can't specified, let's ignore them
+      // TODO show warning about this
+      const isSockJSType = options.webSocketServer.type === 'sockjs';
+
+      /** @type {string} */
+      let hostString = '';
+
+      if (options.client && options.client.host) {
+        hostString = `&host=${options.client.host}`;
+      } else if (options.webSocketServer.options.host && !isSockJSType) {
+        hostString = `&host=${options.webSocketServer.options.host}`;
+      }
+
+      /** @type {string} */
+      let portString = '';
+
+      if (options.client && options.client.port) {
+        portString = `&port=${options.client.port}`;
+      } else if (options.webSocketServer.options.port && !isSockJSType) {
+        portString = `&port=${options.webSocketServer.options.port}`;
+      } else {
+        portString = `&port=${options.port}`;
+      }
+
+      /** @type {string} */
+      let pathString = '';
+
+      // Only add the path if it is not default
+      if (options.client && options.client.path && options.client.path) {
+        pathString = `&path=${options.client.path}`;
+      } else if (options.webSocketServer.options.path) {
+        pathString = `&path=${options.webSocketServer.options.path}`;
+      }
+
+      /** @type {string} */
+      const logging =
+        options.client && options.client.logging
+          ? `&logging=${options.client.logging}`
+          : '';
+
+      /** @type {string} */
+      const clientEntry = `${require.resolve(
+        '../client/index.js'
+      )}?${domain}${hostString}${pathString}${portString}${logging}`;
+
+      /** @type {(string[] | string)} */
+      let hotEntry;
+
+      if (options.hot === 'only') {
+        hotEntry = require.resolve('webpack/hot/only-dev-server');
+      } else if (options.hot) {
+        hotEntry = require.resolve('webpack/hot/dev-server');
+      }
+      /**
+       * prependEntry Method for webpack 4
+       * @param {Entry} originalEntry
+       * @param {Entry} additionalEntries
+       * @returns {Entry}
+       */
+      const prependEntry = (originalEntry, additionalEntries) => {
+        if (typeof originalEntry === 'function') {
+          return () =>
+            Promise.resolve(originalEntry()).then((entry) =>
+              prependEntry(entry, additionalEntries)
+            );
+        }
+
+        if (
+          typeof originalEntry === 'object' &&
+          !Array.isArray(originalEntry)
+        ) {
+          /** @type {Object<string,string>} */
+          const clone = {};
+
+          Object.keys(originalEntry).forEach((key) => {
+            // entry[key] should be a string here
+            const entryDescription = originalEntry[key];
+            clone[key] = prependEntry(entryDescription, additionalEntries);
+          });
+
+          return clone;
+        }
+
+        // in this case, entry is a string or an array.
+        // make sure that we do not add duplicates.
+        /** @type {Entry} */
+        const entriesClone = additionalEntries.slice(0);
+        [].concat(originalEntry).forEach((newEntry) => {
+          if (!entriesClone.includes(newEntry)) {
+            entriesClone.push(newEntry);
+          }
+        });
+        return entriesClone;
+      };
+
+      /**
+       *
+       * Description of the option for checkInject method
+       * @typedef {Function} checkInjectOptionsParam
+       * @param {Object} _config - compilerConfig
+       * @return {Boolean}
+       */
+
+      /**
+       *
+       * @param {Boolean | checkInjectOptionsParam} option - inject(Hot|Client) it is Boolean | fn => Boolean
+       * @param {Object} _config
+       * @param {Boolean} defaultValue
+       * @return {Boolean}
+       */
+      // eslint-disable-next-line no-shadow
+      const checkInject = (option, _config, defaultValue) => {
+        if (typeof option === 'boolean') {
+          return option;
+        }
+
+        if (typeof option === 'function') {
+          return option(_config);
+        }
+
+        return defaultValue;
+      };
+
+      const compilerOptions = compiler.options;
+
+      compilerOptions.plugins = compilerOptions.plugins || [];
+
+      /** @type {boolean} */
+      const isWebTarget = compilerOptions.externalsPresets
+        ? compilerOptions.externalsPresets.web
+        : [
+            'web',
+            'webworker',
+            'electron-renderer',
+            'node-webkit',
+            // eslint-disable-next-line no-undefined
+            undefined,
+            null,
+          ].includes(compilerOptions.target);
+
+      /** @type {Entry} */
+      const additionalEntries = checkInject(
+        options.client ? options.client.needClientEntry : null,
+        compilerOptions,
+        isWebTarget
+      )
+        ? [clientEntry]
+        : [];
+
+      if (
+        hotEntry &&
+        checkInject(
+          options.client ? options.client.hotEntry : null,
+          compilerOptions,
+          true
+        )
+      ) {
+        additionalEntries.push(hotEntry);
+      }
+
+      // use a hook to add entries if available
+      if (EntryPlugin) {
+        for (const additionalEntry of additionalEntries) {
+          new EntryPlugin(compiler.context, additionalEntry, {
+            // eslint-disable-next-line no-undefined
+            name: undefined,
+          }).apply(compiler);
+        }
+      } else {
+        compilerOptions.entry = prependEntry(
+          compilerOptions.entry || './src',
+          additionalEntries
+        );
+        compiler.hooks.entryOption.call(
+          compilerOptions.context,
+          compilerOptions.entry
+        );
+      }
+
+      const providePlugin = new ProvidePlugin({
+        __webpack_dev_server_client__: getSocketClientPath(options),
+      });
+
+      providePlugin.apply(compiler);
+
+      if (
+        hotEntry &&
+        !compilerOptions.plugins.find(
+          (p) => p.constructor === HotModuleReplacementPlugin
+        )
+      ) {
+        // apply the HMR plugin, if it didn't exist before.
+        const plugin = new HotModuleReplacementPlugin();
+
+        plugin.apply(compiler);
+      }
     });
   }
 
@@ -824,7 +1038,6 @@ class Server {
       this.staticWatchers.map((watcher) => watcher.close())
     );
     this.staticWatchers = [];
-
     this.server.kill(() => {
       // watchers must be closed before closing middleware
       prom.then(() => {