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[]}
@@ -1587,6 +1592,9 @@ class Server {
    * @returns {void}
    */
   setupProgressPlugin() {
+    // In the case where there is no compiler and it’s not being used as a plugin.
+    if (this.compiler === undefined) return;
+
     const { ProgressPlugin } =
       /** @type {MultiCompiler} */
       (this.compiler).compilers
@@ -1631,6 +1639,7 @@ class Server {
    * @returns {Promise<void>}
    */
   async initialize() {
+    if (this.compiler === undefined) return;
     this.setupHooks();
 
     await this.setupApp();
@@ -1706,7 +1715,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();
@@ -1781,11 +1790,14 @@ class Server {
    * @returns {void}
    */
   setupHooks() {
+    if (this.compiler === undefined) return;
+
     this.compiler.hooks.invalid.tap("webpack-dev-server", () => {
       if (this.webSocketServer) {
         this.sendMessage(this.webSocketServer.clients, "invalid");
       }
     });
+
     this.compiler.hooks.done.tap(
       "webpack-dev-server",
       /**
@@ -1840,6 +1852,7 @@ class Server {
    * @returns {void}
    */
   setupMiddlewares() {
+    if (this.compiler === undefined) return;
     /**
      * @type {Array<Middleware>}
      */
@@ -2331,6 +2344,7 @@ 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,
         );
@@ -3399,6 +3413,23 @@ class Server {
       .then(() => callback(), callback)
       .catch(callback);
   }
+
+  /**
+   * @param {Compiler} compiler compiler
+   * @returns {void}
+   */
+  apply(compiler) {
+    this.compiler = compiler;
+    this.logger = this.compiler.getInfrastructureLogger(pluginName);
+
+    this.compiler.hooks.watchRun.tapPromise(pluginName, async () => {
+      await this.start();
+    });
+
+    this.compiler.hooks.watchClose.tap(pluginName, async () => {
+      await this.stop();
+    });
+  }
 }
 
 module.exports = Server;

test/e2e/api.test.js

@@ -4,11 +4,45 @@ const path = require("node:path");
 const webpack = require("webpack");
 const Server = require("../../lib/Server");
 const config = require("../fixtures/client-config/webpack.config");
+const compile = require("../helpers/compile");
 const runBrowser = require("../helpers/run-browser");
 const sessionSubscribe = require("../helpers/session-subscribe");
 const port = require("../ports-map").api;
 
 describe("API", () => {
+  it("should work with plugin API", async () => {
+    const compiler = webpack(config);
+    const server = new Server({ port });
+
+    server.apply(compiler);
+    await compile(compiler);
+
+    const { page, browser } = await runBrowser();
+
+    const pageErrors = [];
+    const consoleMessages = [];
+
+    page
+      .on("console", (message) => {
+        consoleMessages.push(message);
+      })
+      .on("pageerror", (error) => {
+        pageErrors.push(error);
+      });
+
+    await page.goto(`http://127.0.0.1:${port}/`, {
+      waitUntil: "networkidle0",
+    });
+
+    expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+      "console messages",
+    );
+    expect(pageErrors).toMatchSnapshot("page errors");
+
+    await browser.close();
+    compiler.watching.close();
+  });
+
   describe("WEBPACK_SERVE environment variable", () => {
     const OLD_ENV = process.env;
     let server;

test/helpers/compile.js

@@ -0,0 +1,12 @@
+"use strict";
+
+module.exports = (compiler) =>
+  new Promise((resolve, reject) => {
+    compiler.run((error, stats) => {
+      if (error) {
+        return reject(error);
+      }
+
+      return resolve(stats);
+    });
+  });