在webpack库中加载Web工作人员

Question

我试图从一个自定义npm包中加载一个网络工作人员。

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

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

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

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

{
 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，所以我将验证您是否可以使用工作人员。

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

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

inline选项工作起来很有魅力，但希望如果这不是一种选择，这会有所帮助。

干杯,

机会