`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
}
}