webpack中hash和chunkhash是否是很眼熟？

前言

最近在研究webpack的東西，而後也陸陸續續整理了幾篇文章，從裏面能夠學到許多有用的插件和node的一些模塊，今天我要介紹的就是hash和chunkhash，這個在webpack打包的過程當中常常見到，有興趣的能夠關注一下個人github,點個star，關注和喜歡都行，🙏

二者的使用

//使用hash的狀況
output: {
  path: path.resolve(__dirname, '../dist/static'),
  publicPath: '/',
  filename: 'static/js/[name].[hash].js',
  chunkFilename: 'static/js/[id].[hash].js'
}
//使用chunkhash的狀況
output: {
  path: config.prod.assetsRoot,
  filename: 'static/js/[name]-[chunkhash:16].js',
  chunkFilename: 'static/js/[id]-[chunkhash:16].js',
  publicPath: '/'
},複製代碼

通常使用的時候，會用在文件的產出中，css和js都有，用於打包產出的文件

hash和chunkhash是什麼

你們都知道，用於優化頁面性能的經常使用方法就是利用瀏覽器的緩存，文件的hash值，就至關於一個文件的身份證同樣，很適用於前端靜態資源的版本管理，前端實現增量更新的方案之一，那爲何會有兩個東西呢，咱們娓娓道來，先看二者的定義

• hash

[hash] is replaced by the hash of the compilation.

compilation的hash值

• chunkhash

[chunkhash] is replaced by the hash of the chunk.

chunk的hash值

後者很容易理解，由於chunk在webpack中的含義就是模塊，那麼chunkhash根據定義來就是模塊內容計算出來的hash值。
在理解前者以前咱們先來看一下compilation有什麼做用

compilation的淺析

webpack的官網文檔中HOW TO WRITE A PLUGIN中對這個有一段文字的解析

A compilation object represents a single build of versioned assets. While running Webpack development middleware, a new compilation will be created each time a file change is detected, thus generating a new set of compiled assets. A compilation surfaces information about the present state of module resources, compiled assets, changed files, and watched dependencies. The compilation also provides many callback points at which a plugin may choose to perform custom actions.

翻譯：

compilation對象表明某個版本的資源對應的編譯進程，當你跑webpack的development中間件，每當檢測到一個文件被更新以後，一個新的comilation對象會被建立，從而引發新的一系列的資源編譯。一個compilation含有關於模塊資源的當前狀態、被編譯的資源，改變的文件和監聽依賴的表面信息。compilation也提供不少回調方法，在一個插件可能選擇執行制定操做的節點

而與compilation對應的還有一個compiler對象，咱們也來介紹一下，這樣可以更方便理解compilation

The compiler object represents the fully configured Webpack environment. This object is built once upon starting Webpack, and is configured with all operational settings including options, loaders, and plugins. When applying a plugin to the Webpack environment, the plugin will receive a reference to this compiler. Use the compiler to access the main Webpack environment.

翻譯:

compiler對象表明的是整個webpack的配置環境，這個對象只在webpack開始的時候構建一次，且全部的操做設置包括options，loaders，plugin都會被配置，當在webpack中應用插件時，這個插件會接受這個compiler對象的引用。經過webpack的主環境去使用這個compiler。

簡單的說，compiler是針對webpack的，是不變的webpack環境，而compilation這個就是每次有一個文件更新，而後會從新生成一個，那麼當你一個文件的更新，全部的hash字段都會發生變化，這就很坑了，原本咱們作增量更新就是想改的那個文件發生變化，可是若是所有都發生變化就沒有意義了，咱們來看一下實際操做中的例子：

• 修改前文件的hash

修改前文件的hash

• 修改後文件的hash

修改後文件的hash

並且從上圖中能夠看出，每次有文件更新，會產生一個新的compilation，從而會用新的compilation來計算得出新的hash，並且每一個文件帶有的hash值仍是同樣的，這樣的確定達不到咱們的要求，那麼如何避免這個問題呢？——chunkhash

chunkhash

chunkhash是由chunk計算的得出的hash值，chunk指的是模塊，這個hash值就是模塊內容計算出來的hash值

• 修改單個文件前的chunkhash

修改前的chunkhash

• 修改後的文件的chunkhash

修改後的chunkhash

這裏咱們還得提一個問題，好比像vue這些框架，把js和css共同放在一個裏面會時，咱們通常會用一個插件叫extract-text-webpack-plugin，這樣咱們就能把css單獨打包，可是這樣就會產生一個問題，這樣打包出來的css的chunkhash和js的chunkhash會不會是同樣的呢，其實我這麼問了，固然是會的啦。咱們能夠看一下下面兩張圖片。

chunkhash計算出的js

chunkhash計算出的css

其實也很簡單，webpack的理念就是爲了js的打包，style標籤也會視爲js的一部分，那麼這咱們會發現，仍是有坑，當咱們只改css的時候，js也會同時發生改變，那麼咱們仍是沒有作到嚴格意義上的增量更新，那麼咱們又該怎麼解決呢？

contenthash

使用方式以下：

new ExtractTextPlugin({
  filename: 'static/css/[name]-[contenthash:16].css',
  allChunks: true
})複製代碼

這樣咱們看打包後的效果。

chunkhash計算出來的js

contenthash計算出來的css

總結

靜態資源的管理是前端很重要的一塊，最近因爲業務轉型，本身也在嘗試換個架子，那麼確定得從研究webpack入手，如今webpack已是必不可少的工具之一，這篇博文有借鑑網上的，若有侵權刪，可是研究得出的結論我會記憶一輩子，因此建議看完這篇的小夥伴本身動手配置一邊，喜歡的能夠去github上點個star，喜歡和關注都行，最近有點忙，可是我仍是天天會寫一點博文。謝謝你們