webpack中對于輸出文件名可以有三種hash值：

1. hash
2. chunkhash
3. contenthash

這三者有什么區(qū)別呢？

hash

如果都使用hash的話，因為這是工程級別的，即每次修改任何一個文件，所有文件名的hash至都將改變。所以一旦修改了任何一個文件，整個項目的文件緩存都將失效。如：

image

可以從上圖清晰的看見每個壓縮后的文件的hash值是一樣的，所以對于沒有改變的模塊而言，這樣做顯然不恰當，因為緩存失效了嘛。此時，chunkhash的用途隨之而來。

chunkhash

chunkhash根據(jù)不同的入口文件(Entry)進行依賴文件解析、構(gòu)建對應(yīng)的chunk，生成對應(yīng)的哈希值。在生產(chǎn)環(huán)境里把一些公共庫和程序入口文件區(qū)分開，單獨打包構(gòu)建，接著我們采用chunkhash的方式生成哈希值，那么只要我們不改動公共庫的代碼，就可以保證其哈希值不會受影響。并且webpack4中支持了異步import功能，固，chunkhash也作用于此，如下：

image

我們將各個模塊的hash值 (除主干文件) 改為chunkhash，然后重新build一下，可得下圖：

image

我們可以清晰地看見每個chunk模塊的hash是不一樣的了。

但是這樣又有一個問題，因為我們是將樣式作為模塊import到JavaScript文件中的，所以它們的chunkhash是一致的，如test1.js和test1.css：

image

這樣就會有個問題，只要對應(yīng)css或則js改變，與其關(guān)聯(lián)的文件hash值也會改變，但其內(nèi)容并沒有改變呢，所以沒有達到緩存意義。固contenthash的用途隨之而來。

contenthash

contenthash是針對文件內(nèi)容級別的，只有你自己模塊的內(nèi)容變了，那么hash值才改變，所以我們可以通過contenthash解決上訴問題。如下：

image