在webpack库中加载Web Worker

Question

我正试图从自定义npm包中加载一个web工作程序。

[App] -> [my npm package -> load worker]

我在npm包中使用worker-loader来加载工作文件：

import Worker from 'worker-loader!./myPackage.worker';
const worker = new Worker(); 

我在本地npm包中的webpack配置：

{
entry: './packages/myPackage/src/index.ts',
output: {
library: 'myPackage',
libraryTarget: 'umd',
path: path.resolve(__dirname, './packages/myPackage/dist'),
filename: "index.js"
},
module: {
rules: [
{ 
test: /.tsx?$/,
loader: "ts-loader"
},
{
test: /.worker.js$/,
loader: 'worker-loader',
options: {
inline: "no-fallback"
}
},
]
},        
}

不幸的是，每次我这样做时，我的应用程序都无法定位工作文件。应用程序正在尝试从./static/js/myPackage.worker.js获取工作进程，但未找到文件，并引发错误Uncaught SyntaxError: Unexpected token '<'。

我在这里做错了什么？理想情况下，我希望工作文件与npm包捆绑在一起，这样就不需要加载其他文件。如何实现这种行为？

Answer 1

我自己刚刚遇到这个问题，根据帖子的发布时间，我假设你使用的是Webpack5。

首先，我会更改规则的顺序，并仔细检查它们的规则是否匹配。其次，由于您使用的是react-native，我将验证您是否可以使用worker。

不创建额外文件的最简单方法是为工作者使用内联选项(TS也有相关指南)。请注意，对于不创建的文件，必须将no-fallback用作inline选项的值。

如果这不是一个选项，我可能会研究模块联合和动态公共路径。如果这也是不可行的，那么我建议研究import.meta.resolve，或者编写一个插件，在Webpack依赖关系图中解析后可以替换代码中的路径。

inline选项就像一个符咒，但希望如果这不是一个选项，这会有所帮助。

干杯，
机会