在 webpack 库中加载 Web Worker答案

【问题标题】：Load Web Worker inside webpack library在 webpack 库中加载 Web Worker
【发布时间】：2021-09-27 01:38:45
【问题描述】：

我正在尝试从自定义 npm 包中加载网络工作者。

[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 '<'。

我在这里做错了什么？理想情况下，我希望 worker 文件与 npm 包捆绑在一起，因此不需要加载其他文件。怎样才能实现这种行为？

【问题讨论】：

标签： javascript react-native npm webpack web-worker

【解决方案1】：

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

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

不创建附加文件的最简单方法是为工作人员使用inline 选项（也有针对他们的 TS 指南?）。请注意，对于不创建的文件，no-fallback 必须用作 inline 选项的值。

如果这不是一个选项，我可能会考虑 module federation and the dynamic public path。如果这也不可行，那么我建议研究import.meta.resolve 或编写一个插件，在 Webpack 依赖关系图中解析后可以替换代码中的路径。

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

干杯，
机会

【讨论】：