Storybook webpack配置中已知entry路径如何修改对应输出文件名

问题根源 #

你将pdf.worker.js直接push到数组格式的entry中时，webpack会将其与原有入口的所有代码打包到同一个主bundle中，不会生成独立chunk，因此无法在filename回调中匹配到对应的单独规则。

可行解决方案 #

方案1：完全不改动原有entry结构（推荐，符合仅新增配置的要求） #

通过splitChunks强制将目标模块单独拆分为独立chunk，再匹配输出规则即可：

// 新增splitChunks配置，原有entry数组完全不变
config.optimization = config.optimization || {}
config.optimization.splitChunks = config.optimization.splitChunks || { chunks: 'all' }
config.optimization.splitChunks.cacheGroups = config.optimization.splitChunks.cacheGroups || {}

// 新增pdf.worker专属拆分规则
config.optimization.splitChunks.cacheGroups.pdfWorker = {
  test: /pdfjs-dist\/build\/pdf\.worker\.js$/,
  name: 'pdf.worker',
  chunks: 'all',
  priority: 100,
  enforce: true
}

// 配置输出文件名匹配逻辑
config.output.filename = (pathData) => {
  if (pathData.chunk?.name === 'pdf.worker') {
    return '[name].js'
  }
  // 其余文件保持原有输出规则
  return '[name].iframe.bundle.js'
}

方案2：轻量改造entry格式（无兼容风险） #

如果允许对entry做极小的无侵入改造，可以直接将原有数组entry封装为对象的main属性，原有打包逻辑完全不变，同时新增独立命名入口：

// 改造entry，原有数组入口保持完整作为主入口
config.entry = {
  main: config.entry,
  'pdf.worker': path.join(path.resolve(__dirname, '..'), './node_modules/pdfjs-dist/build/pdf.worker.js')
}

// 同上配置filename匹配逻辑即可
config.output.filename = (pathData) => {
  if (pathData.chunk?.name === 'pdf.worker') {
    return '[name].js'
  }
  return '[name].iframe.bundle.js'
}

内容的提问来源于stack exchange，提问作者Mähnenwolf