Webpack5构建React18+Electron项目后Web Worker路径错误如何解决

该路径重复问题确实和生产环境下import.meta.url的路径解析逻辑有关：
react-scripts@5.0.1 内置的Webpack 5默认支持new Worker(new URL(..., import.meta.url))语法，会自动为Worker资源拼接配置中的publicPath前缀；但Electron生产环境下，import.meta.url返回的当前脚本路径本身已经携带了/static/js/路径段，Webpack二次拼接前缀就会出现重复的static/js层级，最终生成错误路径。

无需修改业务侧Worker引用逻辑，只需修正构建配置即可：

• 未eject的CRA项目：使用@craco/craco或react-app-rewired覆盖Webpack配置，单独指定Worker资源的公共路径，避免重复拼接：

// craco.config.js 配置示例
module.exports = {
  webpack: {
    configure: (config) => {
      config.output.workerPublicPath = './'
      return config
    }
  }
}

• 已eject的CRA项目：直接打开config/webpack.config.js，找到output配置块，新增workerPublicPath: './'配置项，重新构建即可生成正确的Worker资源路径。

如果暂时不想调整构建配置，可选择以下任意一种方案快速修复：

• 路径替换方案：在生产环境下手动修正重复的路径段，不影响开发环境逻辑

const workerUrl = new URL('../worker.ts', import.meta.url)
if (process.env.NODE_ENV === 'production') {
  workerUrl.pathname = workerUrl.pathname.replace('/static/js/static/js/', '/static/js/')
}
const myWorker = new PromiseWorker(new Worker(workerUrl))

• 静态资源托管方案：将编译后的Worker脚本放到项目public/static/js目录下，构建时该目录文件会被原样拷贝到产物目录，直接通过公共路径引用即可，跳过Webpack的Worker路径解析逻辑：

const myWorker = new PromiseWorker(
  new Worker(`${process.env.PUBLIC_URL}/static/js/webworker.js`)
)

• 打包层重定向方案：在electron-builder配置中添加路径重写规则，将所有带/static/js/static/js/的资源请求重定向到正确的/static/js/路径下，无需修改前端业务代码。

内容的提问来源于stack exchange，提问作者J. Cutshall