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解決上訴問題。