webpack的SplitChunksPlugin参数详解

 module.exports = {
  optimization: {
    splitChunks: {
      // 所有文件都可以进行代码分割
      chunks: 'all', // async值是只对异步代码生效
      // 只有超过20kb的库才会做代码分割
      minSize: 20000,
      minRemainingSize: 0,
      // 只有库被3个文件引入才会被打包
      minChunks: 3,
      // 整个打包过程中只会打包30个，后续有再满足条件的，也不会继续再做代码分割了
      maxAsyncRequests: 30,
      // 入口文件做代码分割，只能分割出30个，超出就不再分割了
      maxInitialRequests: 30,
      // 分割出来的代码加上~连接符
      automaticNameDelimiter: '~',
      // 分割出来的名字叫什么，我们让cacheGroups里面的名字，我们让它有效
      name: true,
      // cacheGroups（缓存组）决定我们分割出来的代码我们要放到哪个文件里面去，如果文件符合上面的要求就会
      // 走下面的缓存组
      cacheGroups: {
        // 如果模块是从node_modules引入的模块，那么我们就把它打包到vendors.js里面去
        // 例如我们mian.js引入了loadsh.js和jquery.js，我们就会将他们一起打包到vendors.js里面去
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          // 规则优先级，越大就约先匹配
          priority: -10,
          fileName: 'vendors.js'
          reuseExistingChunk: true,
        },
        // 不匹配的全部打包在下面这个规则上面去
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};