webpack · alexander-akait · Aug 19, 2021 · Aug 19, 2021
diff --git a/test/e2e/lazy-compilation.test.js b/test/e2e/lazy-compilation.test.js
@@ -2,19 +2,18 @@
 
 const webpack = require("webpack");
 const Server = require("../../lib/Server");
-const config = require("../fixtures/client-config/webpack.config");
+const lazyCompilationSingleEntryConfig = require("../fixtures/lazy-compilation-single-entry/webpack.config");
+const lazyCompilationMultipleEntriesConfig = require("../fixtures/lazy-compilation-multiple-entries/webpack.config");
 const runBrowser = require("../helpers/run-browser");
 const port = require("../ports-map")["lazy-compilation"];
+// const isWebpack5 = require("../helpers/isWebpack5");
+
+// const itOnlyWebpack5 = isWebpack5 ? it : it.skip;
 
 describe("lazy compilation", () => {
   // TODO jest freeze due webpack do not close `eventsource`, we should uncomment this after fix it on webpack side
-  it.skip(`should work`, async () => {
-    const compiler = webpack({
-      ...config,
-      experiments: {
-        lazyCompilation: true,
-      },
-    });
+  it.skip(`should work with single entry`, async () => {
+    const compiler = webpack(lazyCompilationSingleEntryConfig);
     const server = new Server({ port }, compiler);
 
     await server.start();
@@ -32,7 +31,7 @@ describe("lazy compilation", () => {
         pageErrors.push(error);
       });
 
-    await page.goto(`http://127.0.0.1:${port}/main`, {
+    await page.goto(`http://127.0.0.1:${port}/test.html`, {
       waitUntil: "domcontentloaded",
     });
     await new Promise((resolve) => {
@@ -51,4 +50,58 @@ describe("lazy compilation", () => {
     await browser.close();
     await server.stop();
   });
+
+  it.skip(`should work with multiple entries`, async () => {
+    const compiler = webpack(lazyCompilationMultipleEntriesConfig);
+    const server = new Server({ port }, compiler);
+
+    await server.start();
+
+    const { page, browser } = await runBrowser();
+
+    const pageErrors = [];
+    const consoleMessages = [];
+
+    page
+      .on("console", (message) => {
+        consoleMessages.push(message.text());
+      })
+      .on("pageerror", (error) => {
+        pageErrors.push(error);
+      });
+
+    await page.goto(`http://127.0.0.1:${port}/test-one.html`, {
+      waitUntil: "domcontentloaded",
+    });
+    await new Promise((resolve) => {
+      const interval = setInterval(() => {
+        console.log(consoleMessages);
+        if (consoleMessages.includes("One.")) {
+          clearInterval(interval);
+
+          resolve();
+        }
+      }, 100);
+    });
+
+    await page.goto(`http://127.0.0.1:${port}/test-two.html`, {
+      waitUntil: "domcontentloaded",
+    });
+    await new Promise((resolve) => {
+      const interval = setInterval(() => {
+        console.log(consoleMessages);
+        if (consoleMessages.includes("Two.")) {
+          clearInterval(interval);
+
+          resolve();
+        }
+      }, 100);
+    });
+
+    expect(consoleMessages).toMatchSnapshot("console messages");
+    expect(pageErrors).toMatchSnapshot("page errors");
+
+    await browser.close();
+    await server.stop();
+  });
 });
diff --git a/test/fixtures/lazy-compilation-multiple-entries/one.js b/test/fixtures/lazy-compilation-multiple-entries/one.js
@@ -0,0 +1,3 @@
+"use strict";
+
+console.log("One.");
diff --git a/test/fixtures/lazy-compilation-multiple-entries/two.js b/test/fixtures/lazy-compilation-multiple-entries/two.js
@@ -0,0 +1,3 @@
+"use strict";
+
+console.log("Two.");
diff --git a/test/fixtures/lazy-compilation-multiple-entries/webpack.config.js b/test/fixtures/lazy-compilation-multiple-entries/webpack.config.js
@@ -0,0 +1,85 @@
+"use strict";
+
+const webpack = require("webpack");
+
+const isWebpack5 = webpack.version.startsWith("5");
+
+const oneHTMLContent = `
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8'>
+    <title>test</title>
+    <script src="one.js"></script>
+  </head>
+  <body></body>
+</html>
+`;
+const twoHTMLContent = `
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8'>
+    <title>test</title>
+    <script src="two.js"></script>
+  </head>
+  <body></body>
+</html>
+`;
+
+module.exports = {
+  devtool: false,
+  mode: "development",
+  context: __dirname,
+  stats: "none",
+  entry: {
+    one: "./one.js",
+    two: "./two.js",
+  },
+  output: {
+    path: "/",
+  },
+  experiments: {
+    lazyCompilation: true,
+  },
+  infrastructureLogging: isWebpack5
+    ? {
+        level: "info",
+        stream: {
+          write: () => {},
+        },
+      }
+    : {
+        level: "info",
+      },
+  plugins: [
+    {
+      apply(compiler) {
+        const pluginName = "html-generator-plugin-test";
+        const oneFilename = "test-one.html";
+        const twoFilename = "test-two.html";
+
+        compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+          const { RawSource } = compiler.webpack.sources;
+
+          compilation.hooks.processAssets.tap(
+            {
+              name: pluginName,
+              stage:
+                compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+            },
+            () => {
+              const oneSource = new RawSource(oneHTMLContent);
+
+              compilation.emitAsset(oneFilename, oneSource);
+
+              const twoSource = new RawSource(twoHTMLContent);
+
+              compilation.emitAsset(twoFilename, twoSource);
+            }
+          );
+        });
+      },
+    },
+  ],
+};
diff --git a/test/fixtures/lazy-compilation-single-entry/entry.js b/test/fixtures/lazy-compilation-single-entry/entry.js
@@ -0,0 +1,3 @@
+"use strict";
+
+console.log("Hey.");
diff --git a/test/fixtures/lazy-compilation-single-entry/webpack.config.js b/test/fixtures/lazy-compilation-single-entry/webpack.config.js
@@ -0,0 +1,66 @@
+"use strict";
+
+const webpack = require("webpack");
+
+const isWebpack5 = webpack.version.startsWith("5");
+
+const HTMLContent = `
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8'>
+    <title>test</title>
+    <script src="main.js"></script>
+  </head>
+  <body></body>
+</html>
+`;
+
+module.exports = {
+  devtool: false,
+  mode: "development",
+  context: __dirname,
+  stats: "none",
+  entry: "./entry.js",
+  output: {
+    path: "/",
+  },
+  experiments: {
+    lazyCompilation: true,
+  },
+  infrastructureLogging: isWebpack5
+    ? {
+        level: "info",
+        stream: {
+          write: () => {},
+        },
+      }
+    : {
+        level: "info",
+      },
+  plugins: [
+    {
+      apply(compiler) {
+        const pluginName = "html-generator-plugin-test";
+        const filename = "test.html";
+
+        compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
+          const { RawSource } = compiler.webpack.sources;
+
+          compilation.hooks.processAssets.tap(
+            {
+              name: pluginName,
+              stage:
+                compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
+            },
+            () => {
+              const source = new RawSource(HTMLContent);
+
+              compilation.emitAsset(filename, source);
+            }
+          );
+        });
+      },
+    },
+  ],
+};