webpack：代码分割

webpack中文文档地址：https://www.webpackjs.com
从webpack4开始官方移除了commonchunk插件，改用了optimization属性进行更加灵活的配置

// 配置项 （注意：webpack4及以上才支持optimization配置项，4以下请使用commonchunk插件）

optimization: {
  splitChunks: {
    chunks: 'all',  // async: 异步代码分割。initial：同步代码分割。all：同步、异步都分割。默认值：'async'
    minSize: 30000, // 表示只有大于30kb的文件才会被分割
    maxSize: 50000, // 一般不需要配。这里表示如果文件超过50kb，就会尝试将文件拆分成多个50kb文件，如果拆分不了还是会以原文件大小打包
    minChunks: 2,  // 表示一个文件被引用2次才会进行代码分割
    maxAsyncRequests: 5, // 同时加载的请求对多为5个
    maxInitialRequests: 3, // 入口文件引入的库最多分割成3个文件
    automaticNameDelimiter: '~', // 组和文件的默认连接符，组中配置了filename之后失效
    name: true, // 开启之后，组中配置的filename才会生效
    cacheGroups: { // 打包同步代码时进行缓存分组，每个组都可配置：chunks、minSize、minChunks、maxAsyncRequests、maxInitialRequests、 name等等
        vendors: {    
            test: /[\\/]node_modules[\\/]/,  // 凡是从node_modules引入的文件都打包到vendors组下面
            priority: -10, // 分组优先级。当一个文件同时满足多个组的打包条件时，会被打包到priority值大（优先级高）的组中
            filename: 'vendors.js '  // vendors组文件的自定义文件名，不写默认：'vendors~main.js'
        },
        default: {   // 其他文件走这个默认配置，如果default为false，不会生成其他文件的分割文件 
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true // 为true表示一个模块已经被打包过了，再次遇到的时候就直接使用之前打包的而不再二次打包了
        }
    }
  }
}

splitChunks详细配置文档：https://www.webpackjs.com/plugins/split-chunks-plugin/