webpack中hash、chunkhash、contenthash區別

webpack中對於輸出文件名能夠有三種hash值：

1. hash

2. chunkhash

3. contenthash

這三者有什麼區別呢？

hash

若是都使用hash的話，由於這是工程級別的，即每次修改任何一個文件，全部文件名的hash至都將改變。因此一旦修改了任何一個文件，整個項目的文件緩存都將失效。如：

能夠從上圖清晰的看見每一個壓縮後的文件的hash值是同樣的，因此對於沒有改變的模塊而言，這樣作顯然不恰當，由於緩存失效了嘛。此時，chunkhash的用途隨之而來。

chunkhash

chunkhash根據不一樣的入口文件(Entry)進行依賴文件解析、構建對應的chunk，生成對應的哈希值。在生產環境裏把一些公共庫和程序入口文件區分開，單獨打包構建，接着咱們採用chunkhash的方式生成哈希值，那麼只要咱們不改動公共庫的代碼，就能夠保證其哈希值不會受影響。而且webpack4中支持了異步import功能，固，chunkhash也做用於此，以下：

咱們將各個模塊的hash值 (除主幹文件) 改成chunkhash，而後從新build一下，可得下圖：

咱們能夠清晰地看見每一個chunk模塊的hash是不同的了。

可是這樣又有一個問題，由於咱們是將樣式做爲模塊import到JavaScript文件中的，因此它們的chunkhash是一致的，如test1.js和test1.css：

這樣就會有個問題，只要對應css或則js改變，與其關聯的文件hash值也會改變，但其內容並無改變呢，因此沒有達到緩存意義。固contenthash的用途隨之而來。

contenthash

contenthash是針對文件內容級別的，只有你本身模塊的內容變了，那麼hash值才改變，因此咱們能夠經過contenthash解決上訴問題。以下：

 

That's all~