hash
使用 hash 對js和css進行簽名時活烙,每一次hash值都不一樣徐裸,導致無法利用緩存。
原因:因為 hash 字段是根據每次編譯compilation的內容計算所得啸盏,也可以理解為項目總體文件的hash值重贺,而不是針對每個具體文件的。(所以每一次編譯都會有一個新的hash回懦,并不適用)气笙。
解決: 不用hash,而用 chunkhash (js和css要使用chunkhash)粉怕, chunkhash 的話每一個js的模塊對應的值是不同的(根據js里的不同內容進行生成)
圖片和字體圖標的chunkhash問題
- 前面有提到健民,hash在js和css中不實用,所以在項目中所有的文件都準備用 chunkhash 贫贝,但是又有了新的問題-img和font等資源中秉犹,使用 chunkhash 會報錯
- 解決:因為 chunkhash 只適用于js和css,img中是沒有這種東西的稚晚,仍然需要用到 hash (這個hash有點區(qū)別崇堵,每一個資源本身有自己的hash)
chunkhash重復
打包時發(fā)現,js和js引入的css的 chunkhash 是相同的客燕,導致無法區(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的內容并不會引起js中的 chunkhash 變動(原因估計是webpack內置的算法變?yōu)榱酥挥嬎鉰s chunk)既忆,所以css請務必使用 contenthash 驱负,否則修改后無法生成新的簽名,而是會覆蓋以前的資源
contenthash
contenthash是針對文件內容級別的患雇,只有你自己模塊的內容變了跃脊,那么hash值才改變,所以我們可以通過contenthash解決上訴問題苛吱。