hash、chunkhash、contenthash

hash一般是結(jié)合CDN緩存來使用，通過webpack構(gòu)建之后，生成對應(yīng)文件名自動帶上對應(yīng)的MD5值。如果文件內(nèi)容改變的話，那么對應(yīng)文件哈希值也會改變，對應(yīng)的HTML引用的URL地址也會改變，觸發(fā)CDN服務(wù)器從源服務(wù)器上拉取對應(yīng)數(shù)據(jù)，進而更新本地緩存。但是在實際使用的時候，這幾種hash計算還是有一定區(qū)別。
我們先建一個測試案例來模擬下：

項目結(jié)構(gòu)

我們的項目結(jié)構(gòu)很簡單，入口文件index.js，引用了index.css。然后新建了jquery.js和test.js作為公共庫。

//index.js require('./index.css') module.exports = function(){  console.log(`I'm jack`)  var a = 12 }

//index.css .selected : {   display: flex;   transition: all .6s;   user-select: none;   background: linear-gradient(to bottom, white, black); }

接著我們修改webpack.config.js來模擬不同hash計算

hash

hash是跟整個項目的構(gòu)建相關(guān)，只要項目里有文件更改，整個項目構(gòu)建的hash值都會更改，并且全部文件都共用相同的hash值

 var extractTextPlugin = require('extract-text-webpack-plugin'),  path = require('path')  module.exports = {  context : path.join(__dirname,'src'),  entry:{  main: './index.js',  vender:['./jquery.js','./test.js']  },  module:{  rules:[{   test://.css$/,   use: extractTextPlugin.extract({   fallback:'style-loader',   use:'css-loader'   })  }]  },  output:{  path:path.join(__dirname, '/dist/js'),  filename: 'bundle.[name].[hash].js',  },  plugins:[  new extractTextPlugin('../css/bundle.[name].[hash].css')  ] }

根據(jù)上面的配置，我們執(zhí)行webpack命令之后，可以得到下面的結(jié)果

采用hash計算的執(zhí)行結(jié)果1：

執(zhí)行結(jié)果2:

我們可以看到構(gòu)建生成的文件hash值都是一樣的，所以hash計算是跟整個項目的構(gòu)建相關(guān)，同一次構(gòu)建過程中生成的哈希都是一樣的

chunkhash

采用hash計算的話，每一次構(gòu)建后生成的哈希值都不一樣，即使文件內(nèi)容壓根沒有改變。這樣子是沒辦法實現(xiàn)緩存效果，我們需要換另一種哈希值計算方式，即chunkhash。

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

 var extractTextPlugin = require('extract-text-webpack-plugin'),  path = require('path')  module.exports = {  ...  ...  output:{  path:path.join(__dirname, '/dist/js'),  filename: 'bundle.[name].[chunkhash].js',  },  plugins:[  new extractTextPlugin('../css/bundle.[name].[chunkhash].css')  ] }

采用chunkhash計算的執(zhí)行結(jié)果1：

執(zhí)行結(jié)果2: