feat: support for glob support

Author: bjohansebas

lib/Server.js

@@ -3188,8 +3188,16 @@ class Server {
    */
   watchFiles(watchPath, watchOptions = {}) {
     const chokidar = require("chokidar");
+    const { globSync, isDynamicPattern } = require("tinyglobby");
 
-    const watcher = chokidar.watch(watchPath, watchOptions);
+    const paths = Array.isArray(watchPath) ? watchPath : [watchPath];
+    const resolvedPaths = paths.flatMap((path) =>
+      isDynamicPattern(path)
+        ? globSync(path, { cwd: watchOptions.cwd, absolute: true })
+        : path,
+    );
+
+    const watcher = chokidar.watch(resolvedPaths, watchOptions);
 
     // disabling refreshing on changing the content
     if (this.options.liveReload) {

lib/options.json

@@ -850,7 +850,7 @@
           "$ref": "#/definitions/WatchFilesObject"
         }
       ],
-      "description": "Allows to configure list of directories/files to watch for file changes.",
+      "description": "Allows to configure list of globs/directories/files to watch for file changes.",
       "link": "https://webpack.js.org/configuration/dev-server/#devserverwatchfiles"
     },
     "WatchFilesObject": {
@@ -873,7 +873,7 @@
               "minLength": 1
             }
           ],
-          "description": "Path(s) of directories/files to watch for file changes."
+          "description": "Path(s) of globs/directories/files to watch for file changes."
         },
         "options": {
           "type": "object",

migration-v6.md

@@ -37,47 +37,6 @@ This document serves as a migration guide for `webpack-dev-server@6.0.0`.
   };
   ```
 
-- Updated `chokidar` from v3 to v4. Glob patterns are no longer supported in `watchFiles`. If you previously used globs, you can watch a directory and filter with `ignored`:
-
-  v5:
-
-  ```js
-  module.exports = {
-    devServer: {
-      watchFiles: "src/**/*.js",
-    },
-  };
-  ```
-
-  v6:
-
-  ```js
-  module.exports = {
-    devServer: {
-      watchFiles: {
-        paths: "src",
-        options: {
-          ignored: (path, stats) => stats?.isFile() && !path.endsWith(".js"),
-        },
-      },
-    },
-  };
-  ```
-
-  Or resolve the glob before passing it:
-
-  ```js
-  const { globSync } = require("node:fs");
-
-  module.exports = {
-    devServer: {
-      watchFiles: globSync("src/**/*.js"),
-    },
-  };
-  ```
-
-  > **Note:** `fs.globSync` requires Node.js 22+. For Node.js 20, use a package like `fast-glob` or `tinyglobby`.
-
 - Now, webpack-dev-server adds WebSocket communication only when the `target` is set to a web-compatible environment. Previously, it also injected WebSocket communication if `resolve` contained a `conditionNames` entry with `browser` or if `externalsPresets.web` existed.
 
 - When retrieving the configuration in a multi-compiler setup, it will look for one that has a target compatible with a web environment. If it doesn’t find one, it will fall back to the first compiler found by webpack.

package-lock.json

@@ -66,6 +66,7 @@
     "schema-utils": "^4.3.3",
     "selfsigned": "^5.5.0",
     "serve-index": "^1.9.2",
+    "tinyglobby": "^0.2.15",
     "webpack-dev-middleware": "^8.0.2",
     "ws": "^8.20.0"
   },
@@ -85,6 +86,7 @@
     "@types/graceful-fs": "^4.1.9",
     "@types/node": "^24.0.14",
     "@types/node-forge": "^1.3.1",
+    "@types/picomatch": "^4.0.2",
     "@types/trusted-types": "^2.0.7",
     "acorn": "^8.14.0",
     "babel-jest": "^30.0.4",