webpack 5使用splitChunks.cacheGroups导致自定义库变量undefined问题求助

问题原因 #

你配置splitChunks.chunks: 'all'后，webpack会把入口文件client.js依赖的node_modules代码全拆分到独立的vendor.js chunk中，此时主入口client.js不再是自包含的可执行文件，必须依赖拆分出来的chunk加载完成才能正常执行初始化逻辑、导出window.foo。
生产环境仅单独加载client.js时，要么webpack动态加载vendor.js路径错误、要么依赖未加载完成导致入口逻辑未执行，最终window.foo自然为undefined。

可行解决方案 #

方案一：仅拆分异步加载模块（推荐，适配现有生产环境引入规则） #

如果不想调整生产环境仅引入client.js的逻辑，可修改splitChunks规则，仅拆分代码中通过import()异步加载的模块，不拆分初始入口的依赖，保证client.js自包含可独立运行：

module.exports = {
  // 其余配置保持不变
  optimization: {
    splitChunks: {
      // 将全局chunks改为仅匹配异步模块
      chunks: 'async',
      minSize: 0,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          // 也可单独给当前cacheGroup指定chunks规则，不影响其他拆分规则
          chunks: 'async'
        }
      }
    }
  }
}

方案二：调整生产环境资源引入顺序 #

如果确实需要拆分初始依赖减小主包体积，可按以下顺序在生产页面引入资源：

• 先加载拆分出来的vendor.js
• 若开启了runtimeChunk配置，需先加载runtime.js
• 最后加载client.js

方案三：修正动态加载路径 #

如果希望保留现有拆分规则，让client.js自动加载依赖chunk，可在output配置中添加publicPath字段，指定生产环境静态资源的部署根路径，webpack动态加载chunk时会自动拼接该路径：

module.exports = {
  output: {
    path: PROD_DIR,
    // 替换为你实际的静态资源部署路径，比如部署到/static/js/就填'/static/'
    publicPath: '/你的生产环境静态资源根路径/',
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].[contenthash].js',
    clean: true,
    library: {
      name: 'foo',
      type: 'var'
    }
  }
}

注意：该方案下window.foo不会在client.js加载完成后立刻可用，需等异步依赖chunk加载完成后才可正常访问。

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