三種設置的區別
1、Hash
hash是跟整個項目的構建相關,只要項目里有文件更改,整個項目構建的hash值都會更改,並且全部文件都共用相同的hash值
2、chunkhash
chunkhash,它根據不同的入口文件(Entry)進行依賴文件解析、構建對應的chunk,生成對應的哈希值。
簡單來說這種是根據不同入口來配置的,比如react,react-router、resux等公共入口文件,只要這些沒有改變,那么他對應生成的js的hash值也不會改變。
3、contenthash
contenthash主要是處理關聯性,比如一個js文件中引入css,但是會生成一個js文件,一個css文件,
但是因為入口是一個,導致他們的hash值也相同,所以當只有js修改時,關聯輸出的css、img等文件的hash值也會改變,這種情況下就需要contenthash了。
使用哈希值的作用:
1、提升webpack打包速度和項目體積:
將webpack入口的chunk文件中所有公共的代碼提取出來,減少代碼體積;同時提升webpack打包速度。
2、利用緩存機制:
依賴的公共模塊文件一般很少更改或者不會更改,這樣獨立模塊文件提取出可以長期緩存。
3、利用瀏覽器緩存
方便我們在改動代碼的時候,線上代碼發版后及時讀取最新的js文件,防止出現緩存問題;