CC 4.0 授權

本節內容衍生自以下連結的內容，並受 CC BY 4.0 授權條款約束。
https://webpack.dev.org.tw/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', // <-- 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 提供自訂語法。

範例

資訊

選擇此語法是為了允許在沒有 bundler 的情況下執行程式碼，它也可用於瀏覽器中的原生 ECMAScript 模組。

警告

請注意，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" } */ magic comments。

worker-loader

警告

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'),
    },
  },
};

本頁內容

Web Workers#

使用方式#

worker-loader#

Web Workers

使用方式

worker-loader