在类库中使用web-worker，React应用无法找到chunk文件问题

问题原因 #

类库打包时设置的publicPath: "/"为绝对根路径，但React应用中类库脚本通常部署在node_modules目录下，并非根目录，导致Web Worker的chunk请求路径错误，无法匹配到实际文件。同时默认打包配置未确保Worker文件能被宿主应用正确解析。

解决步骤 #

1. 修改类库Webpack的Output配置 #

将publicPath改为相对路径，让Worker chunk的请求路径自动适配类库脚本在宿主应用中的位置：

const path = require('path');

const config = {
  mode: 'production',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /.ts$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-env', '@babel/preset-typescript'],
        },
      },
    ],
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, 'dist'),
    publicPath: "./", // 改为相对路径
    library: {
      type: 'umd',
    },
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  devtool: 'source-map',
};
 
module.exports = config;

2. 明确Worker文件的打包输出规则（可选） #

Webpack5默认支持new URL(..., import.meta.url)的Worker导入，但可添加规则明确Worker的输出路径，确保和代码中引用路径一致：

module: {
  rules: [
    // 保留原有ts解析规则
    {
      test: /worker\.ts$/,
      type: 'asset/resource',
      generator: {
        filename: 'web-worker/[name].[contenthash].js' // 匹配代码中Worker的路径结构
      }
    }
  ]
}

3. 配置类库package.json确保Worker文件被发布 #

在类库的package.json中添加files字段，确保Worker chunk文件被包含在发布包内：

{
  "files": [
    "dist",
    "src"
  ]
}

4. 正常导入类库到React应用 #

完成以上配置后，在React应用中正常导入类库即可，Worker的请求路径会自动适配类库脚本位置，正确加载chunk文件。

内容的提问来源于stack exchange，提问作者Giambi Huang