在webpack中有三种的方式生成哈希值，分别为hash、chunkhash和contenthash。这三种方式有着不同的用处，或者说在webpack的不同环境中，会使用不同的方式生成哈希值。那为什么要这样的一个区分呢？我们一起探讨下：

hash

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

chunkhash

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

contenthash

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

最新文章

  1. winform项目打包成可安装程序（vs2015）
  2. 将Jquery序列化后的表单值转换成Json
  3. No resource found that matches the given name 'android:Widget.Material.A解决方案
  4. [转] EJB到底是什么，真的那么神秘吗？？
  5. [Admin]CCTV文件分类
  6. PHP XDEBUG
  7. Scrapy学习教程
  8. CentOS 7 最小化安装之后安装Mysql
  9. 【css】web标准
  10. oracle查询最占用资源的查询
  11. 《实验数据的结构化程序设计》 2.4.4Calendar个人意见，寻求指引
  12. Worker+MQ解惑
  13. ecma6的学习好网站
  14. 2018（上）C高级第0次作业
  15. python if判断语句&计算
  16. PHP通过经纬坐标计算两个地址的距离
  17. 【map】p1184 高手之在一起
  18. C#学习笔记（35）——事件做的登录案例
  19. Vue常见指令
  20. .NET Core 管道过滤器扩展

热门文章

  1. 解决 VS Code 中 golang.org 被墙导致的 Go 插件安装失败问题
  2. moco响应中文乱码
  3. POJ Expanding Rods
  4. 第二次团队作业-需求分析（By七个小矮人）
  5. e.detail.value 获取input的值
  6. 理解numpy中ndarray的内存布局和设计哲学
  7. 《快乐编程大本营》java语言训练班 3课:java的运算符
  8. ros机器人之小乌龟仿真－路径记录
  9. 项目架构级别规约框架Archunit调研
  10. 利用Atomic, ThreadLocal, 模仿AQS, ReentrantLock