webpack3中hash、chunkhash和contenthash三者的區別

在webpack中有時需要使用hash來實現靜態資源增量更新。

hash一般是結合緩存來使用，通過webpack構建之後，生成對應文件名自動帶上對應的MD5值。如果文件內容發生改變的話，那麼對應文件hash值也會改變，對應的HTML引用的URL地址也會改變，觸發從原服務器上拉取對應數據，進而更新本地緩存。

實際使用時，文件名的hash值可以有三種生成方式，這三種hash計算還是有一定區別，每一種都有不同應用場景，那麼三者有何區別呢？

hash

hash是跟整個項目的構建相關，每次構建均會重新獲取hash值（使本地緩存失效），同一次構建過程中生成的文件hash值都是一樣的。

chunkhash

採用hash計算的話，每一次構建後生成的hash值都不一樣，即使文件內容壓根沒有改變。這樣子是沒辦法實現緩存效果，我們需要另一種hash值計算方法，即chunkhash。

chunkhash和hash不一樣，它根據不同的入口文件(Entry)進行依賴文件解析、構建對應的chunk，生成對應的hash值。我們在生產環境由於採用chunkhash，所以項目主入口文件main.js及其對應的依賴文件main.css被打包在同一個模塊，共用相同的chunkhash（本示例爲app.*.js）.但是公共庫由於是不同的模塊，所以有單獨的chunkhash（本示例爲vendor.*.js）。這樣子就保證了在線上構建時只要文件內容沒有更改就不會重複構建。

  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  }

最後打包結果如下圖所示：

contenthash

contenthash表示由文件內容產生的hash值，內容不同產生的contenthash值也不一樣。

在vue2 webpack3項目中，使用extract-text-webpack-plugin插件通常做法是把項目中css都抽離出來合併爲一個css文件來加以引用。目前測試情況是隻要項目vue文件代碼發生變化，contenthash均會發生變化。

在vue3 webpack4項目中，使用mini-css-extract-plugin插件將CSS提取爲獨立的文件，對每個包含css的vue文件都會創建一個CSS文件，支持按需加載css和sourceMap。目前測試情況是當前vue頁面有修改，則編譯後對應的css和js文件hash值均會發生變化。