如何配置 webpack 5 正确捆绑模块 Web Worker 脚本以导入其他模块？

Question

根据文档，我没有使用worker-loader，我正在尝试使用webpack-5 文档建议的本机方式。

下面是worker脚本在主线程中的用法。

const worker = new window.Worker(
    new URL("../workers/listOperation.worker.js", import.meta.url),
    {
        type: "module",
    },
);
worker.postMessage({ list: hugeList, params: reqData });
worker.onerror = err => console.error(err);
worker.onmessage = e => {
    const { list } = e.data;
    // Usage of `list` from the response
    worker.terminate();
};
return worker;

如果脚本中没有使用导入，它就可以正常工作。但是，当我从本地导入任何节点模块（例如loadash/get）或任何其他函数/常量时，它不起作用，因为输出 webWorker 捆绑文件不会转译和捆绑导入的代码。它保持“导入”声明不变。

下面是工作脚本 ( listOperation.worker.js)

import get from "lodash/get";
import { ANY_CONSTANT } from "../constants"; // This is some local constant

addEventListener("message", e => {
    const { list, params } = e.data;
    
    // Here I have some usage of `get` method from `lodash/get` and ANY_CONSTANT
    
    self.postMessage({
        list: list,
    });
});

如果我将模式放入of规则/\.worker.js$/中，Webpack 会输出如下所示的捆绑文件，浏览器将无法使用该文件。excludebabel-loader

import get from "lodash/get";import{ANY_CONSTANT}from"../constants";addEventListener("message",(e=>{const{list:s,params:t,.......

即使我没有将模式放入of规则/\.worker.js$/中，输出包仍然不包含from的实现或常量的值。它只是使用 cjs 将其输出。excludebabel-loadergetlodash/getrequire

另外，我使用了 asset 模块，这样我就可以将输出文件放在一个目录中，而不是直接放在文件夹的根目录中dist。我的 webpack.config 中的配置更改如下所示。

module.exports = {
    entry: {...},
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: [/(node_modules)/, /\.worker.js$/],
                use: {
                    loader: "babel-loader", // This uses the config defined in babel.config.js
                },
            },
            {
                test: /\.worker.js$/,
                exclude: /(node_modules)/,
                type: "asset/resource",
                generator: {
                    filename: "js/workers/[hash][ext][query]",
                },
            },
        ],
    },
}