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/