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. mybatis 报Invalid bound statement(not found) 和 Property 'mapperLocations' was not specified or not matching resources found

    排除问题的步骤: 1.首先检查mapper文件和mapper接口的文件名是否相等. 2.pom.xml是否把xml排除了,这样写就会src/main/java下所有的Mybatis的xml文件都删除, ...

  2. 一个简单的利用 HttpClient 异步下载的示例

    可能你还会喜欢 一个简单的利用 WebClient 异步下载的示例  ,且代码更加新. 1. 定义自己的 HttpClient 类. using System; using System.Collec ...

  3. 硬件笔记之制作MacOS Mojave U盘USB启动安装盘方法

    0x00 概述 随着苹果 macOS Mojave 正式版发布,很多使用 Mac 电脑的同学都已升级到最新版了.但如果你对系统有洁癖或原本系统已凌乱不堪,那么可能还是希望能格式化「全新安装 macOS ...

  4. axios FastMock 跨域 代理

    发送请求: 实现:发送请求,获取数据. 原本想自己写服务,后来无意间找到FastMock这个东东,于是就有了下文... 首先我安装了axios,在fastmock注册好了并创建了一个接口,怎么搞自行百 ...

  5. Asp.net MVC企业级开发(01)---Autofac

    1.1 控制反转 在面向对象设计的软件系统中,它的底层都是由N个对象构成的,各个对象之间通过相互合作,最终实现系统的业务逻辑.同时,对象之间的耦合关系是无法避免的,也是必要的,这是协同工作的基础.但是 ...

  6. 【转载】C#中Datatable修改列名

    在C#的数据表格DataTable操作过程中,有时候会遇到修改DataTable数据表格的列名的需求,其实C#中的DataTable的列名支持手动修改调整,可以通过DataTable类的Columns ...

  7. css的尺寸、display的属性、以及浮动和清除浮动的方法

    css的尺寸width heightline-height 行高是由三部分构成,上间距 文本高度 下间距,且上下间距相等.所以文字居中.行高:一旦设置了行高,元素内部必须有内容.line-height ...

  8. QPainter绘制图片填充方式(正常大小、剪切大小、自适应大小、平铺)

    Qt中QPainter提供了绘制图像的API,极大地方便了我们对图像的绘制. Qt中提供了QPixmap, QBitmap,QBitMapQImage,QPicture等图像绘图设备,它们的类关系如下 ...

  9. Myapp

    一.github地址:https://github.com/jianghailing/rjgcsecondwork 二.PSP表格: PSP2.1 Personal Software Process ...

  10. 修改ceph的IP地址

    目录 修改步骤如下 1.导出mon配置 2.修改mon配置 3.修改ceph的配置文件 4.关闭ceph集群(建议将集群内的所有节点中的ceph都关闭) 5.修改服务器IP 6.导入修改后的mon 7 ...