快捷導(dǎo)航

webpack中的filename 和 chunkFilename 的區(qū)別實(shí)例解析

更新時間：2023年11月20日 09:44:04 作者：背太陽的牧羊人

filename 指列在 entry 中,打包后輸出的文件的名稱,chunkFilename 指未列在 entry 中,卻又需要被打包出來的文件的名稱,這篇文章主要介紹了webpack中的filename 和 chunkFilename 的區(qū)別實(shí)例解析,需要的朋友可以參考下

filename

filename 是一個很常見的配置，就是對應(yīng)于 entry 里面的輸入文件，經(jīng)過webpack打包后輸出文件的文件名。比如說經(jīng)過下面的配置，生成出來的文件名為 index.min.js。

chunkFilename

chunkFilename 指未被列在 entry 中，卻又需要被打包出來的 chunk 文件的名稱。一般來說，這個 chunk 文件指的就是要懶加載的代碼。

比如說我們業(yè)務(wù)代碼中寫了一份懶加載 lodash 的代碼：

// 文件：index.js
// 創(chuàng)建一個 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;
}
// 點(diǎn)擊 button 時，懶加載 lodash，在網(wǎng)頁上顯示 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
    }
}

這時候的打包結(jié)果如下：

這個 1.min.js 就是異步加載的 chunk 文件。文檔里這么解釋：

output.chunkFilename 默認(rèn)使用 [id].js 或從 output.filename 中推斷出的值（[name] 會被預(yù)先替換為 [id] 或 [id].）

文檔寫的太抽象，我們不如結(jié)合上面的例子來看：
output.filename 的輸出文件名是 [name].min.js，[name] 根據(jù) 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
    }
}

總結(jié)

filename 指列在 entry 中，打包后輸出的文件的名稱。

chunkFilename 指未列在 entry 中，卻又需要被打包出來的文件的名稱。

到此這篇關(guān)于webpack中的filename 和 chunkFilename 的區(qū)別的文章就介紹到這了,更多相關(guān)webpack filename 和 chunkFilename 的區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！