hash一般是結合CDN緩存來使用,通過webpack構建之后,生成對應文件名自動帶上對應的MD5值。如果文件內容改變的話,那么對應文件哈希值也會改變,對應的HTML引用的URL地址也會改變,觸發CDN服務器從源服務器上拉取對應數據,進而更新本地緩存。但是在實際使用的時候,這幾種hash計算還是有一定區別。
1、hash
hash是跟整個項目的構建相關,只要項目里有文件更改,整個項目構建的hash值都會更改,並且全部文件都共用相同的hash值
2、chunkhash
采用hash計算的話,每一次構建后生成的哈希值都不一樣,即使文件內容壓根沒有改變。這樣子是沒辦法實現緩存效果,我們需要換另一種哈希值計算方式,即chunkhash。
chunkhash和hash不一樣,它根據不同的入口文件(Entry)進行依賴文件解析、構建對應的chunk,生成對應的哈希值。我們在生產環境里把一些公共庫和程序入口文件區分開,單獨打包構建,接着我們采用chunkhash的方式生成哈希值,那么只要我們不改動公共庫的代碼,就可以保證其哈希值不會受影響。
3、contenthash
在使用chunkhash的例子中,如果index.css被index.js引用了,那么就會共用相同的chunkhash值。但是這樣子有個問題,如果index.js更改了代碼,css文件就算內容沒有任何改變,由於是該模塊發生了改變,導致css文件會重復構建。
這個時候,我們可以使用extra-text-webpack-plugin里的contenthash值,保證即使css文件所處的模塊里就算其他文件內容改變,只要css文件內容不變,那么不會重復構建。