close
指南
配置
插件
API
博客
关于
贡献
指南
配置
插件
API
博客
关于
贡献
CC 4.0 许可证

本节内容来自以下链接的内容，并受 CC BY 4.0 许可证约束。

如果未明确说明，以下内容可以被认为是基于原始内容修改和删除的结果。

Web Workers

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

用法

new Worker(new URL('./worker.js', import.meta.url));
new Worker(new URL('./worker.js', import.meta.url), {
  name: 'my-worker', // <-- When the value of the name property can be statically analyzed, the worker's chunk name can be customized with this property to replace the [name] placeholder when the chunk file is generated
});

除了 new Worker() 之外，还支持以下语法

  • new SharedWorker()
  • import { Worker } from "worker_threads": 通常在 Node 环境中使用
  • 在 v1.0.0-alpha.0 中添加
    navigator.serviceWorker.register(): 用于注册 Service Workers

可以使用 module.parser.javascript.worker 提供自定义语法。

例如

信息

选择此语法是为了允许在没有捆绑器的情况下运行代码，它也适用于浏览器中的原生 ECMAScript 模块。

警告

  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 语法时，请务必注意此限制。

  3. 目前不支持 /* webpackEntryOptions: { filename: "workers/[name].js" } */ 魔法注释。

worker-loader

警告

worker-loader 仅作为临时解决方案提供，以方便项目迁移到 Rspack。建议使用 new Worker() 语法。

Rspack 也支持 worker-loader。但是，由于 worker-loader 已经不再维护，请使用 worker-rspack-loader 作为替代。

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

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