網頁工作執行緒

從 webpack 5 開始，你可以使用 Web Workers，而不需要 worker-loader。

語法

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

// or customize the chunk name with magic comments
// see https://webpack.dev.org.tw/api/module-methods/#magic-comments
new Worker(
  /* webpackChunkName: "foo-worker" */ new URL('./worker.js', import.meta.url)
);

語法選擇允許在沒有打包器的狀況下執行程式碼，它也可以在瀏覽器的原生 ECMAScript 模組中使用。

請注意，雖然 Worker API 建議 Worker 建構函式會接受代表腳本 URL 的字串，但在 webpack 5 中，你只能使用 URL。

範例

src/index.js

const worker = new Worker(new URL('./deep-thought.js', import.meta.url));
worker.postMessage({
  question:
    'The Answer to the Ultimate Question of Life, The Universe, and Everything.',
});
worker.onmessage = ({ data: { answer } }) => {
  console.log(answer);
};

src/deep-thought.js

self.onmessage = ({ data: { question } }) => {
  self.postMessage({
    answer: 42,
  });
};

Node.js

Node.js (>= 12.17.0) 支援類似的語法

import { Worker } from 'worker_threads';

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

請注意，這只在 ESM 中可用。CommonJS 語法中的 Worker 不受 webpack 或 Node.js 支援。