feat: plugin support

lib/Server.js

@@ -311,6 +311,8 @@ const DEFAULT_ALLOWED_PROTOCOLS = /^(file|.+-extension):/i;
  * @property {typeof useFn} use
  */
 
+const pluginName = "webpack-dev-server";
+
 /**
  * @template {BasicApplication} [A=ExpressApplication]
  * @template {BasicServer} [S=HTTPServer]
@@ -326,11 +328,14 @@ class Server {
       baseDataPath: "options",
     });
 
-    this.compiler = compiler;
-    /**
-     * @type {ReturnType<Compiler["getInfrastructureLogger"]>}
-     */
-    this.logger = this.compiler.getInfrastructureLogger("webpack-dev-server");
+    if (compiler) {
+      this.compiler = compiler;
+
+      /**
+       * @type {ReturnType<Compiler["getInfrastructureLogger"]>}
+       */
+      this.logger = this.compiler.getInfrastructureLogger(pluginName);
+    }
     this.options = options;
     /**
      * @type {FSWatcher[]}
@@ -357,6 +362,11 @@ class Server {
      */
 
     this.currentHash = undefined;
+    /**
+     * @private
+     * @type {boolean}
+     */
+    this.isPlugin = false;
   }
 
   static get schema() {
@@ -1621,7 +1631,7 @@ class Server {
           this.server.emit("progress-update", { percent, msg, pluginName });
         }
       },
-    ).apply(this.compiler);
+    ).apply(/** @type {Compiler | MultiCompiler} */ (this.compiler));
   }
 
   /**
@@ -1704,7 +1714,7 @@ class Server {
           needForceShutdown = true;
 
           this.stopCallback(() => {
-            if (typeof this.compiler.close === "function") {
+            if (typeof this.compiler?.close === "function") {
               this.compiler.close(() => {
                 // eslint-disable-next-line n/no-process-exit
                 process.exit();
@@ -1779,12 +1789,15 @@ class Server {
    * @returns {void}
    */
   setupHooks() {
-    this.compiler.hooks.invalid.tap("webpack-dev-server", () => {
+    const compiler = /** @type {Compiler | MultiCompiler} */ (this.compiler);
+
+    compiler.hooks.invalid.tap("webpack-dev-server", () => {
       if (this.webSocketServer) {
         this.sendMessage(this.webSocketServer.clients, "invalid");
       }
     });
-    this.compiler.hooks.done.tap(
+
+    compiler.hooks.done.tap(
       "webpack-dev-server",
       /**
        * @param {Stats | MultiStats} stats stats
@@ -2329,8 +2342,10 @@ class Server {
         // middleware for serving webpack bundle
         /** @type {import("webpack-dev-middleware").API<Request, Response>} */
         this.middleware = webpackDevMiddleware(
+          // @ts-expect-error
           this.compiler,
           this.options.devMiddleware,
+          this.isPlugin,
         );
       }
 
@@ -3237,6 +3252,15 @@ class Server {
    * @returns {Promise<void>}
    */
   async start() {
+    await this.setup();
+    await this.listen();
+  }
+
+  /**
+   * @private
+   * @returns {Promise<void>}
+   */
+  async setup() {
     await this.normalizeOptions();
 
     if (this.options.ipc) {
@@ -3288,7 +3312,13 @@ class Server {
     }
 
     await this.initialize();
+  }
 
+  /**
+   * @private
+   * @returns {Promise<void>}
+   */
+  async listen() {
     const listenOptions = this.options.ipc
       ? { path: this.options.ipc }
       : { host: this.options.host, port: this.options.port };
@@ -3429,6 +3459,42 @@ class Server {
       .then(() => callback(), callback)
       .catch(callback);
   }
+
+  /**
+   * @param {Compiler} compiler compiler
+   * @returns {void}
+   */
+  apply(compiler) {
+    this.compiler = compiler;
+    this.isPlugin = true;
+    this.logger = this.compiler.getInfrastructureLogger(pluginName);
+
+    /** @type {Promise<void> | undefined} */
+    let setupPromise;
+    let listening = false;
+
+    const ensureSetup = () => {
+      if (!setupPromise) {
+        setupPromise = this.setup();
+      }
+      return setupPromise;
+    };
+
+    this.compiler.hooks.beforeCompile.tapPromise(pluginName, ensureSetup);
+
+    this.compiler.hooks.done.tapPromise(pluginName, async () => {
+      if (listening) return;
+      listening = true;
+      await ensureSetup();
+      await this.listen();
+    });
+
+    this.compiler.hooks.shutdown.tapPromise(pluginName, async () => {
+      setupPromise = undefined;
+      listening = false;
+      await this.stop();
+    });
+  }
 }
 
 module.exports = Server;

test/e2e/__snapshots__/api.test.js.snap.webpack5

@@ -165,3 +165,33 @@ exports[`API latest async API should work with callback API: console messages 1`
 `;
 
 exports[`API latest async API should work with callback API: page errors 1`] = `[]`;
+
+exports[`API plugin in webpack config should work when added to webpack config plugins array: console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`API plugin in webpack config should work when added to webpack config plugins array: page errors 1`] = `[]`;
+
+exports[`API plugin in webpack config should work with output.clean: true: console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`API plugin in webpack config should work with output.clean: true: page errors 1`] = `[]`;
+
+exports[`API should work with plugin API: console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`API should work with plugin API: page errors 1`] = `[]`;

test/e2e/__snapshots__/logging.test.js.snap.webpack5

@@ -1,5 +1,55 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`logging plugin mode should work and do not log messages about hot and live reloading is enabled 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading disabled, Progress disabled, Overlay enabled.",
+  "Hey.",
+]
+`;
+
+exports[`logging plugin mode should work and log errors by default 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Errors while compiling. Reload prevented.",
+  "[webpack-dev-server] ERROR
+Error from compilation",
+]
+`;
+
+exports[`logging plugin mode should work and log message about live reloading is enabled 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "Hey.",
+]
+`;
+
+exports[`logging plugin mode should work and log messages about hot and live reloading is enabled 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+]
+`;
+
+exports[`logging plugin mode should work and log warnings by default 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Hey.",
+  "[webpack-dev-server] Warnings while compiling.",
+  "[webpack-dev-server] WARNING
+Warning from compilation",
+]
+`;
+
+exports[`logging plugin mode should work when the "client.logging" is "none" 1`] = `
+[
+  "Hey.",
+]
+`;
+
 exports[`logging should work and do not log messages about hot and live reloading is enabled (ws) 1`] = `
 [
   "[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading disabled, Progress disabled, Overlay enabled.",