简体中文

CC 4.0 协议声明

本节内容派生于以下链接指向的内容，并遵守 CC BY 4.0 许可证的规定。
https://webpack.docschina.org/guides/web-workers/
以下内容如果没有特殊声明，可以认为都是基于原内容的修改和删减后的结果。

Web Workers

Web Workers 是 Rspack 的一等公民，这意味着你不需要任何的 Loader 就可以直接使用 Web Workers。

使用方式

new Worker(new URL('./worker.js', import.meta.url));

new Worker(new URL('./worker.js', import.meta.url), {
  name: 'my-worker', // <-- 在可静态分析 name 属性的值时，可通过该属性自定义 worker 的 chunk name，用于替换最终 chunk 文件生成时 [name] 占位符
});

除 new Worker() 以外还支持以下语法：

new SharedWorker()
import { Worker } from "worker_thread"：常用于 node 环境
Added in v1.0.0-alpha.0
navigator.serviceWorker.register()：用于注册 Service Worker

可通过 module.parser.javascript.worker 提供自定义语法。

使用示例可参考：

INFO

选择该语法是因为该语法在不使用打包工具时也能运行代码，它可以直接运行在支持 ES modules 的浏览器上运行，是符合标准的 ECMAScript 语法。

WARNING

需要注意的是 new Worker 也可以接受一个 URL 的字符串表示，但在 Rspack 中只支持传入 URL。
Rspack 不支持在 new Worker 中使用变量。例如，以下代码将不起作用：
```
const url = new URL('./path/to/worker.js', import.meta.url);
const worker = new Worker(url);
```
这是因为 Rspack 无法静态分析该语法。在 Rspack 中使用 Worker 语法时，请务必注意此限制。
目前不支持 /* webpackEntryOptions: { filename: "workers/[name].js" } */ 魔法注释

worker-loader

WARNING

worker-loader 仅供作为方便项目迁移至 Rspack 的临时方案，推荐使用 new Worker() 语法。

Rspack 也支持了 worker-loader，不过由于 worker-loader 已不再维护，请使用 worker-rspack-loader 进行替换。

使用 resolveLoader 替换 worker-loader 为 worker-rspack-loader：

module.exports = {
  resolveLoader: {
    alias: {
      'worker-loader': require.resolve('worker-rspack-loader'),
    },
  },
};

ON THIS PAGE

Web Workers#

使用方式#

worker-loader#

Web Workers

使用方式

worker-loader