从 webpack 5 开始,你可以使用 Web Workers 代替 worker-loader
。
new Worker(new URL('./worker.js', import.meta.url));
选择这种语法是为了实现不使用 bundler 就可以运行代码,它也可以在浏览器中的原生 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(>= 12.17.0) 也支持类似的语法:
import { Worker } from 'worker_threads';
new Worker(new URL('./worker.js', import.meta.url));
请注意,这仅在 ESM 中可用。但不可用于 CommonJS,无论 webpack 还是 Node.js 均是如此。
Webpack 5 现已正式发布。请阅读我们的 发布公告。如还未准备升级,请阅读 webpack 4 文档。