一配乱、為什么要給生產(chǎn)環(huán)境的出口文件添加 contenthash 參數(shù)：
1溉卓、未添加contenthash參數(shù)的時(shí)候，我們打包的文件：
目前的項(xiàng)目結(jié)構(gòu)比較簡(jiǎn)單搬泥，如上桑寨，
index.html是單頁面的HTML文件，
main.js是項(xiàng)目的JS入口文件忿檩，
vendors~main.chunk.js是代碼分割出來的第三方模塊的JS文件尉尾；
2、當(dāng)我們發(fā)布到網(wǎng)上燥透，頁面加載的情況如下：
現(xiàn)在假設(shè)我們更改了main.js中的代碼沙咏，重新打包發(fā)布，用戶只是簡(jiǎn)單的刷新了一下頁面班套，并沒有清空緩存肢藐，這個(gè)時(shí)候，瀏覽器緩存中有main.js和vendors~main.chunk.js的緩存吱韭，此時(shí)瀏覽器就會(huì)使用緩存窖壕，而不是加載最新的main.js文件；這個(gè)情況不是我們希望看到的；
3瞻讽、如果我們每次打包的時(shí)候能根據(jù)項(xiàng)目中的文件是否發(fā)生變化生成帶有不同hash值得文件就好了鸳吸，就可以讓發(fā)生變化的文件重新加載，沒發(fā)生變化的文件充分利用瀏覽器的緩存;
二速勇、如何根據(jù)文件內(nèi)容是否變化打包出帶有不同hash值的文件：
（1）將webpack配置文件中的output抽離出來晌砾，區(qū)分生產(chǎn)環(huán)境和開發(fā)環(huán)境：
將webpack.common.js中的output配置項(xiàng)剪切出來，不要了烦磁，在webpack.prod.js和webpack.dev.js中各復(fù)制一份养匈，
webpack.prod.js中將filename和chunkFilename分別添加[contenthash]參數(shù)
output: {
filename: '[name].[contenthash].js',
chunkFilename: '[name].[contenthash].chunk.js',
path: path.resolve(__dirname, '../bundle'),
},
webapck.dev.js中不需要更改：
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
path: path.resolve(__dirname, '../bundle'),
},
[contenthash]參數(shù)的意義：根據(jù)此次打包時(shí)的文件內(nèi)容與上次打包對(duì)比是否發(fā)生變化，如果變化contenthash也會(huì)變化都伪，如果未變化contenthash也不變化呕乎；
此時(shí)打包生成的文件如下：
js文件中的隨機(jī)字符串就是contenthash值；
三陨晶、對(duì)于老版的webpack猬仁，可能我們并沒有改變?nèi)魏挝募?nèi)容，但是兩次打包生成的文件的contenthash值竟然也不相同先誉，這是怎么回事湿刽？
比如我們上面的打包，我們?cè)陧?xiàng)目的入口文件index.js中使用了lodash這個(gè)庫(kù)褐耳，在我們打包的時(shí)候诈闺，業(yè)務(wù)代碼和庫(kù)代碼之間會(huì)存在關(guān)聯(lián)，我們把這種關(guān)聯(lián)叫做mainfest铃芦，這也是用代碼來描述的雅镊，mainfest相關(guān)的代碼既存在于main.js中，也存在于vendors~main.chunk.js中刃滓，每次打包的時(shí)候仁烹，可能這種關(guān)聯(lián)代碼在舊版的webpack中存在差異，這就導(dǎo)致了每次打包的contenthash值都會(huì)變化注盈，怎么解決這個(gè)問題晃危？
1、最新的webpack4.X已經(jīng)幫我們處理了這個(gè)問題老客，我們可以直接升級(jí)webpack到最新版本僚饭；
2、如果你不想升級(jí)webpack版本胧砰，可以在webpack.common.js中加一個(gè)runtimeChunk配置項(xiàng)：
optimization: {
runtimeChunk: {
name: 'runtime'
},
usedExports: true,
splitChunks: {}
}
這樣在我們打包的時(shí)候鳍鸵，就會(huì)把這種JS文件或者包與包之間的關(guān)系單獨(dú)打包到一個(gè)runtime.[conenthash].js文件中
