webpack中hash與chunkhash區別和須要注意的問題

項目發佈時，爲了解決緩存，須要進行md5簽名，這時候就須要用到 hash 和 chunkhash等。

問題一：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有點區別，每個資源自己有本身的hash)

問題三：chunkhash重複問題

• 打包時發現，js和js引入的css的 chunkhash 是相同的，致使沒法區分css和js的更新，以下

　　index2-ddcf83c3b574d7c94a42.css 　　index2-ddcf83c3b574d7c94a42.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內置的算法變爲了只計算js chunk)，因此css請務必使用 contenthash ，不然修改後沒法生成新的簽名，而是會覆蓋之前的資源

 

　　轉：http://blog.csdn.net/sinat_17775997/article/details/61924901