Webpack中hash、chunkhash和contenthash三者的区别

在webpack中有三种的方式生成哈希值,分别为hashchunkhashcontenthash。这三种方式有着不同的用处,或者说在webpack的不同环境中,会使用不同的方式生成哈希值。那为什么要这样的一个区分呢?我们一起探讨下:

hash

主要用于webpack的开发环境,在项目构建编译中根据文件是否更改,生成一个统一的hash值。就是说只要构建编译过程中只要一个文件修改了,则整个项目的hash值都会统一改变(整个项目的hash值是一样的)。这样一来在每次的开发中,文件都不会让浏览器器缓存,保证了文件的更新率,提高了开发过程中的效率。

chunkhash

用于webpack的生产环境,从字面上就能猜出它是跟webpack打包的chunk相关的。具体来说webpack是根据入口entry配置文件来分析其依赖项并由此来构建该entrychunk,并生成对应的hash值。不同的chunk会有不同的hash值。
在生产环境中,我们会把第三方或者公用类库进行单独打包,所以不改动公共库的代码,该chunkhash就不会变,可以合理的使用浏览器缓存了。
但是生产环境中我们会用webpack的插件,将css代码打单独提取出来打包。这时候chunkhash的方式就不够灵活,因为只要同一个chunk里面的js修改后,csschunkhash也会跟随着改动。因此我们需要contenthash

contenthash

contenthash表示由文件内容产生的hash值,内容不同产生的contenthash值也不一样。生产环境中,通常做法是把项目中css都抽离出对应的css文件来加以引用。

今天你学习了吗!!!
原文地址:https://www.cnblogs.com/nayek/p/12123215.html