我的项目 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
也没有效果。
最佳答案
不确定这是否是最佳实践,但我认为您可以使用魔术注释来做到这一点:
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';
},
},
关于webpack - 如何在 webpack 5 中更改 web worker 文件的输出格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68987801/