前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2020-6-1-理解webpack的hash,contenthash,chunkhash

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

作者头像
黄腾霄
发布2020-06-10 15:23:27
2.8K0
发布2020-06-10 15:23:27
举报
文章被收录于专栏:黄腾霄的博客

今天和大家聊一聊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 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-06-01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题来源
  • 区分hash,contenthash,chunkhash
    • chunkhash用法
      • contenthash用法
        • hash用法
        • file-loader的hash
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档