webpack中hash、chunkHash、contentHash的区别

文件目录：
index.js依赖common.js和base.less

hash

Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的hash值就会更改。这样会导致缓存失效。

项目中的文件只要有一个文件改变，那么整个项目文件的hash都会改变。

chunkhash

chunkhash：和webpack 打包的chunk 有关，不同的entry 会⽣成不同的chunkhash值

只有在改变某个chunk的文件时，才会生成对应的hash。比如我改变了index依赖的base.less文件构建结果如下，会发现index对应的hash改变了，而page对应的hash没有改变。

contenthash

contentHash：根据⽂件内容来定义hash ，⽂件内容不变，则contenthash不变，在项目中，通常做法是把项目中css都抽离出对应的css文件来加以引用。

如果修改了base.less文件打包看一下：
css文件和依赖less文件的chunk会发生改变。

使用经验总结

ouput打包出口使用 chunkhash
css使用contenthash
图片、字体使用hash

webpack中hash、chunkHash、contentHash的区别相关推荐

webpack中hash、chunkhash、contenthash
文件指纹是指打包后输出的文件名和后缀. hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值.如果文件内容改变的话,那么对应文件哈希值也会改变,对应的H ...
Webpack中Loader和Plugin的区别和编写思路
由于webpack基于发布订阅模式,在运行的生命周期中会广播出许多事件,插件通过监听这些事件,就可以在特定的阶段执行自己的插件任务一.区别前面两节我们有提到Loader与Plugin对应的概念,先 ...
Vue-router 中hash模式和history模式的区别
Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:&q ...
Use history mode for router? Vue-router 中hash模式和history模式的区别
再通过vue-cli创建项目的时候,会出现 Use history mode for router? 也就是再问你:是不是用history模式来创建路由 hash模式和history模式的不同最直观 ...
webpack/vue-cli 中的 publicPath / 和 ./ 的区别
webpack/vue-cli 中的 publicPath / 和 ./ 的区别在说这个问题之前,vue-cli 的配置文档已经说的非常清楚了 publicPath 而 webpack 对于 pub ...
【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...
【前端路由】Vue-router 中hash模式和history模式的区别
咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
webpack 中的 watch cache （下）
整个 watch 的过程通过事件的机制,完成几个抽象对象的逻辑串联,当触发 Watching.prototype.watch 的调用回调函数时,流程便进入到了另外一端,开始进行重新编译,相较于第一次编 ...