From a509c1ef938fb724704f94475e8bc6109c2d59ed Mon Sep 17 00:00:00 2001 From: wood1986 <5212215+wood1986@users.noreply.github.com> Date: Sat, 23 Oct 2021 13:06:22 -0700 Subject: [PATCH 1/3] fix: fix live reload for child compiler scenario --- lib/Server.js | 13 +++- .../hot-and-live-reload.test.js.snap.webpack5 | 21 ++++++ test/e2e/hot-and-live-reload.test.js | 70 ++++++++++++------- test/fixtures/reload-config/webpack.config.js | 44 ++++++++++++ 4 files changed, 120 insertions(+), 28 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index 4a0af3b3f1..5b93af2dae 100644 --- a/lib/Server.js +++ b/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() { diff --git a/test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack5 b/test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack5 index 387ad3d5e3..d4c6ef4ccd 100644 --- a/test/e2e/__snapshots__/hot-and-live-reload.test.js.snap.webpack5 +++ b/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.", ] `; diff --git a/test/e2e/hot-and-live-reload.test.js b/test/e2e/hot-and-live-reload.test.js index 559d874d2c..b5a7f7c2e1 100644 --- a/test/e2e/hot-and-live-reload.test.js +++ b/test/e2e/hot-and-live-reload.test.js @@ -20,6 +20,11 @@ const cssFilePath = path.resolve( "../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 +319,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 +477,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 +525,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 +570,15 @@ describe("hot and live reload", () => { expect(backgroundColorAfter).toEqual("rgb(255, 0, 0)"); } + 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(); diff --git a/test/fixtures/reload-config/webpack.config.js b/test/fixtures/reload-config/webpack.config.js index 910b38f3da..2f3a2c5461 100644 --- a/test/fixtures/reload-config/webpack.config.js +++ b/test/fixtures/reload-config/webpack.config.js @@ -2,8 +2,44 @@ const webpack = require("webpack"); +const { EntryOptionPlugin, Compilation } = webpack; +const { getNormalizedWebpackOptions } = webpack.config; + const isWebpack5 = webpack.version.startsWith("5"); +class TestChildCompilerPlugin { + constructor(options) { + this.options = getNormalizedWebpackOptions(options); + } + + apply(compiler) { + compiler.hooks.thisCompilation.tap( + "TestApplyEntryOptionPlugin", + (compilation) => { + compilation.hooks.processAssets.tapAsync( + { + name: "TestChildCompilerPlugin", + stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE, + }, + (assets, callback) => { + const child = compilation.createChildCompiler( + "TestChildCompilerPlugin" + ); + EntryOptionPlugin.applyEntryOption( + child, + compilation.compiler.context, + this.options.entry + ); + child.runAsChild(() => { + callback(); + }); + } + ); + } + ); + } +} + module.exports = { mode: "development", context: __dirname, @@ -30,4 +66,12 @@ module.exports = { : { level: "info", }, + + plugins: [ + new TestChildCompilerPlugin({ + entry: { + child: "./child", + }, + }), + ], }; From 7f4084999329e88b4d2758e31bfb3fd34ab1f533 Mon Sep 17 00:00:00 2001 From: wood1986 <5212215+wood1986@users.noreply.github.com> Date: Sun, 24 Oct 2021 01:01:30 -0700 Subject: [PATCH 2/3] fix: fix webpack 4 error --- test/e2e/hot-and-live-reload.test.js | 9 ++- test/fixtures/reload-config/webpack.config.js | 63 +++++++++---------- 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/test/e2e/hot-and-live-reload.test.js b/test/e2e/hot-and-live-reload.test.js index b5a7f7c2e1..1ecb172479 100644 --- a/test/e2e/hot-and-live-reload.test.js +++ b/test/e2e/hot-and-live-reload.test.js @@ -15,6 +15,8 @@ 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" @@ -570,9 +572,10 @@ describe("hot and live reload", () => { expect(backgroundColorAfter).toEqual("rgb(255, 0, 0)"); } - fs.writeFileSync(jsFilePath, "console.log('hello from child.js');"); - - await waitFunc(); + if (isWebpack5) { + fs.writeFileSync(jsFilePath, "console.log('hello from child.js');"); + await waitFunc(); + } expect(consoleMessages).toMatchSnapshot("console messages"); expect(pageErrors).toMatchSnapshot("page errors"); diff --git a/test/fixtures/reload-config/webpack.config.js b/test/fixtures/reload-config/webpack.config.js index 2f3a2c5461..4908890606 100644 --- a/test/fixtures/reload-config/webpack.config.js +++ b/test/fixtures/reload-config/webpack.config.js @@ -3,40 +3,35 @@ const webpack = require("webpack"); const { EntryOptionPlugin, Compilation } = webpack; -const { getNormalizedWebpackOptions } = webpack.config; const isWebpack5 = webpack.version.startsWith("5"); class TestChildCompilerPlugin { constructor(options) { - this.options = getNormalizedWebpackOptions(options); + this.name = "TestChildCompilerPlugin"; + this.options = webpack.config.getNormalizedWebpackOptions(options); } apply(compiler) { - compiler.hooks.thisCompilation.tap( - "TestApplyEntryOptionPlugin", - (compilation) => { - compilation.hooks.processAssets.tapAsync( - { - name: "TestChildCompilerPlugin", - stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE, - }, - (assets, callback) => { - const child = compilation.createChildCompiler( - "TestChildCompilerPlugin" - ); - EntryOptionPlugin.applyEntryOption( - child, - compilation.compiler.context, - this.options.entry - ); - child.runAsChild(() => { - callback(); - }); - } - ); - } - ); + 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(); + }); + } + ); + }); } } @@ -67,11 +62,13 @@ module.exports = { level: "info", }, - plugins: [ - new TestChildCompilerPlugin({ - entry: { - child: "./child", - }, - }), - ], + plugins: isWebpack5 + ? [ + new TestChildCompilerPlugin({ + entry: { + child: "./child", + }, + }), + ] + : [], }; From bd23be592c0f0b4456e20876ea6201c72800992b Mon Sep 17 00:00:00 2001 From: wood1986 <5212215+wood1986@users.noreply.github.com> Date: Thu, 28 Oct 2021 01:24:41 -0700 Subject: [PATCH 3/3] fix: fix no children case --- lib/Server.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/Server.js b/lib/Server.js index 5b93af2dae..d8b3002ef0 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -1184,7 +1184,7 @@ class Server { result.hash = `${result.hash || ""}|${statsJson.hash}`; result.errors = [...(result.errors || []), ...statsJson.errors]; result.warnings = [...(result.warnings || []), ...statsJson.warnings]; - statsJson.children.forEach((child) => { + (statsJson.children || []).forEach((child) => { reduceFn(child, result); }); return result;