diff --git a/website/docs/en/guide/basic/web-workers.mdx b/website/docs/en/guide/basic/web-workers.mdx index 1941481389..4c0463d012 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('/path/to/worker.js')`. + +```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..3ae182243a 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('/path/to/worker.js')`。 + +```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)。