Electron+Webpack5环境下如何打包worker_thread的项目依赖？

问题本质 #

Webpack默认不会将worker文件作为独立编译入口处理，仅复制了worker源文件到打包目录，其内部引入的本地模块没有被一同打包，运行时按原始相对路径找不到对应模块。 #

配置修改步骤 #

1. 修改主线程Webpack配置（webpack.main.config.js） #

module.exports = {
  // 保留原有配置，新增/调整以下内容
  target: 'electron-main',
  // 配置worker运行环境为Node，适配Electron主线程worker_threads
  worker: {
    target: 'node'
  },
  output: {
    // 保留原有output配置，新增以下两项
    chunkFilename: '[name].chunk.js',
    workerChunkLoading: 'require'
  },
  module: {
    rules: [
      // 确保worker文件会经过ts/js编译
      {
        test: /\.worker\.(js|ts)$/,
        exclude: /node_modules/,
        use: ['ts-loader'] // 仅使用JS开发可去掉该loader
      }
    ]
  },
  // 修正externals规则，仅将node_modules依赖设为外部导入，本地模块正常打包
  externals: [
    ({ request }, callback) => {
      // 非相对/绝对路径的引入，判定为node_modules依赖，走commonjs外部导入
      if (!request.startsWith('.') && !request.startsWith('/')) {
        return callback(null, `commonjs ${request}`)
      }
      callback()
    }
  ]
}

2. 可选：更稳妥的worker引入方案 #

如果上述配置依然报错，可以将worker设为独立打包入口：

// webpack.main.config.js 新增entry配置
entry: {
  index: './src/index.ts', // 替换为你的主线程入口路径
  'export.worker': './src/export.worker.js' // 替换为你的worker文件路径
}

修改主线程中worker初始化代码：

import path from 'path'

ipcMain.handle('export', async (event, measurements: Measurement[], options: ExportOptions) => {
  return new Promise((resolve, reject) => {
    // __dirname对应主线程打包输出目录，直接读取打包好的worker文件
    const worker = new Worker(path.resolve(__dirname, 'export.worker.js'))
    worker.on('message', resolve)
    worker.on('error', reject)
    worker.postMessage({
      measurements,
      options,
    })
  })
})

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