理解webpack的hash，contenthash，chunkhash

最新推荐文章于 2024-04-27 04:27:39 发布
最新推荐文章于 2024-04-27 04:27:39 发布
阅读量626 收藏
点赞数
分类专栏： 前端 文章标签： 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/htxhtx123/article/details/106479847
版权

今天和大家聊一聊webpack中不同hash值的作用。

问题来源

对于浏览器来说，一方面期望每次请求页面资源时，获得的都是最新的资源；一方面期望在资源没有发生变化时，能够复用缓存对象。

这个时候，使用文件名+文件哈希值的方式，就可以实现只要通过文件名，就可以区分资源是否有更新。

而webpack就内置了hash计算方法，对生成文件的可以在输出文件中添加hash字段。

区分hash，contenthash，chunkhash

webpack内置的hash有三种：

  • hash：每次构建会生成一个hash。和整个项目有关，只要有项目文件更改，就会改变hash
  • contenthash：和单个文件的内容相关。指定文件的内容发生改变，就会改变hash。
  • chunkhash：和webpack打包生成的chunk相关。每一个entry，都会有不同的hash。

那么我们该怎么使用这些不同的hash值呢？

chunkhash用法

一般来说，针对于输出文件，我们使用chunkhash。

因为webpack打包后，最终每个entry文件及其依赖会生成单独的一个js文件。

此时使用chunkhash，能够保证整个打包内容的更新准确性。

contenthash用法

对于css文件来说，一般会使用MiniCssExtractPlugin将其

