From 3d6061b3d6936d34e16c920cefed6c7670dae0b2 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 3 Jun 2025 19:35:51 +0800 Subject: [PATCH 1/2] docs: clarify usage of worker-rspack-loader --- website/docs/en/guide/basic/web-workers.mdx | 21 ++++++++++++++++----- website/docs/zh/guide/basic/web-workers.mdx | 21 ++++++++++++++++----- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/website/docs/en/guide/basic/web-workers.mdx b/website/docs/en/guide/basic/web-workers.mdx index 1941481389..d15b91075c 100644 --- a/website/docs/en/guide/basic/web-workers.mdx +++ b/website/docs/en/guide/basic/web-workers.mdx @@ -37,17 +37,16 @@ For more details, please refer to [Rspack - Web Workers](https://rspack.rs/guide ### Using worker-loader -> `worker-loader` is no longer maintained, it is recommended to use the `new Worker()` syntax. +If your project already uses `worker-loader`, or you want to use the `inline` and other features provided by `worker-loader`, you can use [worker-rspack-loader](https://github.com/rspack-contrib/worker-rspack-loader) as an alternative to `worker-loader` in Rsbuild projects. -If your project already uses `worker-loader`, or you want to use the `inline` and other features provided by `worker-loader`, you can use [worker-rspack-loader](https://github.com/rspack-contrib/worker-rspack-loader) as an alternative to `worker-loader` in the Rsbuild or Rspack project. - -```ts +```ts title="rsbuild.config.ts" export default { tools: { rspack: { resolveLoader: { alias: { - // Modify the resolution of worker-loader in the inline loader, such as `worker-loader!pdfjs-dist/es5/build/pdf.worker.js` + // Modify the resolution of worker-loader in the inline loader + // such as `worker-loader!pdfjs-dist/es5/build/pdf.worker.js` 'worker-loader': require.resolve('worker-rspack-loader'), }, }, @@ -64,6 +63,18 @@ export default { }; ``` +When using `worker-rspack-loader`, you need to use the `import` to import the Web Worker file, instead of the `new Worker()`. + +```js +import Worker from './file.worker.js'; + +const worker = new Worker(); + +worker.postMessage({ a: 1 }); +``` + +> `worker-loader` is no longer maintained, if you don't need to inline Web Workers, it is recommended to use the `new Worker()` syntax. + ### Loading scripts from remote URLs (cross-origin) By default, the worker script will be emitted as a separate chunk. This script supports uploading to CDN, but must obey the [same-origin policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). diff --git a/website/docs/zh/guide/basic/web-workers.mdx b/website/docs/zh/guide/basic/web-workers.mdx index a585472970..7800cc2cf0 100644 --- a/website/docs/zh/guide/basic/web-workers.mdx +++ b/website/docs/zh/guide/basic/web-workers.mdx @@ -35,17 +35,16 @@ worker.postMessage(10); ### 使用 worker-loader -> `worker-loader` 已不再维护，推荐使用 `new Worker()` 语法。 +如果你的项目已经在使用 `worker-loader`，或者希望使用 `worker-loader` 的 `inline` 等能力，在 Rsbuild 项目中可以使用 `worker-loader` 的替代方案 [worker-rspack-loader](https://github.com/rspack-contrib/worker-rspack-loader)。 -如果你的项目已经在使用 `worker-loader`，或者希望使用 `worker-loader` 内的 `inline` 等配置能力，在 Rsbuild / Rspack 项目中可以使用 `worker-loader` 的替代方案 [worker-rspack-loader](https://github.com/rspack-contrib/worker-rspack-loader)。 - -```ts +```ts title="rsbuild.config.ts" export default { tools: { rspack: { resolveLoader: { alias: { - // 修改内联 loader 中 worker-loader 的指向，如 `worker-loader!pdfjs-dist/es5/build/pdf.worker.js` + // 修改内联 loader 中 worker-loader 的指向 + // 如 `worker-loader!pdfjs-dist/es5/build/pdf.worker.js` 'worker-loader': require.resolve('worker-rspack-loader'), }, }, @@ -62,6 +61,18 @@ export default { }; ``` +使用 `worker-rspack-loader` 时，需要使用 `import` 来引入 Web Worker 文件，而不是 `new Worker()`。 + +```js +import Worker from './file.worker.js'; + +const worker = new Worker(); + +worker.postMessage({ a: 1 }); +``` + +> `worker-loader` 已不再维护，如果你没有内联 Web Workers 的需求，推荐使用 `new Worker()` 语法。 + ### 从远程 URL 加载脚本（跨域） 默认情况下，worker 脚本会输出成一个独立的 chunk。worker 脚本支持上传到 CDN，但在加载远程脚本时需要遵守[同源策略](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy)。 From 4f77262110a6a0e47f306a8f59a22801735ba06d Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 3 Jun 2025 20:13:50 +0800 Subject: [PATCH 2/2] docs: fix --- website/docs/en/guide/basic/web-workers.mdx | 2 +- website/docs/zh/guide/basic/web-workers.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/website/docs/en/guide/basic/web-workers.mdx b/website/docs/en/guide/basic/web-workers.mdx index d15b91075c..4c0463d012 100644 --- a/website/docs/en/guide/basic/web-workers.mdx +++ b/website/docs/en/guide/basic/web-workers.mdx @@ -63,7 +63,7 @@ export default { }; ``` -When using `worker-rspack-loader`, you need to use the `import` to import the Web Worker file, instead of the `new Worker()`. +When using `worker-rspack-loader`, you need to use the `import` to import the Web Worker file, instead of the `new Worker('/path/to/worker.js')`. ```js import Worker from './file.worker.js'; diff --git a/website/docs/zh/guide/basic/web-workers.mdx b/website/docs/zh/guide/basic/web-workers.mdx index 7800cc2cf0..3ae182243a 100644 --- a/website/docs/zh/guide/basic/web-workers.mdx +++ b/website/docs/zh/guide/basic/web-workers.mdx @@ -61,7 +61,7 @@ export default { }; ``` -使用 `worker-rspack-loader` 时，需要使用 `import` 来引入 Web Worker 文件，而不是 `new Worker()`。 +使用 `worker-rspack-loader` 时，需要使用 `import` 来引入 Web Worker 文件，而不是 `new Worker('/path/to/worker.js')`。 ```js import Worker from './file.worker.js';