optimization.SplitChunks
optimization.SplitChunks（簡稱 SplitChunks）是 webpack 4 為了改進CommonsChunkPlugin 而重新設計和實現(xiàn)的代碼分片特性。它不僅比 CommonChunkPlugin 功能更加強大逗爹，還更簡單易用亡嫌。
直接上配置：
const path = require('path')
module.exports = {
entry: {
app: './src/index.js',
foo:'./src/foo.ts',
bar:'./src/bar.ts'
},
output: {
filename: '[name]@[chunkhash:8].js',
chunkFilename:'[name]@[chunkhash:8].js',
path: path.join(__dirname, 'dist')
},
mode: 'development',
optimization:{
splitChunks:{
chunks: "all"
}
},
devServer: {
publicPath: "/dist/",
port: 3000
}
}
使用 optimization.splitChunks 替代了 CommonChunkPlugin，并指定了 chunks 的值為 all掘而，這個配置項的含義是挟冠，SplitChunks 將會對所有的 chunks 生效（默認情況下，SplitChunks 只對異步 chunks 生效袍睡，并且不需要配置）知染。
import()
import 函數(shù)是從 webpack 2 開始引入的異步加載方式，與正常 ES6 中的 import 語法不同斑胜，通過 import 函數(shù)加載的模塊及其依賴會被異步的加載控淡，并返回一個 Promise 對象嫌吠。
// foo.js
import('./bar.js').then(({add}) = > {
console.log(add(2,3))
})
// bar.js
export function add(a,b){
return a + b
}
首屏加載的 JS 資源地址是通過頁面中的 script 標簽來指定的，而間接資源（通過首屏 JS 再進一步加載的 JS）的位置則要通過 output.publicPath 來指定掺炭。上面我們的 import 函數(shù)相當于使 bar.js 成為了一個間接資源辫诅，我們需要配置 publicPath 來告訴 Webpack 去哪里獲取它。
