Webpack 5如何修改web worker文件的输出格式及路径到指定子目录

云原生阿岚

2026-10-5

Webpack 5 web worker 输出路径配置解决方案

问题原因

Webpack 5 对通过new URL()配合Worker语法引入的Worker文件会单独归类为worker类型chunk，默认不继承普通js文件的output.filename、output.chunkFilename配置的路径规则，因此会直接输出到dist根目录。

解决方案

方案1：全局配置所有Worker输出规则

直接在webpack.config.js的output配置中新增workerChunkFilename项，对齐普通js文件的命名和路径规则即可：

// webpack.config.js
output: {
  path: PATHS.CLIENT_DIST,
  publicPath: '/',
  filename: env.prod
    ? 'bundle/[name].[contenthash].bundle.js'
    : 'bundle/[name].bundle.js',
  // 新增Worker专属的输出配置
  workerChunkFilename: env.prod
    ? 'bundle/[name].[contenthash].worker.js'
    : 'bundle/[name].worker.js'
},

该配置会对项目中所有通过Webpack内置规则引入的Worker生效，统一输出到bundle子目录。

方案2：针对单个Worker自定义路径

如果不需要全局修改，仅想调整当前pdfjs的worker输出路径，可以在引入时添加Webpack魔法注释指定chunk名称及前缀：

// some-file-inside-the-project.js
const workerUrl = new URL(
  /* webpackChunkName: "bundle/pdf.worker" */ 
  'pdfjs-dist/build/pdf.worker.js', 
  import.meta.url
);
pdfjsLib.GlobalWorkerOptions.workerPort = new Worker(workerUrl);