fix: support devServer: false (#5272)

.cspell.json

@@ -66,7 +66,8 @@
     "hoge",
     "subsubcomain",
     "noselect",
-    "commitlint"
+    "commitlint",
+    "eslintcache"
   ],
   "ignorePaths": [
     "CHANGELOG.md",

.gitignore

@@ -20,4 +20,5 @@ test/fixtures/static-config/public/assets/non-exist.txt
 test/fixtures/watch-files-config/public/assets/non-exist.txt
 test/fixtures/reload-config/main.css
 test/fixtures/reload-config-2/main.css
+test/fixtures/worker-config-dev-server-false/public
 !/test/fixtures/static-config/public/node_modules

lib/Server.js

@@ -1720,6 +1720,11 @@ class Server {
         (this.compiler).compilers || [this.compiler];
 
       for (const compiler of compilers) {
+        if (compiler.options.devServer === false) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+
         this.addAdditionalEntries(compiler);
 
         const webpack = compiler.webpack || require("webpack");

package.json

@@ -72,7 +72,7 @@
     "serve-index": "^1.9.1",
     "sockjs": "^0.3.24",
     "spdy": "^4.0.2",
-    "webpack-dev-middleware": "^7.1.0",
+    "webpack-dev-middleware": "^7.4.0",
     "ws": "^8.18.0"
   },
   "devDependencies": {

test/e2e/__snapshots__/target.test.js.snap.webpack5

@@ -72,6 +72,17 @@ exports[`target should work using "webworker" target: console messages 1`] = `
 
 exports[`target should work using "webworker" target: page errors 1`] = `[]`;
 
+exports[`target should work using multi compiler mode with \`web\` and \`webworker\` targets with \`devServer: false\`: console messages 1`] = `
+[
+  "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",
+  "[HMR] Waiting for update signal from WDS...",
+  "Worker said: I'm working before postMessage",
+  "Worker said: Message sent: message",
+]
+`;
+
+exports[`target should work using multi compiler mode with \`web\` and \`webworker\` targets with \`devServer: false\`: page errors 1`] = `[]`;
+
 exports[`target should work using multi compiler mode with \`web\` and \`webworker\` targets: console messages 1`] = `
 [
   "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading enabled, Progress disabled, Overlay enabled.",

test/e2e/target.test.js

@@ -1,12 +1,17 @@
 "use strict";
 
+const path = require("path");
 const webpack = require("webpack");
 const Server = require("../../lib/Server");
 const config = require("../fixtures/client-config/webpack.config");
 const workerConfig = require("../fixtures/worker-config/webpack.config");
+const workerConfigDevServerFalse = require("../fixtures/worker-config-dev-server-false/webpack.config");
 const runBrowser = require("../helpers/run-browser");
 const port = require("../ports-map").target;
 
+const sortByTerm = (data, term) =>
+  data.sort((a, b) => (a.indexOf(term) < b.indexOf(term) ? -1 : 1));
+
 describe("target", () => {
   const targets = [
     false,
@@ -35,10 +40,7 @@ describe("target", () => {
             }
           : {}),
       });
-      const devServerOptions = {
-        port,
-      };
-      const server = new Server(devServerOptions, compiler);
+      const server = new Server({ port }, compiler);
 
       await server.start();
 
@@ -93,10 +95,58 @@ describe("target", () => {
 
   it("should work using multi compiler mode with `web` and `webworker` targets", async () => {
     const compiler = webpack(workerConfig);
-    const devServerOptions = {
-      port,
-    };
-    const server = new Server(devServerOptions, compiler);
+    const server = new Server({ port }, compiler);
+
+    await server.start();
+
+    const { page, browser } = await runBrowser();
+
+    try {
+      const pageErrors = [];
+      const consoleMessages = [];
+
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      await page.goto(`http://127.0.0.1:${port}/`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(
+        sortByTerm(
+          consoleMessages.map((message) => message.text()),
+          "Worker said:",
+        ),
+      ).toMatchSnapshot("console messages");
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+    } catch (error) {
+      throw error;
+    } finally {
+      await browser.close();
+      await server.stop();
+    }
+  });
+
+  it("should work using multi compiler mode with `web` and `webworker` targets with `devServer: false`", async () => {
+    const compiler = webpack(workerConfigDevServerFalse);
+    const server = new Server(
+      {
+        port,
+        static: {
+          directory: path.resolve(
+            __dirname,
+            "../fixtures/worker-config-dev-server-false/public/",
+          ),
+        },
+      },
+      compiler,
+    );
 
     await server.start();
 
@@ -118,9 +168,12 @@ describe("target", () => {
         waitUntil: "networkidle0",
       });
 
-      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
-        "console messages",
-      );
+      expect(
+        sortByTerm(
+          consoleMessages.map((message) => message.text()),
+          "Worker said:",
+        ),
+      ).toMatchSnapshot("console messages");
 
       expect(pageErrors).toMatchSnapshot("page errors");
     } catch (error) {

test/fixtures/worker-config-dev-server-false/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+const myWorker = new Worker("./worker-bundle.js");
+
+myWorker.onmessage = (event) => {
+  console.log(`Worker said: ${event.data}`);
+};
+
+myWorker.postMessage("message");

test/fixtures/worker-config-dev-server-false/webpack.config.js

@@ -0,0 +1,47 @@
+"use strict";
+
+const path = require("path");
+const HTMLGeneratorPlugin = require("../../helpers/html-generator-plugin");
+
+module.exports = [
+  {
+    name: "app",
+    // dependencies: ["worker"],
+    devtool: false,
+    target: "web",
+    entry: "./index.js",
+    mode: "development",
+    context: __dirname,
+    stats: "none",
+    output: {
+      path: path.resolve(__dirname, "./dist/"),
+    },
+    infrastructureLogging: {
+      level: "info",
+      stream: {
+        write: () => {},
+      },
+    },
+    plugins: [new HTMLGeneratorPlugin()],
+  },
+  {
+    name: "worker",
+    devtool: false,
+    target: "webworker",
+    entry: "./worker.js",
+    mode: "development",
+    context: __dirname,
+    stats: "none",
+    output: {
+      path: path.resolve(__dirname, "public"),
+      filename: "worker-bundle.js",
+    },
+    infrastructureLogging: {
+      level: "info",
+      stream: {
+        write: () => {},
+      },
+    },
+    devServer: false,
+  },
+];

test/fixtures/worker-config-dev-server-false/worker.js

@@ -0,0 +1,7 @@
+"use strict";
+
+postMessage("I'm working before postMessage");
+
+onmessage = (event) => {
+  postMessage(`Message sent: ${event.data}`);
+};