在webpack中有三种的方式生成哈希值,分别为hash
、chunkhash
和contenthash
。这三种方式有着不同的用处,或者说在webpack的不同环境中,会使用不同的方式生成哈希值。那为什么要这样的一个区分呢?我们一起探讨下:
主要用于webpack
的开发环境,在项目构建编译中根据文件是否更改,生成一个统一的hash
值。就是说只要构建编译过程中只要一个文件修改了,则整个项目的hash
值都会统一改变(整个项目的hash
值是一样的)。这样一来在每次的开发中,文件都不会让浏览器器缓存,保证了文件的更新率,提高了开发过程中的效率。
用于webpack
的生产环境,从字面上就能猜出它是跟webpack
打包的chunk
相关的。具体来说webpack
是根据入口entry
配置文件来分析其依赖项并由此来构建该entry
的chunk
,并生成对应的hash
值。不同的chunk
会有不同的hash
值。
在生产环境中,我们会把第三方或者公用类库进行单独打包,所以不改动公共库的代码,该chunk
的hash
就不会变,可以合理的使用浏览器缓存了。
但是生产环境中我们会用webpack
的插件,将css
代码打单独提取出来打包。这时候chunkhash
的方式就不够灵活,因为只要同一个chunk
里面的js
修改后,css
的chunk
的hash
也会跟随着改动。因此我们需要contenthash
。
contenthash
表示由文件内容产生的hash
值,内容不同产生的contenthash
值也不一样。生产环境中,通常做法是把项目中css
都抽离出对应的css
文件来加以引用。
Webpack中hash、chunkhash和contenthash三者的区别
原文:https://www.cnblogs.com/nayek/p/12123215.html