webpack實現(xiàn)打包的hash值根據(jù)內(nèi)容進行改變

hash

使用 hash 對js和css進行簽名時,每一次hash值都不一樣,導(dǎo)致無法利用緩存。

  • 原因:因為 hash 字段是根據(jù)每次編譯compilation的內(nèi)容計算所得,也可以理解為項目總體文件的hash值,而不是針對每個具體文件的。(所以每一次編譯都會有一個新的hash,并不適用)。

  • 解決: 不用hash,而用 chunkhash (js和css要使用chunkhash), chunkhash 的話每一個js的模塊對應(yīng)的值是不同的(根據(jù)js里的不同內(nèi)容進行生成)

圖片和字體圖標的chunkhash問題

  • 前面有提到,hash在js和css中不實用,所以在項目中所有的文件都準備用 chunkhash ,但是又有了新的問題-img和font等資源中,使用 chunkhash 會報錯
  • 解決:因為 chunkhash 只適用于js和css,img中是沒有這種東西的,仍然需要用到 hash (這個hash有點區(qū)別,每一個資源本身有自己的hash)

chunkhash重復(fù)

打包時發(fā)現(xiàn),js和js引入的css的 chunkhash 是相同的,導(dǎo)致無法區(qū)分css和js的更新,如下

app_96ac1.css
app_96ac1.js

原因:因為webpack的編譯理念,webpack將css視為js的一部分,所以在計算chunkhash時,會把所有的js代碼和css代碼混合在一起計算

解決:css是使用 ExtractTextPlugin 插件引入的,這時候可以使用到這個插件提供的 contenthash ,如下(使用后css就有獨立于js外的指紋了),

//提取css文件
new ExtractTextPlugin({
     filename:'css/[name].[chunkhash:8].css'  //提取chunkhash8位碼
})

注意在新版本中,我在webpack3中測試的是,修改css的內(nèi)容并不會引起js中的 chunkhash 變動(原因估計是webpack內(nèi)置的算法變?yōu)榱酥挥嬎鉰s chunk),所以css請務(wù)必使用 contenthash ,否則修改后無法生成新的簽名,而是會覆蓋以前的資源

contenthash
contenthash是針對文件內(nèi)容級別的,只有你自己模塊的內(nèi)容變了,那么hash值才改變,所以我們可以通過contenthash解決上訴問題。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容