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