webpack 中，filename 和 chunkFilename 的區別是什么？

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 中，卻又需要被打包出來的文件的名稱。

最后推薦一下我的個人公眾號：「鹵蛋實驗室」，平時會分享一些前端技術和數據分析的內容，大家感興趣的話可以關注一波：