`filename` 指**列在** `entry` 中，打包後輸出的文件的名稱。`chunkFilename` 指**未列在** `entry` 中，卻又需要被打包出來的文件的名稱。 ...
Webpack 有非常多的概念，很多名詞長得都差不多。我把這些分散在文檔和教程里的內容總結起來，寫了一份 webpack 中的易混淆知識點，目前看是全網獨一份，大家可以加個收藏，方便以後檢索和學習。
全集鏈接 ➡️ webpack 易混淆知識點
2.1 filename
filename 是一個很常見的配置，就是對應於 entry 裡面的輸入文件，經過webpack 打包後輸出文件的文件名。比如說經過下麵的配置，生成出來的文件名為 index.min.js。
{
entry: {
index: "../src/index.js"
},
output: {
filename: "[name].min.js", // index.min.js
}
}
2.2 chunkFilename
chunkFilename 指未被列在 entry 中，卻又需要被打包出來的 chunk 文件的名稱。一般來說，這個 chunk 文件指的就是要懶載入的代碼。
比如說我們業務代碼中寫了一份懶載入 lodash 的代碼：
// 文件：index.js
// 創建一個 button
let btn = document.createElement("button");
btn.innerHTML = "click me";
document.body.appendChild(btn);
// 非同步載入代碼
async function getAsyncComponent() {
var element = document.createElement('div');
const { default: _ } = await import('lodash');
element.innerHTML = _.join(['Hello!', 'dynamic', 'imports', 'async'], ' ');
return element;
}
// 點擊 button 時，懶載入 lodash，在網頁上顯示 Hello! dynamic imports async
btn.addEventListener('click', () => {
getAsyncComponent().then(component => {
document.body.appendChild(component);
})
})
我們的 webpack 不做任何配置，還是原來的配置代碼：
{
entry: {
index: "../src/index.js"
},
output: {
filename: "[name].min.js", // index.min.js
}
}
這時候的打包結果如下：
這個 1.min.js 就是非同步載入的 chunk 文件。文檔里這麼解釋：
output.chunkFilename預設使用[id].js或從output.filename中推斷出的值（[name]會被預先替換為[id]或[id].）
文檔寫的太抽象，我們不如結合上面的例子來看：
output.filename 的輸出文件名是 [name].min.js，[name] 根據 entry 的配置推斷為 index，所以輸出為 index.min.js；
由於 output.chunkFilename 沒有顯示指定，就會把 [name] 替換為 chunk 文件的 id 號，這裡文件的 id 號是 1，所以文件名就是 1.min.js。
如果我們顯式配置 chunkFilename，就會按配置的名字生成文件：
{
entry: {
index: "../src/index.js"
},
output: {
filename: "[name].min.js", // index.min.js
chunkFilename: 'bundle.js', // bundle.js
}
}
2.3 一句話總結：
filename 指列在 entry 中，打包後輸出的文件的名稱。
chunkFilename 指未列在 entry 中，卻又需要被打包出來的文件的名稱。
最後推薦一下我的個人公眾號：「滷蛋實驗室」，平時會分享一些前端技術和數據分析的內容，大家感興趣的話可以關註一波：
