fix: fix live reload for child compiler scenario

lib/Server.js

@@ -42,6 +42,7 @@ class Server {
   static get DEFAULT_STATS() {
     return {
       all: false,
+      children: true,
       hash: true,
       warnings: true,
       errors: true,
@@ -1179,7 +1180,17 @@ class Server {
       stats.warningsFilter = compilerOptions.stats.warningsFilter;
     }
 
-    return statsObj.toJson(stats);
+    const reduceFn = (statsJson, result = {}) => {
+      result.hash = `${result.hash || ""}|${statsJson.hash}`;
+      result.errors = [...(result.errors || []), ...statsJson.errors];
+      result.warnings = [...(result.warnings || []), ...statsJson.warnings];
+      (statsJson.children || []).forEach((child) => {
+        reduceFn(child, result);
+      });
+      return result;
+    };
+
+    return reduceFn(statsObj.toJson(stats));
   }
 
   setupHooks() {

test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack5

@@ -45,6 +45,11 @@ Array [
   "[HMR] Waiting for update signal from WDS...",
   "[webpack-dev-server] Hot Module Replacement enabled.",
   "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Hot Module Replacement enabled.",
+  "[webpack-dev-server] Live Reloading enabled.",
 ]
 `;
 
@@ -300,6 +305,9 @@ Array [
   "[webpack-dev-server] App updated. Recompiling...",
   "[webpack-dev-server] App updated. Reloading...",
   "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[webpack-dev-server] Live Reloading enabled.",
 ]
 `;
 
@@ -311,6 +319,9 @@ Array [
   "[webpack-dev-server] App updated. Recompiling...",
   "[webpack-dev-server] App updated. Reloading...",
   "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[webpack-dev-server] Live Reloading enabled.",
 ]
 `;
 
@@ -322,6 +333,9 @@ Array [
   "[webpack-dev-server] App updated. Recompiling...",
   "[webpack-dev-server] App updated. Reloading...",
   "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[webpack-dev-server] Live Reloading enabled.",
 ]
 `;
 
@@ -353,6 +367,10 @@ Array [
   "[webpack-dev-server] App updated. Reloading...",
   "[HMR] Waiting for update signal from WDS...",
   "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[HMR] Waiting for update signal from WDS...",
+  "[webpack-dev-server] Live Reloading enabled.",
 ]
 `;
 
@@ -389,6 +407,9 @@ Array [
   "[webpack-dev-server] App updated. Recompiling...",
   "[webpack-dev-server] App updated. Reloading...",
   "[webpack-dev-server] Live Reloading enabled.",
+  "[webpack-dev-server] App updated. Recompiling...",
+  "[webpack-dev-server] App updated. Reloading...",
+  "[webpack-dev-server] Live Reloading enabled.",
 ]
 `;
 

test/e2e/hot-and-live-reload.test.js

@@ -15,11 +15,18 @@ const reloadConfig = require("../fixtures/reload-config/webpack.config");
 const runBrowser = require("../helpers/run-browser");
 const port = require("../ports-map")["hot-and-live-reload"];
 
+const isWebpack5 = webpack.version.startsWith("5");
+
 const cssFilePath = path.resolve(
   __dirname,
   "../fixtures/reload-config/main.css"
 );
 
+const jsFilePath = path.resolve(
+  __dirname,
+  "../fixtures/reload-config/child.js"
+);
+
 const INVALID_MESSAGE = "[webpack-dev-server] App updated. Recompiling...";
 
 describe("hot and live reload", () => {
@@ -314,6 +321,8 @@ describe("hot and live reload", () => {
         "body { background-color: rgb(0, 0, 255); }"
       );
 
+      fs.writeFileSync(jsFilePath, "");
+
       const webpackOptions = { ...reloadConfig, ...mode.webpackOptions };
       const compiler = webpack(webpackOptions);
       const testDevServerOptions = mode.options || {};
@@ -470,11 +479,6 @@ describe("hot and live reload", () => {
 
       expect(backgroundColorBefore).toEqual("rgb(0, 0, 255)");
 
-      fs.writeFileSync(
-        cssFilePath,
-        "body { background-color: rgb(255, 0, 0); }"
-      );
-
       let waitHot =
         typeof testDevServerOptions.hot !== "undefined"
           ? testDevServerOptions.hot
@@ -523,29 +527,38 @@ describe("hot and live reload", () => {
         waitLiveReload = false;
       }
 
-      if (waitHot) {
-        await page.waitForFunction(
-          () =>
-            getComputedStyle(document.body)["background-color"] ===
-            "rgb(255, 0, 0)"
-        );
-
-        expect(doneHotUpdate).toBe(true);
-      } else if (waitLiveReload) {
-        await page.waitForNavigation({
-          waitUntil: "networkidle0",
-        });
-      } else if (webSocketServerLaunched) {
-        await new Promise((resolve) => {
-          const interval = setInterval(() => {
-            if (consoleMessages.includes(INVALID_MESSAGE)) {
-              clearInterval(interval);
+      const waitFunc = async () => {
+        if (waitHot) {
+          await page.waitForFunction(
+            () =>
+              getComputedStyle(document.body)["background-color"] ===
+              "rgb(255, 0, 0)"
+          );
 
-              resolve();
-            }
-          }, 100);
-        });
-      }
+          expect(doneHotUpdate).toBe(true);
+        } else if (waitLiveReload) {
+          await page.waitForNavigation({
+            waitUntil: "networkidle0",
+          });
+        } else if (webSocketServerLaunched) {
+          await new Promise((resolve) => {
+            const interval = setInterval(() => {
+              if (consoleMessages.includes(INVALID_MESSAGE)) {
+                clearInterval(interval);
+
+                resolve();
+              }
+            }, 100);
+          });
+        }
+      };
+
+      fs.writeFileSync(
+        cssFilePath,
+        "body { background-color: rgb(255, 0, 0); }"
+      );
+
+      await waitFunc();
 
       const backgroundColorAfter = await page.evaluate(() => {
         const body = document.body;
@@ -559,10 +572,16 @@ describe("hot and live reload", () => {
         expect(backgroundColorAfter).toEqual("rgb(255, 0, 0)");
       }
 
+      if (isWebpack5) {
+        fs.writeFileSync(jsFilePath, "console.log('hello from child.js');");
+        await waitFunc();
+      }
+
       expect(consoleMessages).toMatchSnapshot("console messages");
       expect(pageErrors).toMatchSnapshot("page errors");
 
       fs.unlinkSync(cssFilePath);
+      fs.unlinkSync(jsFilePath);
 
       await browser.close();
       await server.stop();

test/fixtures/reload-config/webpack.config.js

@@ -2,8 +2,39 @@
 
 const webpack = require("webpack");
 
+const { EntryOptionPlugin, Compilation } = webpack;
+
 const isWebpack5 = webpack.version.startsWith("5");
 
+class TestChildCompilerPlugin {
+  constructor(options) {
+    this.name = "TestChildCompilerPlugin";
+    this.options = webpack.config.getNormalizedWebpackOptions(options);
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(this.name, (compilation) => {
+      compilation.hooks.processAssets.tapAsync(
+        {
+          name: this.name,
+          stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
+        },
+        (assets, callback) => {
+          const child = compilation.createChildCompiler(this.name);
+          EntryOptionPlugin.applyEntryOption(
+            child,
+            compilation.compiler.context,
+            this.options.entry
+          );
+          child.runAsChild(() => {
+            callback();
+          });
+        }
+      );
+    });
+  }
+}
+
 module.exports = {
   mode: "development",
   context: __dirname,
@@ -30,4 +61,14 @@ module.exports = {
     : {
         level: "info",
       },
+
+  plugins: isWebpack5
+    ? [
+        new TestChildCompilerPlugin({
+          entry: {
+            child: "./child",
+          },
+        }),
+      ]
+    : [],
 };