在 Webpack 5 中使用包含模块导入的 Web Workers

Question

将应用程序从 Webpack 4 迁移worker-loader到 Webpack 5 后，我现在使用 Webpacks 内置解决方案来导入 Web Worker，因为 Webpack 5 不再支持工作加载程序。

Webpack 提供的解决方案有效，除非我在 Workers 中使用本地模块导入。需要明确的是：

按照Webpack 文档，我像这样导入 Worker：

const worker = new Worker( new URL( "path/to/worker.js", import.meta.url ));

还有一个 Worker 的例子：

import { convenientFunction } from "./local/and/also/used/in/main/app-bundle";

self.addEventListener( "message", e => {
    // whatever Worker should do
});

当我捆绑应用程序并加载 Worker 时，我在控制台中收到以下错误：

1.js:604 Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8080/js/js/node_modules_core-js_modules_es_error_cause_js.js' failed to load.

当我删除导入时它就会消失。根据记录，我可以从 node_modules 导入库，但由于某种原因，看起来 Worker 之外的主应用程序包也使用本地文件导致此错误。

我觉得我忽略了一些非常明显的东西，但从关于 Workers 的斯巴达文档中我不确定该去哪里寻找。

Answer 1

我不认为你可以在普通的 JavaScript 文件中使用 import 你需要一个模块文件检查这个答案是否有帮助：Web Workers - How To Import Modules