docs: add examples for watchOptions (#8532)

Author: chenjiahan

website/docs/en/config/watch.mdx

@@ -21,7 +21,7 @@ module.exports = {
 ```
 
 :::tip
-In `@rspack/dev-server` watch mode is enabled by default.
+`watch` is enabled by default when using `@rspack/dev-server`.
 :::
 
 ## watchOptions
@@ -59,19 +59,89 @@ module.exports = {
 ### watchOptions.ignored
 
 - **Type:** `RegExp`, `string`, `string[]`
+- **Default:** `undefined`
 
-The path that matches is excluded while watching.
+The path that matches is excluded while watching. Watching many files can result in a lot of CPU or memory usage, it is recommended to exclude a huge folder like `node_modules` and `.git` using a regular expression:
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    ignored: /[\\/](?:\.git|node_modules)[\\/]/,
+  },
+};
+```
+
+Alternatively, a glob pattern may be used:
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    ignored: '**/node_modules',
+  },
+};
+```
+
+It is also possible to use multiple glob patterns:
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    ignored: ['**/files/**/*.js', '**/node_modules'],
+  },
+};
+```
+
+In addition, you can specify one or more absolute paths:
+
+```js title=rspack.config.js
+const path = require('node:path');
+
+module.exports = {
+  //...
+  watchOptions: {
+    ignored: [path.posix.resolve(__dirname, './ignored-dir')],
+  },
+};
+```
+
+When using glob patterns, Rspack convert them to regular expressions with [glob-to-regexp](https://github.com/fitzgen/glob-to-regexp), so make sure to get yourself familiar with it before you use glob patterns for watchOptions.ignored.
 
 ### watchOptions.poll
 
 - **Type:** `boolean`, `number`
 - **Default:** `false`
 
-Whether to watch by polling, the default polling interval for `true` is 5007 milliseconds.
+Whether to watch by polling.
+
+When set to `true`, the default polling interval is 5007 milliseconds.
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    poll: true,
+  },
+};
+```
+
+It can also set a custom polling interval:
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    poll: 1000, // Check for changes every second
+  },
+};
+```
 
 ### watchOptions.followSymlinks
 
 - **Type:** `boolean`
+- **Default:** `false`
 
 Follow symbolic links while looking for a file. This is usually not needed as Rspack already resolves symlinks with [resolve.symlinks](/config/resolve#resolvesymlinks).
 

website/docs/zh/config/watch.mdx

@@ -4,7 +4,7 @@ import WebpackLicense from '@components/WebpackLicense';
 
 # Watch
 
-监听：该选项用于监听文件变更并在变更时触发重新编译。
+监听：该选项用于监听文件变更，并在变更时触发重新编译。
 
 ## watch
 
@@ -21,7 +21,7 @@ module.exports = {
 ```
 
 :::tip
-在使用 `@rspack/dev-server` 时，watch 默认为 true。
+在使用 `@rspack/dev-server` 时，`watch` 默认为 true。
 :::
 
 ## watchOptions
@@ -59,21 +59,91 @@ module.exports = {
 ### watchOptions.ignored
 
 - **类型：** `RegExp`, `string`, `string[]`
+- **默认值：** `undefined`
 
-监听时排除匹配到的路径。
+监听时排除匹配到的路径。监听大量文件可能会导致 CPU 或内存使用率过高，建议使用正则表达式排除像 `node_modules` 和 `.git` 这样的大文件夹：
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    ignored: /[\\/](?:\.git|node_modules)[\\/]/,
+  },
+};
+```
+
+此外，可以使用 glob 匹配：
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    ignored: '**/node_modules',
+  },
+};
+```
+
+还可以使用多个 glob 匹配：
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    ignored: ['**/files/**/*.js', '**/node_modules'],
+  },
+};
+```
+
+还可以指定为一个或多个绝对路径：
+
+```js title=rspack.config.js
+const path = require('node:path');
+
+module.exports = {
+  //...
+  watchOptions: {
+    ignored: [path.posix.resolve(__dirname, './ignored-dir')],
+  },
+};
+```
+
+当使用 glob 匹配时，Rspack 会将它们转换为正则表达式，因此在使用 glob 匹配之前，请确保你熟悉 [glob-to-regexp](https://github.com/fitzgen/glob-to-regexp)。
 
 ### watchOptions.poll
 
 - **类型：** `boolean`, `number`
 - **默认值：** `false`
 
-是否通过轮询进行监听，`true` 时默认的轮询间隔为 5007 毫秒。
+是否通过轮询进行监听。
+
+当设置为 `true` 时，默认的轮询间隔为 5007 毫秒。
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    poll: true,
+  },
+};
+```
+
+还可以设置一个自定义的轮询间隔：
+
+```js title=rspack.config.js
+module.exports = {
+  //...
+  watchOptions: {
+    poll: 1000, // 每秒检查一次
+  },
+};
+```
 
 ### watchOptions.followSymlinks
 
 - **类型：** `boolean`
+- **默认值：** `false`
 
-根据软链接查找文件。这通常是不需要的，因为 Rspack 已经使用 [resolve.symlinks](/config/resolve#resolvesymlinks) 解析了软链接。
+是否根据软链接查找文件。这通常是不需要的，因为 Rspack 已经使用 [resolve.symlinks](/config/resolve#resolvesymlinks) 解析了软链接。
 
 ```js title=rspack.config.js
 module.exports = {