feat: enhance watchFiles option to support ignored patterns with glob strings

Author: bjohansebas

lib/Server.js

@@ -3190,12 +3190,24 @@ class Server {
     const chokidar = require("chokidar");
     const { globSync, isDynamicPattern } = require("tinyglobby");
 
-    const paths = Array.isArray(watchPath) ? watchPath : [watchPath];
-    const resolvedPaths = paths.flatMap((path) =>
-      isDynamicPattern(path)
-        ? globSync(path, { cwd: watchOptions.cwd, absolute: true })
-        : path,
-    );
+    const resolveGlobs = (/** @type {string | string[]} */ input) =>
+      (Array.isArray(input) ? input : [input]).flatMap((path) =>
+        typeof path === "string" && isDynamicPattern(path)
+          ? globSync(path, { cwd: watchOptions.cwd, absolute: true })
+          : path,
+      );
+
+    const resolvedPaths = resolveGlobs(watchPath);
+
+    if (typeof watchOptions.ignored === "string") {
+      watchOptions.ignored = resolveGlobs(watchOptions.ignored);
+    } else if (Array.isArray(watchOptions.ignored)) {
+      watchOptions.ignored = watchOptions.ignored.flatMap((item) =>
+        typeof item === "string" && isDynamicPattern(item)
+          ? globSync(item, { cwd: watchOptions.cwd, absolute: true })
+          : item,
+      );
+    }
 
     const watcher = chokidar.watch(resolvedPaths, watchOptions);
 

test/e2e/__snapshots__/watch-files.test.js.snap.webpack5

@@ -42,6 +42,18 @@ exports[`watchFiles option should work with directory and ignored option to filt
 
 exports[`watchFiles option should work with directory and ignored option to filter files should reload when file content is changed: response status 1`] = `200`;
 
+exports[`watchFiles option should work with ignored option using glob string should not reload when an ignored glob file is changed: response status 1`] = `200`;
+
+exports[`watchFiles option should work with ignored option using glob string should reload when file content is changed: console messages 1`] = `
+[
+  "Hey.",
+]
+`;
+
+exports[`watchFiles option should work with ignored option using glob string should reload when file content is changed: page errors 1`] = `[]`;
+
+exports[`watchFiles option should work with ignored option using glob string should reload when file content is changed: response status 1`] = `200`;
+
 exports[`watchFiles option should work with object with multiple paths should reload when file content is changed: console messages 1`] = `
 [
   "Hey.",

test/e2e/watch-files.test.js

@@ -415,6 +415,119 @@ describe("watchFiles option", () => {
     });
   });
 
+  describe("should work with ignored option using glob string", () => {
+    const file = path.join(watchDir, "assets/example.txt");
+    const ignoredFile = path.join(watchDir, "assets/example.js");
+    let compiler;
+    let server;
+    let page;
+    let browser;
+    let pageErrors;
+    let consoleMessages;
+
+    beforeEach(async () => {
+      compiler = webpack(config);
+
+      server = new Server(
+        {
+          watchFiles: {
+            paths: watchDir,
+            options: {
+              ignored: `${watchDir}/**/*.js`,
+            },
+          },
+          port,
+        },
+        compiler,
+      );
+
+      await server.start();
+
+      ({ page, browser } = await runBrowser());
+
+      pageErrors = [];
+      consoleMessages = [];
+    });
+
+    afterEach(async () => {
+      await browser.close();
+      await server.stop();
+      fs.truncateSync(file);
+    });
+
+    it("should reload when file content is changed", async () => {
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      const response = await page.goto(`http://localhost:${port}/`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      expect(consoleMessages.map((message) => message.text())).toMatchSnapshot(
+        "console messages",
+      );
+
+      expect(pageErrors).toMatchSnapshot("page errors");
+
+      // change file content
+      fs.writeFileSync(file, "Kurosaki Ichigo", "utf8");
+
+      await new Promise((resolve) => {
+        server.staticWatchers[0].on("change", async (changedPath) => {
+          // page reload
+          await page.waitForNavigation({ waitUntil: "networkidle0" });
+
+          expect(changedPath).toBe(file);
+
+          resolve();
+        });
+      });
+    });
+
+    it("should not reload when an ignored glob file is changed", async () => {
+      page
+        .on("console", (message) => {
+          consoleMessages.push(message);
+        })
+        .on("pageerror", (error) => {
+          pageErrors.push(error);
+        });
+
+      const response = await page.goto(`http://localhost:${port}/`, {
+        waitUntil: "networkidle0",
+      });
+
+      expect(response.status()).toMatchSnapshot("response status");
+
+      // change ignored file content
+      fs.writeFileSync(ignoredFile, "// changed", "utf8");
+
+      // wait a bit to ensure no reload happens
+      await new Promise((resolve) => {
+        let changed = false;
+
+        server.staticWatchers[0].on("change", () => {
+          changed = true;
+        });
+
+        setTimeout(() => {
+          expect(changed).toBe(false);
+          resolve();
+        }, 2000);
+      });
+
+      // restore file
+      fs.writeFileSync(ignoredFile, "// test file\n", "utf8");
+    });
+  });
+
   describe("should not crash if file doesn't exist", () => {
     const nonExistFile = path.join(watchDir, "assets/non-exist.txt");
     let compiler;