1.為什么使用hash
當(dāng)不使用hash的時候，每次打包后生成的文件名都是一樣的，瀏覽器可能緩存上一次的結(jié)果而無法加載最新數(shù)據(jù)
- webpack有那些 hash
參考官網(wǎng)webpack支持多種hash
[hash]模塊標(biāo)識符的hash
當(dāng)沒有任何改動來執(zhí)行打包命令的時候，文件的hash還是改變了， 查看官方給出的解釋是：
boilerplate（boilerplate 指 webpack 運(yùn)行時的引導(dǎo)代碼）、runtime 和 manifest（運(yùn)行webpack配置文件生成的包含所有引用的第三方包內(nèi)引入的模塊文件议纯，并為他們賦予了唯一的數(shù)字id）
對此， 我們可以將boilerplate抽離出來
得到抽離出的runtime
[chunkhash]是chunk內(nèi)容的hash
在上面的截圖中中我們看到hash生成的文件[hash]部分完全相同溢谤，而[chunkhash]則不同瞻凤， 這里就需要我們來理解chunkhash 是每一個js的模塊對應(yīng)的值是不同的(根據(jù)js里的不同內(nèi)容進(jìn)行生成)。
當(dāng)然 這里也存在的問題是世杀，當(dāng)新增一個模塊阀参，其他模塊的[chunkhash]也隨之改變，其根本原因還是 module identifier玫坛，因為新引入的模塊改變了以后所有模塊的 id 值结笨。
解決方案是將默認(rèn)的數(shù)字 id 命名規(guī)則換成路徑的方式。
NamedModulePlugin和HashedModuleIdsPlugin
當(dāng)然如果是生產(chǎn)環(huán)境的話湿镀，全路徑是有點太長炕吸，這兩個plugin讓webpack不再使用數(shù)字給我們的模塊進(jìn)行命名，這樣每個模塊都會有一個獨(dú)有的名字勉痴，也就不會出現(xiàn)增刪模塊導(dǎo)致模塊id變化引起最終的hash變化了赫模。
使用HashedModuleIdsPlugin 插件來根據(jù)路徑生成的 hash 作為 module identifier。
plugins: [
new webpack.HashedModuleIdsPlugin(),
],
NamedModulePlugin一般用在開發(fā)時蒸矛，能讓我們看到模塊的名字瀑罗，可讀性更高，但是性能相對較差雏掠。HashedModuleIdsPlugin更建議在正式環(huán)境中使用斩祭。
ExtractTextPlugin
打包時發(fā)現(xiàn)，js和js引入的css的 chunkhash 是相同的乡话，導(dǎo)致無法區(qū)分css和js的更新摧玫。
原因是webpack的編譯理念，webpack將css視為js的一部分绑青，所以在計算chunkhash時诬像，會把所有的js代碼和css代碼混合在一起計算屋群。
解決方法css是使用 ExtractTextPlugin 插件引入的，這時候可以使用到這個插件提供的 contenthash 坏挠，如下(使用后css就有獨(dú)立于js外的指紋了)芍躏，
//提取css文件
new ExtractTextPlugin({
filename:'css/[name].[chunkhash:8].css' //提取chunkhash8位碼
})
[contenthash]
在使用ExtractTextWebpackPlugin時生效，代表內(nèi)容hash降狠。
現(xiàn)在如果只改變 CSS 文件对竣，會發(fā)現(xiàn)對應(yīng)的 entry JS 和 CSS 文件的 chunkhash 都會改變。（只能對抽離的 CSS 文件使用 contenthash）喊熟。我們需要應(yīng)該是改變了什么就反應(yīng)到什么文件上柏肪。而不是 CSS 和 JS 文件的 chunkhash 同時改變或不變，無法區(qū)分 CSS 和 JS 的更新芥牌。
所以這里抽離出來的 CSS 文件將使用 contenthash，以區(qū)分 CSS 文件和 JS 文件的更新聂使。
為了一份理想的緩存文件壁拉，我們需要做這些事情：
* 抽離 boilerplate（[runtime & manifest）
* 將 module identifier 默認(rèn)的數(shù)字標(biāo)識方式轉(zhuǎn)成使用路徑標(biāo)識
* JS 文件使用 chunkhash
* 抽離的 CSS 樣式文件使用 contenthash
* gif|png|jpe?g|eot|woff|ttf|svg|pdf 等使用 hash
* 設(shè)置 namedChunks 為 true
