如何使用Webpack4合理拆分公共依赖？配置打包共享依赖遇难题

嘿，我刚好折腾过Webpack4拆分共享依赖的场景，完全懂你的需求！给你一步步捋清楚怎么实现：

咱们先把需求拆得明明白白：

• 全局公共bundle：把jquery、bootstrap和你的自定义core打包在一起，让Page1和Page2都能复用，避免重复加载
• Page2专属bundle：把只在Page2用到的lodash和my-app打包成单独的文件，只有Page2需要加载它

直接上可落地的配置，每部分我都给你标注清楚：

const webpack = require('webpack');

module.exports = {
  // 入口配置：定义三个入口组
  entry: {
    // 公共依赖入口：把core、jquery、bootstrap都放这儿
    vendor: ['./src/core.js', 'jquery', 'bootstrap'],
    // Page1的入口：它没有专属依赖，只需要配合vendor bundle使用
    page1: './src/page1.js',
    // Page2的入口：把它专属的my-app和lodash放这儿
    page2: ['./src/my-app.js', 'lodash']
  },
  // 输出配置：指定打包后的文件位置和命名规则
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  // 关键的拆分配置：Webpack4用splitChunks替代旧的CommonsChunkPlugin
  optimization: {
    splitChunks: {
      chunks: 'all',
      // 缓存组配置：确保公共依赖被正确提取到vendor bundle
      cacheGroups: {
        vendor: {
          name: 'vendor',
          // 匹配规则：node_modules里的jquery、bootstrap，还有你的自定义core.js
          test: /[\\/]node_modules[\\/]|src\/core.js/,
          chunks: 'initial',
          priority: 10, // 给这个缓存组设高优先级，确保依赖优先进vendor
          enforce: true // 强制拆分，不管大小
        }
      }
    }
  },
  // 可选：如果bootstrap需要全局的$或jQuery，得配这个插件让它能找到依赖
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

配置完打包后，页面里要按下面的方式引入bundle：

• Page1的HTML：

  <!-- 先加载公共依赖 -->
  <script src="dist/vendor.bundle.js"></script>
  <!-- 再加载Page1的业务代码 -->
  <script src="dist/page1.bundle.js"></script>
  

• Page2的HTML：

  <!-- 公共依赖只需要加载一次 -->
  <script src="dist/vendor.bundle.js"></script>
  <!-- 加载Page2专属的依赖和业务代码 -->
  <script src="dist/page2.bundle.js"></script>
  

• 打包的时候记得用webpack --mode production，生产模式下会自动做代码压缩和优化，bundle体积会小很多
• 如果发现bootstrap没进vendor bundle，检查下test规则有没有覆盖到它，或者调整priority数值（数值越高优先级越高）
• 可以用webpack-bundle-analyzer插件可视化查看bundle里的内容，确认依赖拆分是否符合预期

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