docs: add guide for using Web Workers

website/docs/en/config/output/target.mdx

@@ -76,9 +76,9 @@ When `target` is set to `'node'`, Rsbuild will:
 
 Refers to the build target running in the [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) environment.
 
-:::tip Web Worker
-A web worker is a type of JavaScript program that runs in the background, independently of other scripts, without affecting the performance of the page. This makes it possible to run long-running scripts, such as ones that handle complex calculations or access remote resources, without blocking the user interface or other scripts. Web workers provide an easy way to run tasks in the background and improve the overall performance of web applications.
-:::
+import WebWorker from '@en/shared/webWorker.mdx';
+
+<WebWorker />
 
 When `target` is set to `'web-worker'`, Rsbuild will:
 

website/docs/en/guide/basic/_meta.json

@@ -14,6 +14,7 @@
   "typescript",
   "tailwindcss",
   "unocss",
+  "web-worker",
   "static-deploy",
   "upgrade-rsbuild"
 ]

website/docs/en/guide/basic/web-worker.mdx

@@ -0,0 +1,50 @@
+# Use Web Worker
+
+This chapter introduces how to configure and use [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) in Rsbuild project.
+
+import WebWorker from '@en/shared/webWorker.mdx';
+
+<WebWorker />
+
+## Use Web Worker
+
+[Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) is first-class citizen of Rspack, which means you don't need any loader to use Web Workers directly in Rspack / Rsbuild project.
+
+For example, create a file called `worker.js`:
+
+```js title=worker.js
+self.onmessage = (event) => {
+  const result = event.data * 2;
+  self.postMessage(result);
+};
+```
+
+Then use this Worker in the main thread:
+
+```js
+const worker = new Worker(new URL('./worker.js', import.meta.url));
+
+worker.onmessage = (event) => {
+  console.log('The results from Workers:', event.data);
+};
+
+worker.postMessage(10);
+```
+
+:::tip
+When you use Web Worker, you may encounter CORS exceptions. In this case, you can use [import-web-worker](https://github.com/jantimon/remote-web-worker) or refer to [Discussions -webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) to get the solution.
+:::
+
+## Build Web Worker outputs
+
+Rsbuild supports building Web Worker outputs independently, which is helpful when you need to provide Web Worker outputs for use by other applications.
+
+You can set Rsbuild's [output.target](/config/output/target) configuration to `'web-worker'`, and Rsbuild will generate build outputs suitable for the Web Worker environment.
+
+```ts
+export default {
+  output: {
+    target: 'web-worker',
+  },
+};
+```

website/docs/en/shared/webWorker.mdx

@@ -0,0 +1,3 @@
+:::tip Web Worker
+A web worker is a type of JavaScript program that runs in the background, independently of other scripts, without affecting the performance of the page. This makes it possible to run long-running scripts, such as ones that handle complex calculations or access remote resources, without blocking the user interface or other scripts. Web workers provide an easy way to run tasks in the background and improve the overall performance of web applications.
+:::

website/docs/zh/config/output/target.mdx

@@ -76,9 +76,9 @@ export default {
 
 指运行在 [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) 环境的产物。
 
-:::tip Web Worker
-Web Worker 是一种 JavaScript API，它允许网页在后台线程中执行脚本，与主线程（网页）分离。这意味着，您可以使用 Web Worker 来执行计算密集型或长时间运行的任务，而无需阻塞主线程，进而影响网页的性能。
-:::
+import WebWorker from '@zh/shared/webWorker.mdx';
+
+<WebWorker />
 
 当 `target` 设置为 `'web-worker'` 时，Rsbuild 会进行以下处理：
 

website/docs/zh/guide/basic/_meta.json

@@ -14,6 +14,7 @@
   "typescript",
   "tailwindcss",
   "unocss",
+  "web-worker",
   "static-deploy",
   "upgrade-rsbuild"
 ]

website/docs/zh/guide/basic/web-worker.mdx

@@ -0,0 +1,50 @@
+# 使用 Web Worker
+
+本文将介绍在 Rsbuild 项目中如何配置和使用 [Web Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers)。
+
+import WebWorker from '@zh/shared/webWorker.mdx';
+
+<WebWorker />
+
+## 使用 Web Worker
+
+[Web Worker](https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) 是 Rspack 的一等公民，这意味着你不需要任何的 Loader 就可以直接在 Rspack / Rsbuild 项目中使用 Web Worker。详情可参考 [Rspack - Web Worker](https://rspack.dev/zh/guide/features/web-workers)。
+
+例如，创建一个名为 worker.js 的文件：
+
+```js title=worker.js
+self.onmessage = (event) => {
+  const result = event.data * 2;
+  self.postMessage(result);
+};
+```
+
+然后在主线程中使用这个 Worker：
+
+```js
+const worker = new Worker(new URL('./worker.js', import.meta.url));
+
+worker.onmessage = (event) => {
+  console.log('The results from Workers:', event.data);
+};
+
+worker.postMessage(10);
+```
+
+:::tip
+当你在使用 Web Worker 时可能遇到跨域问题，此时可以使用 [import-web-worker](https://github.com/jantimon/remote-web-worker) 或参考 [Discussions - webpack 5 web worker support for CORS?](https://github.com/webpack/webpack/discussions/14648) 获得解决方案。
+:::
+
+## 构建 Web Worker 产物
+
+Rsbuild 支持独立构建 Web Worker 产物，这在你需要将 Web Worker 产物提供给其他应用使用时很有帮助。
+
+将 Rsbuild 的 [output.target](/config/output/target) 配置项设置为 `'web-worker'` 即可生成适用于 Web Worker 环境的构建产物。
+
+```ts
+export default {
+  output: {
+    target: 'web-worker',
+  },
+};
+```

website/docs/zh/shared/webWorker.mdx

@@ -0,0 +1,3 @@
+:::tip Web Worker
+Web Worker 是一种 JavaScript API，它允许网页在后台线程中执行脚本，与主线程（网页）分离。这意味着，您可以使用 Web Worker 来执行计算密集型或长时间运行的任务，而无需阻塞主线程，进而影响网页的性能。
+:::