在webpack中有時需要使用hash來做靜態資源實現增量更新方案之一，檔名的hash值可以有三種hash生成方式，每一種都有不同應用場景，那麼三者有何區別呢？

hash、chunkhash、contenthash

hash一般是結合CDN快取來使用，通過webpack構建之後，生成對應檔名自動帶上對應的MD5值。如果檔案內容發生改變的話，那麼對應檔案hash值也會改變，對應的HTML引用的URL地址也會改變，觸發CDN伺服器從原伺服器上拉取對應資料，進而更新本地快取。但是實際使用時，這三種hash計算還是有一定區別。

hash

hash是跟整個專案的構建相關，構建生成的檔案hash值都是一樣的，所以hash計算是跟整個專案的構建相關，同一次構建過程中生成的hash都是一樣的，只要專案裡有檔案更改，整個專案構建的hash值都會更改。

如果出口是hash，那麼一旦針對專案中任何一個檔案的修改，都會構建整個專案，重新獲取hash值，快取的目的將失效。

chunkhash

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

chunkhash和hash不一樣，它根據不同的入口檔案(Entry)進行依賴檔案解析、構建對應的chunk，生成對應的hash值。我們在生產環境裡把一些公共庫和程式入口檔案區分開，單獨打包構建，接著我們採用chunkhash的方式生成hash值，那麼只要我們不改動公共庫的程式碼，就可以保證其hash值不會受影響。

由於採用chunkhash，所以專案主入口檔案main.js及其對應的依賴檔案main.css由於被打包在同一個模組，所以共用相同的chunkhash，但是公共庫由於是不同的模組，所以有單獨的chunkhash。這樣子就保證了在線上構建時只要檔案內容沒有更改就不會重複構建。

entry:{
    main: path.join(__dirname,'./main.js'),
    vendor: ['vue']
},
output:{
    path:path.join(__dirname,'./dist'),
    publicPath: '/dist/',
    filname: 'bundle.[chunkhash].js'
}
 

最後main與vendor的打包結果圖：  

contenthash

contenthash表示由檔案內容產生的hash值，內容不同產生的contenthash值也不一樣。在專案中，通常做法是把專案中css都抽離出對應的css檔案來加以引用。

在這裡我用mini-css-extract-plugin替代了extract-text-webpack-plugin。
 

const miniCssExtractPlugin=require("mini-css-extract-plugin");

module.exports={
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    miniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new miniExtractPlugin({
            filename: 'main.[contenthash:7].css'
        })
    }
}

效果如圖 

打包後即使css檔案所處的模組裡就算其他檔案內容改變，只要css檔案內容不變，那麼就不會重複構建。

附加： 
如果對css使用了chunkhash之後，它與依賴它的chunk共用chunkhash，測試後會發現，css與js檔名的chunkhash值是一樣的，如果我修改了js檔案，js的hash值會變化，css的檔名的hash還是和變化後的js檔案的hash值一樣，如果我修改了css檔案，也會導致重新構建，css的hash值和js的hash值還是一樣的，即使js檔案沒有被修改。這樣會導致快取作用失效，所以css檔案最好使用contenthash。

原文：https://blog.csdn.net/bubbling_coding/article/details/81561362 
！