webpack - 如何在 webpack 5 中更改 web worker 文件的输出格式

Question

我的项目 js 文件与 Webpack 5 捆绑到 dist 输出目录内的子文件夹中。这是配置:

// webpack.config.js
output: {
      path: PATHS.CLIENT_DIST,
      publicPath: '/',
      filename: env.prod
        ? 'bundle/[name].[contenthash].bundle.js'
        : 'bundle/[name].bundle.js'
    },

这是捆绑工件:

请注意以红色突出显示的以 323 开头的 js 文件。该文件在 bundle 子文件夹之外很顽固。
该文件是在 Webpack 5 docs 之后创建的网络 worker ， 像这样:

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

我正在寻求有关如何使此解析输出遵循与项目中其他 js 文件相同的模式并将其放入 bundle 子文件夹而不是 dist 根目录的帮助。
Webpack 5 文档没有提供有关如何控制 Web Worker 输出的说明(我发现的)。我试过 output.chunkFilename也没有效果。

Answer 1

不确定这是否是最佳实践，但我认为您可以使用魔术注释来做到这一点:

const workerUrl = new URL(
  /* webpackChunkName: 'pdf.worker' */
  'pdfjs-dist/build/pdf.worker.js', 
  import.meta.url,
);

然后在你的 webpack 配置中:

output: {
  chunkFilename(pathData) {
    const outDir = pathData.chunk.name === 'pdf.worker' ? 'worker/' : '';
    return outDir + '[name].[contenthash].bundle.js';
  },
},