https://webpack.docschina.org/plugins/split-chunks-plugin/#splitchunks-cachegroups

    1.   config.optimization = {
    2.     splitChunks:{
    3.       chunks:'all',//async 对异步代码分割 all 对同步和异步代码分割
    4.       minSize: 300000,//当引入的模块大于30kb才会做代码分割
    5.       maxSize: 0,//当引入的模块大于maxSize时，会尝试对引入的模块进行二次拆分，一般不用配置
    6.       minChunks: 1,//当一个模块被至少引入1次，才会做代码分割
    7.       maxAsyncRequests: 5,//当引入模块10个时，只会将前5个模块进行打包
    8.       maxInitialRequests: 3,//入口文件引入的模块如果超过3个，只会将前3个模块做代码分割
    9.       automaticNameDelimiter: '~',//文件连接符
    10.       name: true,//拆分块的名称，让cacheGroups里面的名字有效
    11.       cacheGroups:{
    12.         com:{
    13.           filename:'[name].js',
    14.           priority:2,//有限权，当一个模块都符合cacheGroups分组条件，将按照优先权进行分组，priority值越大，优先权越高
    15.           // reuseExistingChunk:true
    16.         },
    17.       }//对符合代码拆分的模块进行一个分类
    18.     }
    19.   }

    拆分分组

    const optimization = {
  splitChunks:{
    chunks:'all',
    name:true,
    cacheGroups:{
        vendor: {
            name: 'chunks-vendor',
            test: /[\\/]node_modules[\\/](vue|moment|react|react-dom)[\\/]/,
            chunks: 'all',
            minSize: 200000,
            maxSize: 200000,
            priority: 20
        },
        // commons: {
        //     test: /[\\/]node_modules[\\/]/,
        //     name: 'vendors',
        //     chunks: 'all'
        // },
        lodash: {
           name:'chunks-lodash',
           test (module) {
            return /lodash/.test(module.context)
           },
           chunks: 'all',
        //    minChunks:1,
           priority:12
        }
    }
  }
}