打包hash方式简记

hash && chunkhash && contenthash

起因:只更改css文件, 重新构建到测试环境,测试环境代码没有生效

原因:hash结合cdn缓存来使用,文件改变时,webpack构建后,文件名带的hash值改变,HTML引用的文件URL不同,触发cdn服务器从源服务器上重新拉取数据,更新本地缓存

hash方式:

hash--所有文件使用同一个hash值,任意改动一个文件,整个项目所有文件路径变化,未更改文件达不到缓存的目的


chunkhash--根据模块入口文件的更改进行构建生成hash值,所以将公共组件和业务代码拆分成不同模块,对不同模块进行分别构建,不同模块的hash值不同,能够达到没有更改的文件获取缓存的目的,但是css和js是相同的hash,css文件没有更改时,也会跟随js更改进行重新hash,不能达到css文件缓存的目的


contenthash--我们的文件是以js作为入口文件的,而chunkhash,纯css的更改是不能重新构建的,所以使用extract-text-webpack-plugin插件的contenthash来进行css的hash,这样css代码和js代码也会生成不同的文件名,达到更改纯css也可以只重新拉取css数据的效果

你可能感兴趣的:(打包hash方式简记)