序大家好，我是林三鑫。用最通俗易懂的语言解释最难的知识点是我的座右铭。拿到了大厂的校招，面试官是网易雷火工作室。当时有一个问题，我记得很清楚，就是：说说webpack中三种hash配置的区别哈哈，当时连webpack怎么配置都不知道，所以没法回答，然后还有。..没有了。.哪三个？webpack中的三种hash分别是：hash：全局hashchunkhash：grouphashcontenthash：contenthash实践讲解提前准备三个文件：main.jsimport'./main.css'console.log('我是main.js')console.jsconsole.log('我是console.js')main.css.title{color:#000;}打包环境搭建这里就不详细说打包环境的搭建了。会有一篇文章专门介绍它。在这里，我将提取精华。webpack.config.js//多入口打包entry:{main:'./src/main.js',console:'./src/console.js'},//输出配置output:{path:path.resolve(__dirname,'./dist'),//这里默认是hashfilename:'js/[name].[hash].js',clean:true},plugins:[//打包css文件的配置newMiniCssExtractPlugin({//这里预设的是hashfilename:'styles/[name].[hash].css'})]hash既然我们预设了hash，那么我们直接运行打包npmrunbuild，看看我们打包了什么吧看最后是什么，所有文件的文件名的hash值都一样，那我们把main.cssfile.title{//#000改成#fffcolor:#fff;}然后我们然后运行npmrunbuild打包，查看打包的内容：可以看出，修改一个文件后，所有文件的hash值都会发生相应的变化。所有文件的哈希值都改变了。所以当包名设置为hash时，整个工程文件是一致的，修改其中一个会导致全部一起改。chunkhash我们将输出文件名规则改为chunkhash：entry:{main:'./src/main.js',console:'./src/console.js'},output:{path:path.resolve(__dirname,'./dist'),//修改为chunkhashmodifyfilename:'js/[name].[chunkhash].js',clean:true},plugins:[newMiniCssExtractPlugin({//修改为chunkhashmodifyfilename:'styles/[name].[chunkhash].css'})]此时我们运行npmrunbuild查看打包后的东西：可以看到hash值会根据入口文件的不同分为两大阵营：main.js和main.css属于main.js入口文件console.js属于console.js入口文件，所以我们照常修改main.css：.title{//将#fff改为粉红色color:pink;}重新运行npmrunbuild打包：可以看出main.css的修改会影响main.css和main.js的hash值结论：当rule为chunkhash时，打包后的hash值为基于入口文件是不一样的。当一个入口文件被修改并重新打包时，与该入口文件关联的所有文件的哈希值都会被修改，但不会影响其他入口文件的哈希值contenthash。我们把输出文件名规则改为contenthash：entry:{main:'./src/main.js',console:'./src/console.js'},output:{path:path.resolve(__dirname,'./dist'),//修改为contenthashmodifyfilename:'js/[name].[contenthash].js',clean:true},plugins:[newMiniCssExtractPlugin({//modifytocontenthashmodifyfilename:'styles/[name].[contenthash].css'})]runnpmrunbuild打包，看看打包后的文件是什么样的likeAppearance:可以看到，每个文件的hash值是不同的，每个文件的hash值都是根据自己的内容生成的，所以我们现在修改main.css：.title{//把粉色改成蓝色:blue;}重新打包看看：可以看出，对main.css的修改只会影响main.css的hash值，也就是它自己的hash值。结论：当rule为contenthash时，每个文件的hash值是根据自己的内容生成的。当一个文件的内容被修改时，打包后只会修改自己的哈希值，不会影响其他文件的哈希值。结语我是林三鑫，一个狂热的前端菜鸟程序员。有上进心，喜欢前端，想学前端，以后可以交个朋友，一起钓鱼哈哈，摸摸鱼群，加我，关注【想】
