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. 一个简单 System.Threading.Tasks.Dataflow.BufferBlock 示例

    直接贴代码了: using System; using System.Threading.Tasks; using System.Threading.Tasks.Dataflow; namespace ...

  2. WPF DataGrid横向显示

    前言 利用各种变换,将其水平改向至横向显示. 注意的是要固定好单元格的高宽,或者手动编写style 否者在滚动的时候,会有高宽比例不一样的时候 再其次,要注意datagrid的容器或者datagrid ...

  3. PyCharm创建Django项目并连接mysql数据库

    0. 安装Django pip install django 1. 新建项目 注:我的Pycharm为社区版,创建项目时,File->New Project- 显示为: ​ 注意勾选内容. 如果 ...

  4. 【模板整合计划】NB数论

    [模板整合计划]NB数论 一:[质数] 1.[暴力判] 素数.コンテスト.素数 \(\text{[AT807]}\) #include<cstdio> #include<cmath& ...

  5. 【JVM】jstat命令详解---JVM的统计监测工具

    java进程的PID获取命令: https://www.cnblogs.com/sxdcgaq8080/p/10734752.html ================================ ...

  6. jquery动画控制非css属性

    JQuery的animate()方法可以通过渐变的更改CSS属性来实现简单的动画效果, 比如 $("#box").animate({height:"300px" ...

  7. win10家庭版添加本地策略

      在桌面新建一个空文件夹(此处是需要新建文件夹而并非文件),文件夹的名称大家随意即可.如下图所示:   打开刚刚新建的文件夹(双击文件夹则打开文件夹).如下图所示:   在刚刚我们打开的文件夹资源地 ...

  8. C# 文件操作总结

    一.需求分析 1.将信息记录到本地记事本中. 2.将记录的信息读取出来. 3.计算出某个文件夹下所有后缀名为txt的数量和dll的数量. 4.从网络上下载文件. 二.二话不说上代码 using Sys ...

  9. 基于.net EF6 MVC5+WEB Api 的Web系统框架总结(4)-Excel文件读、写操作

    Excel文件读.写可以使用Office自带的库(Microsoft.Office.Interop.Excel),前提是本机须安装office才能运行,且不同的office版本之间可能会有兼容问题.还 ...

  10. python2.7 与python3.X区别

    1,print("中文") python2.7,会报错  原因:py2.7用ascll码 解决:2.7头部加入并保存的文件用utf-8编码 # -*- coding: utf-8 ...