在 webpack 庫中加載 Web Worker

Question

我正在嘗試從自定義 npm 包中加載 Web Worker。

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

我在 npm 包中使用worker-loader來加載 worker 文件：

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獲取工作人員， ./static/js/myPackage.worker.js找到該文件並引發錯誤Uncaught SyntaxError: Unexpected token '<' 。

我在這里做錯了什么？ 理想情況下，我希望工作文件與 npm 包捆綁在一起，因此不需要加載其他文件。 怎樣才能實現這種行為？

Answer 1

我自己剛剛遇到了這個問題，根據發布帖子的時間，我假設您使用的是 Webpack5。

首先，我會更改規則的順序並仔細檢查它們的規則是否匹配。 其次，由於您使用的是react-native我將驗證您是否可以使用工人。

不創建附加文件的最簡單方法是為工作程序使用內聯選項（也有一個關於 TS 的指南 😉）。 請注意，對於不創建的文件，必須使用no-fallback作為inline選項的值。

如果這不是一個選項，我可能會研究module federation 和 dynamic public path 。 如果這也不可行，那么我建議查看import.meta.resolve或編寫一個插件，該插件可以在 Webpack 依賴圖中解析后替換代碼中的路徑。

inline選項就像一個魅力，但希望這會有所幫助，如果這不是一個選項。

干杯，
機會