没有 `Worker-Loader` 的 Webpack 中的 Web Worker

Question

脚本如何在 Web Workers 脚本中使用 Javascript imports / require 并将其捆绑到使用 Webpack 而无需使用 Worker-Loader 或任何其他 "plugin" 抽象 — 仅使用浏览器 Web Worker API?

通过 Webpack，我能够生成两个脚本：main.js 和 worker.js。 Webpack 文件设置为转译这两个文件。

在main.js中实例化一个新的workerconst worker = new Worker('worker.js')。

Worker 脚本很简单：

/// worker.js

onmessage = function foo() {
  postMessage('test');
};

在 main.js 中，postMessage() 按预期工作。

但是一旦将任何模块导入到 worker 中，事情就会崩溃。

/// worker.js

import bar from 'bar';

onmessage = function foo() {
  postMessage('test');
};

Answer 1

有一个 type: "module" 选项可以传递给 Worker's constructor:

const worker = new Worker( url, { type: 'module' } );

Web Worker in Webpack without `Worker-Loader`