专栏首页黄腾霄的博客2020-6-1-理解webpack的hash,contenthash,chunkhash

2020-6-1-理解webpack的hash,contenthash,chunkhash

今天和大家聊一聊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将其抽取为一个单独的css文件。

此时可以使用contenthash进行标记,确保css文件内容变化时,可以更新hash。

hash用法

一般来说,没有什么机会直接使用hash。

hash会更据每次工程的内容进行计算,很容易造成不必要的hash变更,不利于版本管理。

file-loader的hash

可能有同学会表示有以下疑问。

明明经常看到在处理一些图片,字体的file-loader的打包时,使用的是[name]_[hash:8].[ext]

但是如果改了其他工程文件,比如index.js,生成的图片hash并没有变化。

这里需要注意的是,file-loader的hash字段,这个loader自己定义的占位符,和webpack的内置hash字段并不一致。

这里的hash是使用md4等hash算法,对文件内容进行hash。

所以只要文件内容不变,hash还是会保持一致。


参考文档:


本文会经常更新,请阅读原文: https://xinyuehtx.github.io/post/%E7%90%86%E8%A7%A3webpack%E4%B8%8D%E5%90%8Chash%E5%80%BC%E7%9A%84%E4%BD%9C%E7%94%A8.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名黄腾霄(包含链接: https://xinyuehtx.github.io ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Moq基础(五)

    It 这个类其实我们已经在前面有所涉及。我们使用It.IsAny<string>()匹配任意字符串。

    黄腾霄
  • 2020-3-3-使用T4模板进行C#代码生成

    有过前端开发经验的同学一定了解模板文件的重要用户。其实C#也有类似的模板功能(T4模板),不仅可以生成html文件,还可以生成代码。今天就给大家介绍一下。

    黄腾霄
  • 2020-1-6-什么是尾递归

    递归算法想必大家都已经很熟悉了。递归算法虽然简单,但是容易导致一些性能问题,于是就有了尾递归这种优化算法。

    黄腾霄
  • 如果世界上只有一种数据结构,那么我选择哈希!

    来源:blog.csdn.net/liweisnake/article/details/104779497

    芋道源码
  • djb2 hash算法

    Hash,一般翻译做“散列”,也有直接音译为“哈希”的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算法,变换成固定长度的输出,该输出就...

    李小白是一只喵
  • hash散列 introduction

    hash散列是在记录的存储位置与他的关键字之间建立的对应关系f, 使得每个key都对应一个存储位置, 查找时根据key的hash去查找.

    CoffeeLand
  • 面试题,如何在千万级的数据中判断一个值是否存在?

    当你看到这个标题的时候,你也许会想我可以使用hashmap之类的来存储值,然后get就是了。又或者把数据存在数据库里然后去判断就可以了。

    ImportSource
  • 纸上谈兵: 哈希表 (hash table)

    HASH 哈希表(hash table)是从一个集合A到另一个集合B的映射(mapping)。映射是一种对应关系,而且集合A的某个元素只能对应集合B中的一个元素...

    Vamei
  • 【专业技术】STL hash_map使用(一)

    今天在使用STL中的hash_map模板遇到使用PTCHAR作为Key时无法对字符串进行正确比较的问题。 hash_map类在头文件hash_map中,和所有其...

    程序员互动联盟
  • php hash算法类

    它可以将一个长度不固定的数据,通过算法,获取其特征值生成一个固定的,较短的数据,压缩其文件标识.

    仙士可

扫码关注云+社区

领取腾讯云代金券