打包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数据的效果

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,848评论 1 45
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 11,474评论 0 21
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,449评论 4 31
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,907评论 7 110
  • 情绪真的是个控制不好的东西,也没办法预料到它什么时候来,今晚本来以为加了彼此微信是一件很开心的事,哪晓得还闹的自己...
    补不齐的圆圈阅读 251评论 0 0

友情链接更多精彩内容