feat: support universal platform as a web target (#5690)

* feat: support universal platform as a web target and update related tests

* feat: enhance isWebTarget logic to support universal target and update tests

* feat: update target determination logic to treat universal targets as web targets

* test: add support for universal target in tests and HTML generation

* feat: implement EventTarget-based emitter for universal targets in webpack

* test: enhance ESM/universal target handling in snapshots for deterministic output

* fix: update emitter resolution to use fileURLToPath for compatibility with newer webpack

* fix: update emitter resolution to use cjsRequire for compatibility with older webpack versions

Author: bjohansebas

.changeset/use-compiler-platform-target.md

@@ -2,4 +2,4 @@
 "webpack-dev-server": minor
 ---
 
-Use `compiler.platform` to determine the target environment instead of inspecting the resolved `target` string.
+Use `compiler.platform` to determine the target environment instead of inspecting the resolved `target` string. Universal targets (`"universal"` or `["web", "node"]`, where `compiler.platform.universal` is `true` since webpack `5.108.0`) are treated as web targets so the client runtime is injected.

lib/Server.js

@@ -574,10 +574,20 @@ class Server {
   /**
    * @private
    * @param {Compiler} compiler compiler
-   * @returns {boolean} true when target is `web`, otherwise false
+   * @returns {boolean} true when target is `web` or `universal`, otherwise false
    */
   static isWebTarget(compiler) {
-    return compiler.platform.web || false;
+    const { platform } = compiler;
+
+    // A `web` or universal target (`web` and `node` both `null`) injects the
+    // client. `target: false` is `null` everywhere, so it is excluded.
+    return Boolean(
+      platform.web ||
+        platform?.universal ||
+        (compiler.options.target !== false &&
+          platform.web === null &&
+          platform.node === null),
+    );
   }
 
   /**
@@ -1683,6 +1693,38 @@ class Server {
           __webpack_dev_server_client__: this.getClientTransport(),
         }).apply(compiler);
 
+        // For universal targets `webpack/hot/emitter` uses Node's `events`,
+        // which breaks in the browser. Swap it for webpack's `EventTarget`
+        // emitter when available.
+        if (
+          compiler.options.output.module &&
+          compiler.platform.web === null &&
+          compiler.platform.node === null
+        ) {
+          let emitter;
+
+          try {
+            emitter = cjsRequire.resolve("webpack/hot/emitter-event-target.js");
+          } catch {
+            // older webpack versions do not ship the `EventTarget` emitter
+          }
+
+          if (emitter) {
+            new webpack.NormalModuleReplacementPlugin(
+              /emitter(\.js)?$/,
+              (result) => {
+                if (
+                  /webpack[/\\]hot|webpack-dev-server[/\\]client/.test(
+                    result.context,
+                  )
+                ) {
+                  result.request = emitter;
+                }
+              },
+            ).apply(compiler);
+          }
+        }
+
         if (this.options.hot) {
           const HMRPluginExists = compiler.options.plugins.find(
             (plugin) =>