Webpack Web Workers

從 webpack 5 開(kāi)始，你可以使用 Web Workers 代替 worker-loader。

語(yǔ)法

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

選擇這種語(yǔ)法是為了實(shí)現(xiàn)不使用 bundler 就可以運(yùn)行代碼，它也可以在瀏覽器中的原生 ECMAScript 模塊中使用。

請(qǐng)注意，雖然 Worker API 建議 Worker 構(gòu)造函數(shù)接受表示 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） 也支持類(lèi)似的語(yǔ)法：

import { Worker } from 'worker_threads';

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

請(qǐng)注意，這僅在 ESM 中可用。但不可用于 ComonnJS，無(wú)論 webpack 還是 Node.js 均是如此。