最低0.47元/天 解锁文章
xinyue_htx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack之 hash、 chunkhash 、 contenthash
追逐丶的博客
11-04 1519
一、背景 对于Webpack的output属性，大家都知道可以配置文件的输出名称。一般来说，默认的配置都是这样： output: { filename: '[name].[hash].js', path: path.resolve(__dirname, 'dist') } 翻看官方文档，我们发现hash 还可以替换为 chunkhash，那么这些到底有什么区别？对于我们的意义又是什么？ 我们知道，浏览器为了优化体验，会有缓存机制。如果浏览器判断当前资源没有更新，就不会去服务端下载，而是直接
详解webpack中的hash、chunkhash、contenthash区别
08-28
详解webpack中的hash、chunkhash、contenthash区别 hash是一种常见的webpack哈希值计算方式，主要用于实现CDN缓存机制。当文件内容改变时，hash值也会改变，从而触发CDN服务器从源服务器上拉取对应数据，进而更新...
webpack中hash、chunkhash和contenthash
逸尘的专栏
12-04 742
https://www.cnblogs.com/giggle/p/9583940.html https://blog.csdn.net/bubbling_coding/article/details/81561362 https://github.com/sorrycc/roadhog/issues/510 https://github.com/webpack/webpack/releases/t...
Vue进阶（七十）：了解 webpack 的 hash、chunkhash、contenthash_vue chunkhash
最新发布
2401_84435768的博客
04-27 338
【代码】Vue进阶（七十）：了解 webpack 的 hash、chunkhash、contenthash_vue chunkhash。
Webpack中hash的用法
weixin_34007886的博客
07-19 1229
在webpack的配置项中，可能会见到hash这样的字符。 当存在hash配置的时候，webpack的输出将可以得到形如这样的文件： page1_bundle_54e8c56e.js 这种带哈希值的文件名，可以帮助实现静态资源的长期缓存，在生产环境中非常有用。关于这一点的详细内容，可以参考这篇久远的大公司里怎样开发和部署前端代码。 在we...
webpack的hash、chunkhash、contenthash
linjingyg的博客
01-21 990
　　对于webpack的hash，常用于cdn缓存。我理解的是文件不变的情况下，最后打包出来的hash串也不会变。最近被问到了这是三个hash的区别，就查了一下，发现还很有讲究。 　　先看一下三个hash的解释： 　　[hash] is a "unique hash generated for every build"[chunkhash] is "based on each chunks' content"[contenthash] is "generated for extracted conten
webpack 文档（指南） - 缓存 （hash、chunkhash和contenthash）
qq_36605165的博客
05-23 702
浏览器在多次访问静态资源文件的时候，如果该文件已经在本地缓存，并且它的名称没有改变，那么浏览器会认为它没有被更新，便不会去请求服务器，而是使用该静态资源的缓存版本。如果某个文件被更改，我们希望浏览器应该重新请求它，而不是使用缓存版本，所以文件被修改后，它的名称也应该被改变。 在 webpack 中，最后生成的 chunk 文件都是由一个个的 module 编译后组合而成的，浏览器请求的 JS 文件实际上就是一个个的 chunk 。当我们修改某个 module 后，其所属 chunk 打包后的 JS 文件名称
webpack-sha-hash:插件以SHA哈希替换webpack的默认chunkhash哈希
05-15
该插件用SHA代替了Webpack的标准chunkhash。 该项目是基于SHA而不是MD5的的分支。 为什么？ 因为MD5已经成为过去，所以为什么要继续使用它呢？ :) SHA哈希是使用创建的现状和路线图查看问题/标签和里程碑，以了解下...
webpack-plugin-hash-output：用于使用最终文件内容的md5哈希替换webpack chunkhash的插件
02-06
webpack插件哈希输出 插件以最终文件内容的md5哈希替换webpack chunkhash。安装与npm npm install webpack-plugin-hash-output --save-dev带纱yarn add webpack-plugin-hash-output --dev为什么？ 还有其他的webpack...
深入理解 webpack 文件打包机制(小结)
08-28
在实际应用中，理解这些打包机制对于优化项目性能和提升开发效率至关重要。你可以通过阅读 Webpack 的配置文件（如 `webpack.config.js`），学习如何配置入口、输出、加载器和插件，以适应项目需求。同时，持续关注 ...
webpack中chunkHash和contentHash的区别
weixin_41107170的博客
05-17 673
首先什么是webpack？本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。 webpack有各种哈希值(hash)，一般是结合CDN缓存来使用以达到前端性能优化的目的。每次项目构建hash时对应的哈希值会改变，对应的HTML引用的URL地址也会改变，进而触发CDN服务器从源服务器上拉取对应数据，然后便能更新本地缓存。 下面简单讲讲chunkH.
03.webpack中hash，chunkhash和contenthash 的区别
sky___Show的博客
11-17 591
在 webpack 中有三种生成哈希值规则的方式，可以用来区分文件是否修改。hash 与整个项目有关，项目里有文件修改，所有文件的哈希值都会变化。chunkhash 与入口有关，同一入口的文件被视为一个整体，当其中一个文件修改时，同入口的所有文件哈希值发生改变。contenthash 只与文件内容有关，文件内容发生改变，才会更改该文件的哈希值。
webpack中文件打包 hash、chunkhash、contenthash 的区别
Neokekeke的博客
08-21 3875
spa-cli custom cli supply for vue or react branch master – base vue      – base + vue config react    – base + react config
webpack中hash&chunkhash&contenthash的使用
前端踩坑之路
03-02 897
问题背景 修改代码后，重新打包发布代码之后，打开页面之后控制台有些 css 文件会出现 404，如下图所示： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygY9JLmO-1614681559215)(http://chuantu.xyz/t6/741/1614658703x992245862.png)] 需求： 如果当前文件没有改变，则每次打包之后对应文件的哈希值不会改变。 hash 的应用 hash 一般结合 CDN 缓存来使用，通过 webpack 构建之后，生成对应
webpack之原理篇（二）：hash、chunkhash、contenthash的认识
I大俊
11-12 1926
hash,chunkhash和contenthash的区别与应用
webpack 中，hash、chunkhash、contenthash 的区别是什么呢？
hfdxmz_3的博客
05-19 259
首先来个背景介绍，哈希一般是结合 CDN 缓存来使用的。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的 HTML 引用的 URL 地址也会改变，触发 CDN 服务器从源服务器上拉取对应数据，进而更新本地缓存。 4.1 hash hash 计算是跟整个项目的构建相关，我们做一个简单的 demo。 沿用案例 1 的 demo 代码，文件目录如下： src/ ├── index.css ├── index.html ├── index.js └── utils.js webpack 的核心
contenthash才是缓存的重要hash - webpack hash contenthash chunkhash你真的懂了吗?
包磊磊的博客
04-20 2247
前言: webpack已经成为了目前最流行的打包工具，随着它的关注度越高，我们越来越关注它的性能优化，如何优化编译速度，减小打包体积...，这篇文章将讲述的是webpack编译时产生的三种hash hash -- 编译产生 webpack在实例化的时候会在全局创建一个Tapable子类Compiler, 该实例掌握了初始化配置信息，运行编译入口函数，注册和调用插件等等。 每次编译的时候都会...
13. 重学webpack——一文彻底了解hash、chunkhash和contenthash的区别
2024路在何方
07-30 2782
推荐：《webpack学完这些就够了》 《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记，配置和原理应有尽有。现在由于webpack5.0的诞生，打算从现在开始从0开始写一遍webpack5.0的学习笔记，与大家一起分享学习。 以下是本节正文： 一文彻底了解hash、chunkhash和contenthash的区别 在webpack打包中，通常哈希的种类有项目hash、chunkhash、contenthash。而哈希一般是结合CDN缓存来使用的。通过web
webpack中hash作用
07-25
在Webpack中，hash的作用是为了解决缓存问题。当我们构建一个Web应时，通常会将JavaScript、CSS其他静态资源文件打包为一个多个文件，并将它们引入到HTML文件中。浏览器会将这些缓存起来，提高网页的加载速度。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值