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 提供自定义语法。

使用示例可参考：

• examples/worker
• examples/monaco-editor-js
• examples/monaco-editor-ts-react

INFO

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

WARNING

1. 需要注意的是 new Worker 也可以接受一个 URL 的字符串表示，但在 Rspack 中只支持传入 URL。

2. Rspack 不支持在 new Worker 中使用变量。例如，以下代码将不起作用：

    const url = new URL('./path/to/worker.js', import.meta.url);
    const worker = new Worker(url);

这是因为 Rspack 无法静态分析该语法。在 Rspack 中使用 Worker 语法时，请务必注意此限制。

1. 目前不支持 /* 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'),
    },
  },
};