Webpack 有非常多的概念，很多名詞長得都差不多。我把這些分散在文檔和教程里的內容總結起來，寫了一份 webpack 中的易混淆知識點，目前看是全網獨一份，大家可以加個收藏，方便以后檢索和學習。
全集鏈接 ➡️ webpack 易混淆知識點
這幾個名詞其實都是 webpack 魔法注釋（magic comments）里的，文檔中說了 6 個配置，配置都可以組合起來用。我們說說最常用的三個配置。
3.1 webpackChunkName
前面舉了個異步加載 lodash 的例子，我們最后把 output.chunkFilename 寫死成 bundle.js。在我們的業務代碼中，不可能只異步加載一個文件，所以寫死肯定是不行的，但是寫成 [name].bundle.js 時，打包的文件又是意義不明、辨識度不高的 chunk id。
{
entry: {
index: "../src/index.js"
},
output: {
filename: "[name].min.js", // index.min.js
chunkFilename: '[name].bundle.js', // 1.bundle.js，chunk id 為 1，辨識度不高
}
}
這時候 webpackChunkName 就可以派上用場了。我們可以在 import 文件時，在 import 里以注釋的形式為 chunk 文件取別名：
async function getAsyncComponent() {
var element = document.createElement('div');
// 在 import 的括號里 加注釋 /* webpackChunkName: "lodash" */ ，為引入的文件取別名
const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash');
element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');
return element;
}
這時候打包生成的文件是這樣的：
現在問題來了，lodash 是我們取的名字，按道理來說應該生成 lodash.bundle.js 啊，前面的 vendors~ 是什么玩意？
其實 webpack 懶加載是用內置的一個插件 SplitChunksPlugin 實現的，這個插件里面有些默認配置項，比如說 automaticNameDelimiter，默認的分割符就是 ~，所以最后的文件名才會出現這個符號，這塊兒內容我就不引申了，感興趣的同學可以自己研究一下。
3.2 webpackPrefetch 和 webpackPreload
這兩個配置一個叫預拉取（Preload），一個叫預加載（Prefetch），兩者有些細微的不同，我們先說說 webpackPreload。
在上面的懶加載代碼里，我們是點擊按鈕時，才會觸發異步加載 lodash 的動作，這時候會動態的生成一個 script 標簽，加載到 head 頭里：
如果我們 import 的時候添加 webpackPrefetch：
...
const { default: _ } = await import(/* webpackChunkName: "lodash" */ /* webpackPrefetch: true */ 'lodash');
...
就會以 <link rel="prefetch" as="script"> 的形式預拉取 lodash 代碼：
這個異步加載的代碼不需要手動點擊 button 觸發，webpack 會在父 chunk 完成加載后，閑時加載 lodash 文件。
webpackPreload 是預加載當前導航下可能需要資源，他和 webpackPrefetch 的主要區別是：
- preload chunk 會在父 chunk 加載時，以並行方式開始加載。prefetch chunk 會在父 chunk 加載結束后開始加載。
- preload chunk 具有中等優先級，並立即下載。prefetch chunk 在瀏覽器閑置時下載。
- preload chunk 會在父 chunk 中立即請求，用於當下時刻。prefetch chunk 會用於未來的某個時刻
3.3 一句話總結：
webpackChunkName 是為預加載的文件取別名，webpackPrefetch 會在瀏覽器閑置下載文件，webpackPreload 會在父 chunk 加載時並行下載文件。
最后推薦一下我的個人公眾號：「鹵蛋實驗室」，平時會分享一些前端技術和數據分析的內容，大家感興趣的話可以關注一波：
