hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从源服务器上拉取对应数据,进而更新本地缓存。但是在实际使用的时候,这几种hash计算还是有一定区别。

1、hash

  hash是跟整个项目的构建相关,只要项目里有文件更改,整个项目构建的hash值都会更改,并且全部文件都共用相同的hash值

2、chunkhash

  采用hash计算的话,每一次构建后生成的哈希值都不一样,即使文件内容压根没有改变。这样子是没办法实现缓存效果,我们需要换另一种哈希值计算方式,即chunkhash。

  chunkhash和hash不一样,它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。

3、contenthash

  在使用chunkhash的例子中,如果index.css被index.js引用了,那么就会共用相同的chunkhash值。但是这样子有个问题,如果index.js更改了代码,css文件就算内容没有任何改变,由于是该模块发生了改变,导致css文件会重复构建。
  这个时候,我们可以使用extra-text-webpack-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,那么不会重复构建。

webpack中的hash、chunkhash、contenthash区别的更多相关文章

  1. [转]webpack中require和import的区别

    webpack中可以写commonjs格式的require同步语法,可以写AMD格式的require回调语法,还有一个require.ensure,以及webpack自己定义的require.incl ...

  2. 详解webpack中的hash、chunkhash、contenthash区别

    hash.chunkhash.contenthash hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值.如果文件内容改变的话,那么对应文件哈希值也会 ...

  3. webpack中require和import的区别

    commonjs同步语法 经典的commonjs同步语法如下: var a = require('./a'); a.show(); 此时webpack会将a.js打包进引用它的文件中.这是最普遍的情形 ...

  4. Webpack 中 file-loader 和 url-loader 的区别

    如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用u ...

  5. webpack中imports-loader,exports-loader,expose-loader的区别

    Webpack有几个和模块化相关的loader,imports-loader,exports-loader,expose-loader,比较容易混淆.今天,我们来理一理. imports-loader ...

  6. webpack中hash、chunkhash、contenthash区别

    webpack中对于输出文件名可以有三种hash值: 1. hash 2. chunkhash 3. contenthash 这三者有什么区别呢? hash 如果都使用hash的话,因为这是工程级别的 ...

  7. webpack 打包产生的文件名中,hash、chunkhash、contenthash 的区别

    table th:first-of-type { width: 90px; } hash 类型 区别 hash 每一次打包都会生成一个唯一的 hash chunkhash 根据每个 chunk 的内容 ...

  8. Webpack中hash、chunkhash和contenthash三者的区别

    在webpack中有三种的方式生成哈希值,分别为hash.chunkhash和contenthash.这三种方式有着不同的用处,或者说在webpack的不同环境中,会使用不同的方式生成哈希值.那为什么 ...

  9. webpack中hash与chunkhash区别和需要注意的问题

    项目发布时,为了解决缓存,需要进行md5签名,这时候就需要用到 hash 和 chunkhash等. 问题一:hash问题 使用 hash 对js和css进行签名时,每一次hash值都不一样,导致无法 ...

随机推荐

  1. 集合类源码(七)Map(ConcurrentHashMap, ConcurrentSkipListMap, TreeMap)

    ConcurrentHashMap 内部结构 在JDK1.8之前的实现结构是:ReentrantLock+Segment+HashEntry+链表 JDK1.8之后的实现结构是:synchronize ...

  2. SQLServer查看分区表详细信息

    SQL查看分区内记录个数,常规方法需要知道分区函数然后再显示,网上看到一个一句话显示的方法 ), ps.name ) as partition_scheme, p.partition_number, ...

  3. PostgreSQL事务特性之嵌套事务

    嵌套事务的实现是基于SAVEPOINT.ROLLBACK TO SAVEPOINT和RELEASE SAVEPOINT的,也就是设置一个保存点,可以回滚到保存点和释放保存点. 测试表的初始状态如下: ...

  4. 使用SonarQube和SonarQube Scanner分析项目

    一.概述 SonarQube的安装,请参考链接:https://www.cnblogs.com/xiao987334176/p/12011623.html 配置好sonar的服务端后,接下来就要使用s ...

  5. WPF 高级篇 MVVM 附加属性

    原文:WPF 高级篇 MVVM 附加属性 WPF 特性之一 附加属性 在本文里实现文本框内容的验证 public class TextBoxHelper:DependencyObject { publ ...

  6. Java中的集合类(List,Set.Map)

    1.List 1.1 Arraylist 与 LinkedList 区别 是否保证线程安全: ArrayList 和 LinkedList 都是不同步的,也就是不保证线程安全: 底层数据结构: Arr ...

  7. vue+element 表格按需合并

    这个功能难度感觉一般般吧,记录一下,以后碰到了直接来复制,懒得再写了 效果如下: 前6列是合并,后面的有几行,动态显示几行 重点是在数据处理上面做文章,合并列大家都会,数据处理呢?这样来处理, 我们拿 ...

  8. .htaccess文件配置理解

    0x00前言.htaccess文件是用于apache服务器下的控制文件访问的配置文件,因此Nginx下是不会生效的 .htaccess可以控制错误重定向,初始页面设置,文件夹的访问权限,文件的跳转等 ...

  9. Android中实现Activity的透明背景效果

    实现方式一(使用系统透明样式) 通过配置 Activity 的样式来实现,在 AndroidManifest.xml 找到要实现透明效果的 Activity,在 Activity 的配置中添加如下的代 ...

  10. Hybris Storefront里产品图片显示不出来的分析方法

    在Hybris Backoffice里新建一个product,维护了一些图片信息,然而在Storefront上进行搜索时,无论结果列表,还是产品明细页面里,都没有对应的图片可以显示. 我的排查方法是, ...