Vue2项目webpack splitChunks异步chunk路径错误问题求助

核心问题是UI库作为node_modules依赖被主应用加载时，异步chunk（dayjs语言包）的路径错误叠加了一层js/，导致加载失败。以下是具体解决思路：

1. 调整publicPath为相对路径 #

当前配置的publicPath: "auto"在主应用环境下，可能会基于主应用的publicPath叠加计算chunk路径，导致多一层js/。将UI库的publicPath改为相对路径./，让chunk相对于main.js的位置加载：

output: {
  filename: 'main.js',
  chunkFilename: '[name].[contenthash].js',
  path: path.resolve(__dirname, 'dist'),
  library: 'myUI',
  libraryTarget: 'umd',
  umdNamedDefine: true, 
  publicPath: './', // 修改为相对路径
  assetModuleFilename: 'src/[hash][ext][query]',
},

2. 统一chunk的输出路径配置 #

目前cacheGroups里的name返回dayjs-locales/${moduleFileName}，同时chunkFilename是[name].[contenthash].js，这种嵌套命名可能和主应用的路径处理冲突。可以拆分配置，让chunkFilename直接指定输出目录，name只保留文件名：

output: {
  // ...其他配置
  chunkFilename: 'dayjs-locales/[name].[contenthash].js', // 直接指定chunk输出到dayjs-locales目录
},
splitChunks: {
  minSize: 10000,
  maxSize: 250000,
  cacheGroups: {
    dayjsLocales: {
      test: /[\\/]node_modules[\\/](dayjs)[\\/]locale[\\/]/,
      name: (module) => {
        const moduleFileName = module.identifier().split('/').reduceRight(item => item);
        return moduleFileName; // 仅返回语言包文件名，不包含目录前缀
      },
      chunks: 'async',
      enforce: true,
    },
  },
}

3. 检查主应用的webpack配置 #

如果上述调整无效，需要确认主应用是否对node_modules中的异步chunk有特殊路径处理：

• 查看主应用的output.publicPath是否为/js/，导致UI库的chunk路径被额外叠加
• 检查主应用是否使用了模块联邦、依赖预打包工具（如vite的optimizeDeps），这类工具可能会修改依赖的chunk加载路径，需要针对性配置忽略UI库的chunk路径处理

4. 验证打包后的路径生成 #

打包UI库后，打开dist/main.js搜索dayjs-locales相关的加载路径，确认生成的路径是否为相对main.js的正确路径（比如./dayjs-locales/cs.js.xxx.js）。如果生成的路径本身就包含多余的js/，则问题出在UI库的webpack配置；如果生成路径正确但主应用加载时叠加了前缀，则需要调整主应用的配置。

内容的提问来源于stack exchange，提问作者Matuto