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. Dictionary不可以迭代修改值

    var buffer = new List<string>(showDict.Keys); foreach (var key in buffer) { if (showDict[key] ...

  2. HandlerInterceptorAdapter

    handler,是指controller的@Controller注解下的整个方法名

  3. log4j打印抛出异常时堆栈内容

    JAVA 中为快速定位,抛出异常的位置.往往需要在日志中描述. log.err("异常出错点", e); 会将出错时的堆栈信息显示出来. package com.jqyc.jase ...

  4. Kubernetes增强型调度器Volcano算法分析【华为云技术分享】

    [摘要] Volcano 是基于 Kubernetes 的批处理系统,源自于华为云开源出来的.Volcano 方便 AI.大数据.基因.渲染等诸多行业通用计算框架接入,提供高性能任务调度引擎,高性能异 ...

  5. 浅析libuv源码-node事件轮询解析(1)

    好久没写东西了,过了一段咸鱼生活,无意中想起了脉脉上面一句话: 始终保持自己的竞争力.所以,继续开写! 一般的JavaScript源码看的已经没啥意思了,我也不会写什么xx入门新手教程,最终决定还是啃 ...

  6. WPF 精修篇 多属性触发器

    原文:WPF 精修篇 多属性触发器 多属性触发器就是多个属性都满足在触发 在属性触发器上加了一些逻辑判断 举栗子 这个栗子里  textBox 要满足俩个条件 才能触发背景变色 1)textbox的 ...

  7. linux 定时器日志操作

    首先先打开定时器的日志(默认是注释掉的) cron的日志功能使用syslogd服务,不同版本号linux可能装了不同的软件,这里介绍常见的两种: rsyslog-> 位置在 /etc/rsysl ...

  8. c# 自定义验证登录(Authorize)

    我们的项目本来是用azure的auth认证,是用过程中发现登录速度太慢了,所以还是自己搞一个吧,没想到搞起来挺简单的,不是用一个专门的认证服务器哈,就是一个简单的工具类. 验证是否登录的类 /// & ...

  9. vscode+flutter+win10搭建问题记录

    1.下载安装vscode.flutter sdk.安装vscode相关插件.android sdk,这些网上有教程,比如https://blog.csdn.net/SVNzK/article/deta ...

  10. Test CMake run finished with errors

    Test CMake run finished with errors 记录一个安装 CLion 过程中的错误. CLion的安装和破解教程网上有很多,大家可以自行搜索. 安装了之后在 Setting ...