From 4015b8cab0b1a78b1e4a26cc911138317a714ef9 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 1 Sep 2021 16:32:21 +0530 Subject: [PATCH 01/18] fix: magic HTML routes with `.mjs` output --- lib/Server.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index 44584dd3c7..73fa824b5a 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -1983,7 +1983,25 @@ class Server { const _path = req.path; try { - const filename = this.middleware.getFilenameFromUrl(`${_path}.js`); + const compilerOptions = this.getCompilerOptions(); + const isOutputModuleEnabled = + compilerOptions.experiments && + compilerOptions.experiments.outputModule; + let filename; + let extension; + + if (isOutputModuleEnabled) { + extension = "mjs"; + filename = this.middleware.getFilenameFromUrl( + `${_path}.${extension}` + ); + } else { + extension = "js"; + filename = this.middleware.getFilenameFromUrl( + `${_path}.${extension}` + ); + } + const isFile = this.middleware.context.outputFileSystem .statSync(filename) .isFile(); @@ -1994,7 +2012,7 @@ class Server { // Serve a page that executes the javascript const queries = req._parsedUrl.search || ""; - const responsePage = ``; + const responsePage = ``; res.send(responsePage); } catch (error) { From 1f6cd95954042d0dee4fe326f971d5f1130e3dc4 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 1 Sep 2021 16:58:14 +0530 Subject: [PATCH 02/18] test: add case for .mjs output --- lib/Server.js | 6 +- .../magic-html.test.js.snap.webpack4 | 58 + .../magic-html.test.js.snap.webpack5 | 58 + test/e2e/magic-html.test.js | 1178 ++++++++++++++++- 4 files changed, 1247 insertions(+), 53 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index 73fa824b5a..6eeeb12b6c 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -1987,19 +1987,23 @@ class Server { const isOutputModuleEnabled = compilerOptions.experiments && compilerOptions.experiments.outputModule; + let filename; let extension; + let scriptType; if (isOutputModuleEnabled) { extension = "mjs"; filename = this.middleware.getFilenameFromUrl( `${_path}.${extension}` ); + scriptType = "module"; } else { extension = "js"; filename = this.middleware.getFilenameFromUrl( `${_path}.${extension}` ); + scriptType = "text/javascript"; } const isFile = this.middleware.context.outputFileSystem @@ -2012,7 +2016,7 @@ class Server { // Serve a page that executes the javascript const queries = req._parsedUrl.search || ""; - const responsePage = ``; + const responsePage = ``; res.send(responsePage); } catch (error) { diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 index 287d0b3c4a..4846809ca7 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 @@ -39,6 +39,8 @@ exports[`magicHtml option enabled should handle GET request to magic async html: exports[`magicHtml option enabled should handle GET request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled should handle GET request to magic async html: response text 1`] = `""`; + exports[`magicHtml option enabled should handle HEAD request to magic async html: console messages 1`] = `Array []`; exports[`magicHtml option enabled should handle HEAD request to magic async html: page errors 1`] = `Array []`; @@ -46,3 +48,59 @@ exports[`magicHtml option enabled should handle HEAD request to magic async html exports[`magicHtml option enabled should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; exports[`magicHtml option enabled should handle HEAD request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled should handle HEAD request to magic async html: response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response text 1`] = `""`; diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 index 287d0b3c4a..4846809ca7 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 @@ -39,6 +39,8 @@ exports[`magicHtml option enabled should handle GET request to magic async html: exports[`magicHtml option enabled should handle GET request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled should handle GET request to magic async html: response text 1`] = `""`; + exports[`magicHtml option enabled should handle HEAD request to magic async html: console messages 1`] = `Array []`; exports[`magicHtml option enabled should handle HEAD request to magic async html: page errors 1`] = `Array []`; @@ -46,3 +48,59 @@ exports[`magicHtml option enabled should handle HEAD request to magic async html exports[`magicHtml option enabled should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; exports[`magicHtml option enabled should handle HEAD request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled should handle HEAD request to magic async html: response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response text 1`] = `""`; diff --git a/test/e2e/magic-html.test.js b/test/e2e/magic-html.test.js index 90e72315f4..4b28d12b58 100644 --- a/test/e2e/magic-html.test.js +++ b/test/e2e/magic-html.test.js @@ -3,9 +3,13 @@ const webpack = require("webpack"); const Server = require("../../lib/Server"); const config = require("../fixtures/client-config/webpack.config"); +const multiCompilerConfig = require("../fixtures/multi-compiler-config/webpack.config"); const runBrowser = require("../helpers/run-browser"); +const isWebpack5 = require("../helpers/isWebpack5"); const port = require("../ports-map")["magic-html-option"]; +const webpack5Test = isWebpack5 ? describe : describe.skip; + describe("magicHtml option", () => { describe("enabled", () => { let compiler; @@ -15,8 +19,308 @@ describe("magicHtml option", () => { let pageErrors; let consoleMessages; + describe("filename bundle.js", () => { + beforeEach(async () => { + compiler = webpack({ + ...config, + output: { + path: "/", + filename: "bundle.js", + }, + }); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/bundle)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/bundle)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + }); + + describe("filename bundle.other.js", () => { + beforeEach(async () => { + compiler = webpack({ + ...config, + output: { + path: "/", + filename: "bundle.other.js", + }, + }); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/bundle.other)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto( + `http://127.0.0.1:${port}/bundle.other`, + { + waitUntil: "networkidle0", + } + ); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should not handle GET request to /bundle", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/bundle.other)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto( + `http://127.0.0.1:${port}/bundle.other`, + { + waitUntil: "networkidle0", + } + ); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + }); + + describe("multi compiler mode", () => { + beforeEach(async () => { + compiler = webpack(multiCompilerConfig); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/main)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/main`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/main)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/main`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + }); + }); + + webpack5Test("enabled with experiments.outputModule: true", () => { + let compiler; + let server; + let page; + let browser; + let pageErrors; + let consoleMessages; + beforeEach(async () => { - compiler = webpack(config); + compiler = webpack({ + ...config, + experiments: { + outputModule: true, + }, + }); server = new Server({ port, magicHtml: true }, compiler); await server.start(); @@ -32,7 +336,7 @@ describe("magicHtml option", () => { await server.stop(); }); - it("should handle GET request to magic async html", async () => { + it("should handle GET request to magic async html (/main)", async () => { page .on("console", (message) => { consoleMessages.push(message); @@ -51,6 +355,8 @@ describe("magicHtml option", () => { expect(response.status()).toMatchSnapshot("response status"); + expect(await response.text()).toMatchSnapshot("response text"); + expect(consoleMessages.map((message) => message.text())).toMatchSnapshot( "console messages" ); @@ -58,7 +364,7 @@ describe("magicHtml option", () => { expect(pageErrors).toMatchSnapshot("page errors"); }); - it("should handle HEAD request to magic async html", async () => { + it("should handle HEAD request to magic async html (/main)", async () => { await page.setRequestInterception(true); page @@ -82,6 +388,8 @@ describe("magicHtml option", () => { expect(response.status()).toMatchSnapshot("response status"); + expect(await response.text()).toMatchSnapshot("response text"); + expect(consoleMessages.map((message) => message.text())).toMatchSnapshot( "console messages" ); @@ -90,7 +398,420 @@ describe("magicHtml option", () => { }); }); - describe("disabled", () => { + webpack5Test( + "enabled with experiments.outputModule: true in multi compiler mode", + () => { + let compiler; + let server; + let page; + let browser; + let pageErrors; + let consoleMessages; + + beforeEach(async () => { + compiler = webpack([ + { + ...multiCompilerConfig[0], + experiments: { + outputModule: true, + }, + }, + ]); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/main)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/main`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/main)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/main`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + } + ); + + webpack5Test( + "enabled with experiments.outputModule: true and .js extension", + () => { + let compiler; + let server; + let page; + let browser; + let pageErrors; + let consoleMessages; + + describe("filename bundle.js", () => { + beforeEach(async () => { + compiler = webpack({ + ...config, + output: { + path: "/", + filename: "bundle.js", + }, + experiments: { + outputModule: true, + }, + }); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/bundle)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/bundle)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + }); + + describe("filename bundle.other.js", () => { + beforeEach(async () => { + compiler = webpack({ + ...config, + output: { + path: "/", + filename: "bundle.other.js", + }, + experiments: { + outputModule: true, + }, + }); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/bundle.other)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto( + `http://127.0.0.1:${port}/bundle.other`, + { + waitUntil: "networkidle0", + } + ); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should not handle GET request to /bundle", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/bundle.other)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto( + `http://127.0.0.1:${port}/bundle.other`, + { + waitUntil: "networkidle0", + } + ); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + }); + + describe("multi compiler mode", () => { + beforeEach(async () => { + compiler = webpack([ + { + ...multiCompilerConfig[0], + output: { + path: "/", + filename: "bundle.js", + }, + experiments: { + outputModule: true, + }, + }, + config, + ]); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/bundle)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/bundle)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + }); + } + ); + + webpack5Test("enabled with experiments.outputModule: false", () => { let compiler; let server; let page; @@ -98,78 +819,431 @@ describe("magicHtml option", () => { let pageErrors; let consoleMessages; - beforeEach(async () => { - compiler = webpack(config); - server = new Server({ port, magicHtml: false }, compiler); + describe("filename bundle.js", () => { + beforeEach(async () => { + compiler = webpack({ + ...config, + output: { + path: "/", + filename: "bundle.js", + }, + experiments: { + outputModule: false, + }, + }); + server = new Server({ port, magicHtml: true }, compiler); - await server.start(); + await server.start(); - ({ page, browser } = await runBrowser()); + ({ page, browser } = await runBrowser()); - pageErrors = []; - consoleMessages = []; + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/bundle)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/bundle)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); }); - afterEach(async () => { - await browser.close(); - await server.stop(); + describe("filename bundle.other.js", () => { + beforeEach(async () => { + compiler = webpack({ + ...config, + output: { + path: "/", + filename: "bundle.other.js", + }, + experiments: { + outputModule: false, + }, + }); + server = new Server({ port, magicHtml: true }, compiler); + + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should handle GET request to magic async html (/bundle.other)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto( + `http://127.0.0.1:${port}/bundle.other`, + { + waitUntil: "networkidle0", + } + ); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should not handle GET request to /bundle", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should handle HEAD request to magic async html (/bundle.other)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto( + `http://127.0.0.1:${port}/bundle.other`, + { + waitUntil: "networkidle0", + } + ); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); }); + }); - it("should not handle GET request to magic async html", async () => { - page - .on("console", (message) => { - consoleMessages.push(message); - }) - .on("pageerror", (error) => { - pageErrors.push(error); + describe("disabled", () => { + let compiler; + let server; + let page; + let browser; + let pageErrors; + let consoleMessages; + + describe("filename bundle.js", () => { + beforeEach(async () => { + compiler = webpack({ + ...config, + output: { + path: "/", + filename: "bundle.js", + }, }); + server = new Server({ port, magicHtml: false }, compiler); - const response = await page.goto(`http://127.0.0.1:${port}/main`, { - waitUntil: "networkidle0", + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; }); - expect(response.headers()["content-type"]).toMatchSnapshot( - "response headers content-type" - ); + afterEach(async () => { + await browser.close(); + await server.stop(); + }); - expect(response.status()).toMatchSnapshot("response status"); + it("should not handle GET request to magic async html (/bundle)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); - expect(consoleMessages.map((message) => message.text())).toMatchSnapshot( - "console messages" - ); + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); - expect(pageErrors).toMatchSnapshot("page errors"); + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should not handle HEAD request to magic async html (/bundle)", async () => { + await page.setRequestInterception(true); + + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", + }); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); }); - it("should not handle HEAD request to magic async html", async () => { - await page.setRequestInterception(true); + describe("filename bundle.other.js", () => { + beforeEach(async () => { + compiler = webpack({ + ...config, + output: { + path: "/", + filename: "bundle.other.js", + }, + }); + server = new Server({ port, magicHtml: false }, compiler); - page - .on("console", (message) => { - consoleMessages.push(message); - }) - .on("pageerror", (error) => { - pageErrors.push(error); - }) - .on("request", (interceptedRequest) => { - interceptedRequest.continue({ method: "HEAD" }); + await server.start(); + + ({ page, browser } = await runBrowser()); + + pageErrors = []; + consoleMessages = []; + }); + + afterEach(async () => { + await browser.close(); + await server.stop(); + }); + + it("should not handle GET request to magic async html (/bundle.other)", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto( + `http://127.0.0.1:${port}/bundle.other`, + { + waitUntil: "networkidle0", + } + ); + + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); + + it("should not handle GET request to /bundle", async () => { + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }); + + const response = await page.goto(`http://127.0.0.1:${port}/bundle`, { + waitUntil: "networkidle0", }); - const response = await page.goto(`http://127.0.0.1:${port}/main`, { - waitUntil: "networkidle0", + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); }); - expect(response.headers()["content-type"]).toMatchSnapshot( - "response headers content-type" - ); + it("should not handle HEAD request to magic async html (/bundle.other)", async () => { + await page.setRequestInterception(true); - expect(response.status()).toMatchSnapshot("response status"); + page + .on("console", (message) => { + consoleMessages.push(message); + }) + .on("pageerror", (error) => { + pageErrors.push(error); + }) + .on("request", (interceptedRequest) => { + interceptedRequest.continue({ method: "HEAD" }); + }); - expect(consoleMessages.map((message) => message.text())).toMatchSnapshot( - "console messages" - ); + const response = await page.goto( + `http://127.0.0.1:${port}/bundle.other`, + { + waitUntil: "networkidle0", + } + ); - expect(pageErrors).toMatchSnapshot("page errors"); + expect(response.headers()["content-type"]).toMatchSnapshot( + "response headers content-type" + ); + + expect(response.status()).toMatchSnapshot("response status"); + + expect(await response.text()).toMatchSnapshot("response text"); + + expect( + consoleMessages.map((message) => message.text()) + ).toMatchSnapshot("console messages"); + + expect(pageErrors).toMatchSnapshot("page errors"); + }); }); }); }); From f53dfd75de7ebe8477b664a211b2f8b83e45a9b2 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 2 Sep 2021 08:32:34 +0530 Subject: [PATCH 03/18] fix: improve logic and cover more cases --- examples/magic-html/webpack.config.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/examples/magic-html/webpack.config.js b/examples/magic-html/webpack.config.js index 444bf6e0a3..30c087549e 100644 --- a/examples/magic-html/webpack.config.js +++ b/examples/magic-html/webpack.config.js @@ -7,6 +7,9 @@ const { setup } = require("../util"); module.exports = setup({ context: __dirname, entry: "./app.js", + experiments: { + outputModule: true, + }, devServer: { magicHtml: true, }, From 8bd552b116b4098d6019301ee7f98966fe9e848c Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 2 Sep 2021 08:38:33 +0530 Subject: [PATCH 04/18] fix: improve logic and cover more cases --- lib/Server.js | 52 +++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 46 insertions(+), 6 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index 6eeeb12b6c..b6464aa3c7 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -15,6 +15,18 @@ if (!process.env.WEBPACK_SERVE) { process.env.WEBPACK_SERVE = true; } +class AssetsInfoPlugin { + constructor(callback) { + this.callback = callback; + } + // eslint-disable-next-line class-methods-use-this + apply(compiler) { + compiler.hooks.done.tap("assets-info-plugin", (stats) => { + this.callback(stats.compilation.assetsInfo); + }); + } +} + class Server { constructor(options = {}, compiler) { // TODO: remove this after plugin support is published @@ -36,6 +48,7 @@ class Server { this.webSocketProxies = []; this.sockets = []; this.compiler = compiler; + this.assetsInfo = {}; } static get DEFAULT_STATS() { @@ -1095,6 +1108,12 @@ class Server { plugin.apply(compiler); } } + + if (this.options.magicHtml) { + new AssetsInfoPlugin((assetsInfo) => { + this.assetsInfo = assetsInfo; + }).apply(this.compiler); + } }); if (this.options.client && this.options.client.progress) { @@ -1983,16 +2002,37 @@ class Server { const _path = req.path; try { - const compilerOptions = this.getCompilerOptions(); - const isOutputModuleEnabled = - compilerOptions.experiments && - compilerOptions.experiments.outputModule; - let filename; let extension; let scriptType; - if (isOutputModuleEnabled) { + // _path = "/main" -> outputFilename = "main" + // _path = "/main.other" -> outputFilename = "main.other" + const outputFilename = _path.slice(1); + // main => ["main"] + // main-other => ["main-other"] + // main.other => ["main", "other"] + const splitOutputFilename = outputFilename.split("."); + let isOutputModule = false; + + this.assetsInfo.forEach((value, key) => { + // main.js => ["main", "js"] + // main.another.js => ["main", "another", "js"] + const splitKey = key.split("."); + + // If key = main.mjs and filename = main => true + // If key = main-another.mjs filename = main => false + // If key = main.other.mjs filename = main => false + // If key = main.other.mjs filename = main.other => true + if ( + splitKey.length - 1 === splitOutputFilename.length && + key.split(".")[0] === outputFilename.split(".")[0] + ) { + isOutputModule = value.javascriptModule; + } + }); + + if (isOutputModule) { extension = "mjs"; filename = this.middleware.getFilenameFromUrl( `${_path}.${extension}` From ffef6c9830d7f2ca9ec6b9f4403a16e4de134f57 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 2 Sep 2021 09:26:33 +0530 Subject: [PATCH 05/18] test: add more cases --- lib/Server.js | 12 +- .../magic-html.test.js.snap.webpack5 | 344 ++++++++++++++++-- 2 files changed, 312 insertions(+), 44 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index b6464aa3c7..0bf7328ca1 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -1112,6 +1112,7 @@ class Server { if (this.options.magicHtml) { new AssetsInfoPlugin((assetsInfo) => { this.assetsInfo = assetsInfo; + console.log(assetsInfo); }).apply(this.compiler); } }); @@ -2019,21 +2020,20 @@ class Server { // main.js => ["main", "js"] // main.another.js => ["main", "another", "js"] const splitKey = key.split("."); - - // If key = main.mjs and filename = main => true - // If key = main-another.mjs filename = main => false - // If key = main.other.mjs filename = main => false - // If key = main.other.mjs filename = main.other => true + // If key = main.mjs && filename = main => true + // If key = main-another.mjs && filename = main => false + // If key = main.other.mjs && filename = main => false + // If key = main.other.mjs && filename = main.other => true if ( splitKey.length - 1 === splitOutputFilename.length && key.split(".")[0] === outputFilename.split(".")[0] ) { + extension = splitKey[splitKey.length - 1]; isOutputModule = value.javascriptModule; } }); if (isOutputModule) { - extension = "mjs"; filename = this.middleware.getFilenameFromUrl( `${_path}.${extension}` ); diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 index 4846809ca7..02a5bcf490 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 @@ -1,30 +1,192 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`magicHtml option disabled should not handle GET request to magic async html: console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled should not handle GET request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option disabled should not handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled should not handle GET request to magic async html: response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `404`; -exports[`magicHtml option disabled should not handle HEAD request to magic async html: console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle
+ + +" +`; + +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = ` +Array [ + "Failed to load resource: the server responded with a status of 404 (Not Found)", +] +`; + +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; + +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `404`; + +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; + +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = ` +Array [ + "Failed to load resource: the server responded with a status of 404 (Not Found)", +] +`; + +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `404`; + +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle.other
+ + +" +`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` +Array [ + "Failed to load resource: the server responded with a status of 404 (Not Found)", +] +`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle
+ + +" +`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): console messages 1`] = ` +Array [ + "Failed to load resource: the server responded with a status of 404 (Not Found)", +] +`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): response status 1`] = `404`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): response text 1`] = `""`; + +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `200`; + +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = `""`; + +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `200`; + +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; + +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `200`; + +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = `""`; + +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response status 1`] = `200`; + +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response text 1`] = `""`; + +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled should not handle HEAD request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; -exports[`magicHtml option disabled should not handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled should not handle HEAD request to magic async html: response status 1`] = `404`; +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; -exports[`magicHtml option enabled should handle GET request to magic async html: console messages 1`] = ` +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle
+ + +" +`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", "Hey.", @@ -33,25 +195,25 @@ Array [ ] `; -exports[`magicHtml option enabled should handle GET request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option enabled should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled should handle GET request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `200`; -exports[`magicHtml option enabled should handle GET request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: console messages 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `200`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: console messages 1`] = ` +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", "Hey.", @@ -60,25 +222,131 @@ Array [ ] `; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = `""`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): console messages 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): page errors 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: console messages 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` +Array [ + "Failed to load resource: the server responded with a status of 404 (Not Found)", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle
+ + +" +`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` +Array [ + "Failed to load resource: the server responded with a status of 404 (Not Found)", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle
+ + +" +`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: console messages 1`] = ` +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html (/main): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", "Hey.", @@ -87,20 +355,20 @@ Array [ ] `; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html (/main): page errors 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html (/main): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html (/main): response text 1`] = `""`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: console messages 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html (/main): console messages 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html (/main): page errors 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html (/main): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html (/main): response text 1`] = `""`; From 0257c20e8bc6ce55c180c498b809009ca4969673 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 2 Sep 2021 09:27:53 +0530 Subject: [PATCH 06/18] refactor: code --- lib/Server.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index 0bf7328ca1..3bf833028e 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -48,7 +48,6 @@ class Server { this.webSocketProxies = []; this.sockets = []; this.compiler = compiler; - this.assetsInfo = {}; } static get DEFAULT_STATS() { @@ -1112,7 +1111,6 @@ class Server { if (this.options.magicHtml) { new AssetsInfoPlugin((assetsInfo) => { this.assetsInfo = assetsInfo; - console.log(assetsInfo); }).apply(this.compiler); } }); From 1393517a79f3b26e7eeb8af3ddff444899954155 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 2 Sep 2021 09:32:13 +0530 Subject: [PATCH 07/18] test: webpack-4 --- .../magic-html.test.js.snap.webpack4 | 165 +++++++++++++----- 1 file changed, 123 insertions(+), 42 deletions(-) diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 index 4846809ca7..8e559036b2 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 @@ -1,57 +1,112 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`magicHtml option disabled should not handle GET request to magic async html: console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled should not handle GET request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option disabled should not handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled should not handle GET request to magic async html: response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `404`; -exports[`magicHtml option disabled should not handle HEAD request to magic async html: console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle
+ + +" +`; + +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled should not handle HEAD request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; + +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled should not handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `404`; -exports[`magicHtml option disabled should not handle HEAD request to magic async html: response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option enabled should handle GET request to magic async html: console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = ` Array [ - "[HMR] Waiting for update signal from WDS...", - "Hey.", - "[webpack-dev-server] Hot Module Replacement enabled.", - "[webpack-dev-server] Live Reloading enabled.", + "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option enabled should handle GET request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; -exports[`magicHtml option enabled should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled should handle GET request to magic async html: response status 1`] = `200`; +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `404`; -exports[`magicHtml option enabled should handle GET request to magic async html: response text 1`] = `""`; +exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle.other
+ + +" +`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: console messages 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` +Array [ + "Failed to load resource: the server responded with a status of 404 (Not Found)", +] +`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: response status 1`] = `200`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; -exports[`magicHtml option enabled should handle HEAD request to magic async html: response text 1`] = `""`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle
+ + +" +`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): console messages 1`] = ` +Array [ + "Failed to load resource: the server responded with a status of 404 (Not Found)", +] +`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): response status 1`] = `404`; + +exports[`magicHtml option disabled filename bundle.other.js should not handle HEAD request to magic async html (/bundle.other): response text 1`] = `""`; + +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", "Hey.", @@ -60,25 +115,25 @@ Array [ ] `; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle GET request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: console messages 1`] = `Array []`; +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: false should handle HEAD request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: console messages 1`] = ` +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", "Hey.", @@ -87,20 +142,46 @@ Array [ ] `; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = `""`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): console messages 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): page errors 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: console messages 1`] = `Array []`; +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: page errors 1`] = `Array []`; +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): response text 1`] = `""`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response status 1`] = `200`; +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` +Array [ + "Failed to load resource: the server responded with a status of 404 (Not Found)", +] +`; -exports[`magicHtml option enabled with experiments.outputModule: true should handle HEAD request to magic async html: response text 1`] = `""`; +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; + +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; + +exports[`magicHtml option enabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` +" + + + +Error + + +
Cannot GET /bundle
+ + +" +`; From 16c89ad1517847e075d1302dc74644815b65fa55 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 2 Sep 2021 09:34:16 +0530 Subject: [PATCH 08/18] refactor: code --- examples/magic-html/webpack.config.js | 3 --- lib/Server.js | 22 ++-------------------- 2 files changed, 2 insertions(+), 23 deletions(-) diff --git a/examples/magic-html/webpack.config.js b/examples/magic-html/webpack.config.js index 30c087549e..444bf6e0a3 100644 --- a/examples/magic-html/webpack.config.js +++ b/examples/magic-html/webpack.config.js @@ -7,9 +7,6 @@ const { setup } = require("../util"); module.exports = setup({ context: __dirname, entry: "./app.js", - experiments: { - outputModule: true, - }, devServer: { magicHtml: true, }, diff --git a/lib/Server.js b/lib/Server.js index 3bf833028e..377b1ac1c6 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -15,18 +15,6 @@ if (!process.env.WEBPACK_SERVE) { process.env.WEBPACK_SERVE = true; } -class AssetsInfoPlugin { - constructor(callback) { - this.callback = callback; - } - // eslint-disable-next-line class-methods-use-this - apply(compiler) { - compiler.hooks.done.tap("assets-info-plugin", (stats) => { - this.callback(stats.compilation.assetsInfo); - }); - } -} - class Server { constructor(options = {}, compiler) { // TODO: remove this after plugin support is published @@ -1107,12 +1095,6 @@ class Server { plugin.apply(compiler); } } - - if (this.options.magicHtml) { - new AssetsInfoPlugin((assetsInfo) => { - this.assetsInfo = assetsInfo; - }).apply(this.compiler); - } }); if (this.options.client && this.options.client.progress) { @@ -2014,7 +1996,7 @@ class Server { const splitOutputFilename = outputFilename.split("."); let isOutputModule = false; - this.assetsInfo.forEach((value, key) => { + this.stats.compilation.assetsInfo.forEach((value, key) => { // main.js => ["main", "js"] // main.another.js => ["main", "another", "js"] const splitKey = key.split("."); @@ -2024,7 +2006,7 @@ class Server { // If key = main.other.mjs && filename = main.other => true if ( splitKey.length - 1 === splitOutputFilename.length && - key.split(".")[0] === outputFilename.split(".")[0] + splitKey[0] === outputFilename.split(".")[0] ) { extension = splitKey[splitKey.length - 1]; isOutputModule = value.javascriptModule; From 4e172a6c1438b29a96031804de6252118af882b4 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 2 Sep 2021 15:59:44 +0530 Subject: [PATCH 09/18] refactor: code --- lib/Server.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index 377b1ac1c6..4d7b55f433 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -2008,21 +2008,17 @@ class Server { splitKey.length - 1 === splitOutputFilename.length && splitKey[0] === outputFilename.split(".")[0] ) { - extension = splitKey[splitKey.length - 1]; + extension = path.extname(key); isOutputModule = value.javascriptModule; } }); if (isOutputModule) { - filename = this.middleware.getFilenameFromUrl( - `${_path}.${extension}` - ); + filename = this.middleware.getFilenameFromUrl(`${_path}${extension}`); scriptType = "module"; } else { - extension = "js"; - filename = this.middleware.getFilenameFromUrl( - `${_path}.${extension}` - ); + extension = ".js"; + filename = this.middleware.getFilenameFromUrl(`${_path}${extension}`); scriptType = "text/javascript"; } @@ -2036,7 +2032,7 @@ class Server { // Serve a page that executes the javascript const queries = req._parsedUrl.search || ""; - const responsePage = ``; + const responsePage = ``; res.send(responsePage); } catch (error) { From f86be392b385f0d453005b54c8ecfb702a4c0ae3 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 2 Sep 2021 16:17:20 +0530 Subject: [PATCH 10/18] refactor: code --- lib/Server.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/Server.js b/lib/Server.js index 4d7b55f433..dfbb81f775 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -2006,7 +2006,7 @@ class Server { // If key = main.other.mjs && filename = main.other => true if ( splitKey.length - 1 === splitOutputFilename.length && - splitKey[0] === outputFilename.split(".")[0] + splitKey[0] === splitOutputFilename[0] ) { extension = path.extname(key); isOutputModule = value.javascriptModule; From b122f60fdb574698ad172928ffbf9a9dd3752fd9 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Thu, 2 Sep 2021 16:20:22 +0530 Subject: [PATCH 11/18] fix: typo --- .../magic-html.test.js.snap.webpack4 | 30 ++++++------- .../magic-html.test.js.snap.webpack5 | 44 +++++++++---------- test/e2e/magic-html.test.js | 6 +-- 3 files changed, 40 insertions(+), 40 deletions(-) diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 index 8e559036b2..6757581aa2 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 @@ -1,18 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = ` +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): response text 1`] = ` " @@ -26,33 +26,33 @@ exports[`magicHtml option disabled filename bundle.js should handle GET request " `; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response text 1`] = ` " diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 index 02a5bcf490..d05a82de4d 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 @@ -1,18 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = ` +exports[`magicHtml option disabled filename bundle.js should not handle GET request to magic async html (/bundle): response text 1`] = ` " @@ -26,33 +26,33 @@ exports[`magicHtml option disabled filename bundle.js should handle GET request " `; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; +exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` " @@ -60,25 +60,25 @@ exports[`magicHtml option disabled filename bundle.other.js should handle GET re Error -
Cannot GET /bundle.other
+
Cannot GET /bundle
" `; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response text 1`] = ` " @@ -86,7 +86,7 @@ exports[`magicHtml option disabled filename bundle.other.js should not handle GE Error -
Cannot GET /bundle
+
Cannot GET /bundle.other
" diff --git a/test/e2e/magic-html.test.js b/test/e2e/magic-html.test.js index 4b28d12b58..7a74836123 100644 --- a/test/e2e/magic-html.test.js +++ b/test/e2e/magic-html.test.js @@ -846,7 +846,7 @@ describe("magicHtml option", () => { await server.stop(); }); - it("should handle GET request to magic async html (/bundle)", async () => { + it("should not handle GET request to magic async html (/bundle)", async () => { page .on("console", (message) => { consoleMessages.push(message); @@ -874,7 +874,7 @@ describe("magicHtml option", () => { expect(pageErrors).toMatchSnapshot("page errors"); }); - it("should handle HEAD request to magic async html (/bundle)", async () => { + it("should not handle HEAD request to magic async html (/bundle)", async () => { await page.setRequestInterception(true); page @@ -935,7 +935,7 @@ describe("magicHtml option", () => { await server.stop(); }); - it("should handle GET request to magic async html (/bundle.other)", async () => { + it("should not handle GET request to magic async html (/bundle.other)", async () => { page .on("console", (message) => { consoleMessages.push(message); From beb009e0a839a57c1ff19fb10f2d8dcc8c8198eb Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Sat, 4 Sep 2021 06:19:33 +0530 Subject: [PATCH 12/18] refactor: code --- lib/Server.js | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index dfbb81f775..c65d9afb14 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -1990,25 +1990,15 @@ class Server { // _path = "/main" -> outputFilename = "main" // _path = "/main.other" -> outputFilename = "main.other" const outputFilename = _path.slice(1); - // main => ["main"] - // main-other => ["main-other"] - // main.other => ["main", "other"] - const splitOutputFilename = outputFilename.split("."); + let isOutputModule = false; this.stats.compilation.assetsInfo.forEach((value, key) => { - // main.js => ["main", "js"] - // main.another.js => ["main", "another", "js"] - const splitKey = key.split("."); - // If key = main.mjs && filename = main => true - // If key = main-another.mjs && filename = main => false - // If key = main.other.mjs && filename = main => false - // If key = main.other.mjs && filename = main.other => true - if ( - splitKey.length - 1 === splitOutputFilename.length && - splitKey[0] === splitOutputFilename[0] - ) { - extension = path.extname(key); + const assetExtension = path.extname(key); + const assetBasename = path.basename(key, assetExtension); + + if (assetBasename === outputFilename) { + extension = assetExtension; isOutputModule = value.javascriptModule; } }); From 128a5370f56269cba204f8b35eda69bb121b032a Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Sun, 5 Sep 2021 09:30:18 +0530 Subject: [PATCH 13/18] test: multi compiler mode --- .../magic-html.test.js.snap.webpack4 | 51 +++++++++--- .../magic-html.test.js.snap.webpack5 | 78 +++++++++++++++++++ 2 files changed, 117 insertions(+), 12 deletions(-) diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 index 6757581aa2..80239b28d4 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack4 @@ -40,19 +40,19 @@ exports[`magicHtml option disabled filename bundle.js should not handle HEAD req exports[`magicHtml option disabled filename bundle.js should not handle HEAD request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response text 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` " @@ -60,25 +60,25 @@ exports[`magicHtml option disabled filename bundle.other.js should not handle GE Error -
Cannot GET /bundle.other
+
Cannot GET /bundle
" `; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: console messages 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): console messages 1`] = ` Array [ "Failed to load resource: the server responded with a status of 404 (Not Found)", ] `; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: page errors 1`] = `Array []`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response status 1`] = `404`; +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response status 1`] = `404`; -exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to /bundle: response text 1`] = ` +exports[`magicHtml option disabled filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response text 1`] = ` " @@ -86,7 +86,7 @@ exports[`magicHtml option disabled filename bundle.other.js should not handle GE Error -
Cannot GET /bundle
+
Cannot GET /bundle.other
" @@ -185,3 +185,30 @@ exports[`magicHtml option enabled filename bundle.other.js should not handle GET " `; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response text 1`] = `""`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response text 1`] = `""`; diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 index d05a82de4d..0008864eeb 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 @@ -186,6 +186,33 @@ exports[`magicHtml option enabled filename bundle.other.js should not handle GET " `; +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled multi compiler mode should handle GET request to magic async html (/main): response text 1`] = `""`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response text 1`] = `""`; + exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", @@ -346,6 +373,57 @@ exports[`magicHtml option enabled with experiments.outputModule: true and .js ex " `; +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): page errors 1`] = ` +Array [ + [Error: SyntaxError: Cannot use 'import.meta' outside a module], +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle GET request to magic async html (/main): response text 1`] = `""`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): console messages 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: true in multi compiler mode should handle HEAD request to magic async html (/main): response text 1`] = `""`; + exports[`magicHtml option enabled with experiments.outputModule: true should handle GET request to magic async html (/main): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", From 8ad18006a7450cbdc13189cb03434476f859680f Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Mon, 13 Sep 2021 18:34:12 +0530 Subject: [PATCH 14/18] test: update snaps --- .../magic-html.test.js.snap.webpack5 | 67 ++++++++++--------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 index 0008864eeb..01c7133ac0 100644 --- a/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 +++ b/test/e2e/__snapshots__/magic-html.test.js.snap.webpack5 @@ -213,7 +213,7 @@ exports[`magicHtml option enabled multi compiler mode should handle HEAD request exports[`magicHtml option enabled multi compiler mode should handle HEAD request to magic async html (/main): response text 1`] = `""`; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", "Hey.", @@ -222,40 +222,23 @@ Array [ ] `; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): response status 1`] = `200`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle GET request to magic async html (/bundle): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle GET request to magic async html (/bundle): response text 1`] = `""`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle GET request to magic async html (/bundle): response text 1`] = `""`; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle HEAD request to magic async html (/bundle): page errors 1`] = `Array []`; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle HEAD request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): response status 1`] = `200`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle HEAD request to magic async html (/bundle): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should handle HEAD request to magic async html (/bundle): response text 1`] = `""`; - -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): console messages 1`] = ` -Array [ - "[HMR] Waiting for update signal from WDS...", - "Hey.", - "[webpack-dev-server] Hot Module Replacement enabled.", - "[webpack-dev-server] Live Reloading enabled.", -] -`; - -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; - -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; - -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): response status 1`] = `200`; - -exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle GET request to magic async html (/bundle.other): response text 1`] = `""`; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.js should not handle HEAD request to magic async html (/bundle): response text 1`] = `""`; exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should handle HEAD request to magic async html (/bundle.other): console messages 1`] = `Array []`; @@ -293,6 +276,23 @@ exports[`magicHtml option enabled with experiments.outputModule: false filename " `; +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to magic async html (/bundle.other): console messages 1`] = ` +Array [ + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", +] +`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to magic async html (/bundle.other): page errors 1`] = `Array []`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response headers content-type 1`] = `"text/html; charset=utf-8"`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response status 1`] = `200`; + +exports[`magicHtml option enabled with experiments.outputModule: false filename bundle.other.js should not handle GET request to magic async html (/bundle.other): response text 1`] = `""`; + exports[`magicHtml option enabled with experiments.outputModule: true and .js extension filename bundle.js should handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ "[HMR] Waiting for update signal from WDS...", @@ -373,19 +373,22 @@ exports[`magicHtml option enabled with experiments.outputModule: true and .js ex " `; -exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): console messages 1`] = `Array []`; - -exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): page errors 1`] = ` +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): console messages 1`] = ` Array [ - [Error: SyntaxError: Cannot use 'import.meta' outside a module], + "[HMR] Waiting for update signal from WDS...", + "Hey.", + "[webpack-dev-server] Hot Module Replacement enabled.", + "[webpack-dev-server] Live Reloading enabled.", ] `; +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): page errors 1`] = `Array []`; + exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response headers content-type 1`] = `"text/html; charset=utf-8"`; exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response status 1`] = `200`; -exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response text 1`] = `""`; +exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle GET request to magic async html (/bundle): response text 1`] = `""`; exports[`magicHtml option enabled with experiments.outputModule: true and .js extension multi compiler mode should handle HEAD request to magic async html (/bundle): console messages 1`] = `Array []`; From cb016a9aca3d37a834804c8f23c011241129bf53 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 15 Sep 2021 09:32:38 +0530 Subject: [PATCH 15/18] fix: import --- test/e2e/magic-html.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/magic-html.test.js b/test/e2e/magic-html.test.js index 7a74836123..dd1e4c9a47 100644 --- a/test/e2e/magic-html.test.js +++ b/test/e2e/magic-html.test.js @@ -3,7 +3,7 @@ const webpack = require("webpack"); const Server = require("../../lib/Server"); const config = require("../fixtures/client-config/webpack.config"); -const multiCompilerConfig = require("../fixtures/multi-compiler-config/webpack.config"); +const multiCompilerConfig = require("../fixtures/multi-compiler-one-configuration/webpack.config"); const runBrowser = require("../helpers/run-browser"); const isWebpack5 = require("../helpers/isWebpack5"); const port = require("../ports-map")["magic-html-option"]; From 2581cb34d5da330b839e2d1967884f1db46fbe68 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Tue, 21 Sep 2021 17:21:46 +0530 Subject: [PATCH 16/18] fix: compatibility with multicompiler mode --- lib/Server.js | 31 +++++++++++++++++++++++-------- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index c65d9afb14..1abf8ebe38 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -1993,15 +1993,29 @@ class Server { let isOutputModule = false; - this.stats.compilation.assetsInfo.forEach((value, key) => { - const assetExtension = path.extname(key); - const assetBasename = path.basename(key, assetExtension); + if (typeof this.compiler.compilers !== "undefined") { + this.stats.stats.forEach((stats) => { + stats.compilation.assetsInfo.forEach((value, key) => { + const assetExtension = path.extname(key); + const assetBasename = path.basename(key, assetExtension); + + if (assetBasename === outputFilename) { + extension = assetExtension; + isOutputModule = value.javascriptModule; + } + }); + }); + } else { + this.stats.compilation.assetsInfo.forEach((value, key) => { + const assetExtension = path.extname(key); + const assetBasename = path.basename(key, assetExtension); - if (assetBasename === outputFilename) { - extension = assetExtension; - isOutputModule = value.javascriptModule; - } - }); + if (assetBasename === outputFilename) { + extension = assetExtension; + isOutputModule = value.javascriptModule; + } + }); + } if (isOutputModule) { filename = this.middleware.getFilenameFromUrl(`${_path}${extension}`); @@ -2026,6 +2040,7 @@ class Server { res.send(responsePage); } catch (error) { + console.log(error); return next(); } }); From ac6888f8b76d323df61f0952940077f4723b753f Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 22 Sep 2021 08:06:09 +0530 Subject: [PATCH 17/18] refactor: remove console.log --- lib/Server.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/Server.js b/lib/Server.js index 1abf8ebe38..b48a6eb57e 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -2040,7 +2040,6 @@ class Server { res.send(responsePage); } catch (error) { - console.log(error); return next(); } }); From 512a3d7bcee13038e8a27bc12a8d57bb46c4bf67 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Sat, 25 Sep 2021 09:08:43 +0530 Subject: [PATCH 18/18] refactor: code --- lib/Server.js | 20 +++++--------------- 1 file changed, 5 insertions(+), 15 deletions(-) diff --git a/lib/Server.js b/lib/Server.js index b48a6eb57e..2ce4c52725 100644 --- a/lib/Server.js +++ b/lib/Server.js @@ -1993,20 +1993,10 @@ class Server { let isOutputModule = false; - if (typeof this.compiler.compilers !== "undefined") { - this.stats.stats.forEach((stats) => { - stats.compilation.assetsInfo.forEach((value, key) => { - const assetExtension = path.extname(key); - const assetBasename = path.basename(key, assetExtension); - - if (assetBasename === outputFilename) { - extension = assetExtension; - isOutputModule = value.javascriptModule; - } - }); - }); - } else { - this.stats.compilation.assetsInfo.forEach((value, key) => { + const stats = this.stats.stats ? this.stats.stats : [this.stats]; + + for (const item of stats) { + for (const [key, value] of item.compilation.assetsInfo) { const assetExtension = path.extname(key); const assetBasename = path.basename(key, assetExtension); @@ -2014,7 +2004,7 @@ class Server { extension = assetExtension; isOutputModule = value.javascriptModule; } - }); + } } if (isOutputModule) {