基于入口点拆分Webpack Chunk：index与widget差异化打包需求

需求概述 #

• 两个Webpack入口：
  • index：主网页入口，打包后需生成index.bundle.js，同时拆分出公共代码chunk（如chunk-common.*.js）和第三方依赖chunk（如chunk-vendors.*.js）
  • widget：iframe集成用的精简版入口，需将公共代码、第三方依赖全部整合到widget.bundle.js中，或通过widget.bundle.js加载这些chunk
• 需提供全局函数window.myLibrary.render，对应固定的JS bundle

当前配置问题 #

现有配置仅将common和vendor模块打包到入口文件中，未实现index拆分chunk、widget整合依赖的预期效果

可行性结论 #

该需求完全可以实现，通过调整splitChunks的缓存组规则即可达成目标

调整后的Webpack配置 #

optimization: {
  splitChunks: {
    chunks: 'all',
    minChunks: 2,
    minSize: 20000,
    maxAsyncRequests: 30,
    maxInitialRequests: 30,
    enforceSizeThreshold: 50000,
    cacheGroups: {
      // 为index入口拆分第三方依赖chunk
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: chunk => chunk.name === 'index', // 仅对index入口生效
        reuseExistingChunk: true
      },
      // 为index入口拆分公共代码chunk
      common: {
        name: 'common',
        minChunks: 2,
        chunks: chunk => chunk.name === 'index', // 仅对index入口生效
        priority: -10,
        reuseExistingChunk: true
      },
      // 为widget入口强制整合所有依赖
      widgetBundle: {
        test: /./,
        name: 'widget',
        chunks: chunk => chunk.name === 'widget', // 仅对widget入口生效
        enforce: true, // 强制将所有依赖打包到widget.bundle.js
        priority: 10 // 优先级高于其他缓存组
      },
      default: false // 禁用默认缓存组
    }
  }
}

配置关键点说明 #

1. vendors与common缓存组：仅对index入口生效，将第三方依赖和公共代码拆分到独立chunk，满足主网页的打包需求
2. widgetBundle缓存组：针对widget入口设置，通过enforce: true强制将该入口的所有依赖（包括公共代码、第三方模块）全部打包到widget.bundle.js中，确保iframe集成时只需加载单个文件
3. 全局函数处理：确保window.myLibrary.render的定义代码在widget入口文件中导出，打包后该函数会被挂载到全局window对象上，形成固定的widget.bundle.js

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