webpack中的hash、chunkhash、contenthash


字数:772 阅读时长:2分钟 阅读:85

随着前端工程化越来越成熟,目前比较流行的打包工具 webpackgulprollup等等,都全面、系统、科学的支持了打包文件指纹(hash)。其中 webpack 中有三种形式的指纹,分别是: hash、chunkhash、contenthash 。本文就具体讲讲这三种Hash各自的作用和使用场景。

Webpack Hash

前言

  • 文件指纹 是指打包后输出的文件名和后缀。

文件hash:一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从源服务器上拉取对应数据,进而更新本地缓存

hash

hash: 是整个项目的hash值,其根据每次编译内容计算得到,每次编译之后都会生成新的hash,即修改任何文件都会导致 所有文件的hash发生改变

chunkhash

chunkhash: chunkhashhash不一样,它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。

场景:如果采用hash计算的话,每一次构建后生成的哈希值都不一样,即使文件内容压根没有改变。这样子是没办法实现缓存效果,我们需要换另一种哈希值计算方式,即 chunkhash

contenthash

contenthash: 使用chunkhash存在一个问题,就是当在一个JS文件中引入CSS文件,编译后它们的hash是相同的,而且只要js文件发生改变 ,关联的css文件hash也会改变,这个时候可以使用mini-css-extract-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,那么不会重复构建。

指纹占位符

占位符含义
ext资源后缀名
name文件名称
path文件的相对路径
folder文件所在的文件夹
hash每次webpack构建时生成一个唯一的hash值
chunkhash根据chunk生成hash值,来源于同一个chunk,则hash值就一样
contenthash根据内容生成hash值,文件内容相同hash值就相同

提示: hash、chunkhash、contenthash 可以设定长度,类似这样定义[hash:5]

配置使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// vue.config.js

const mode = process.env.NODE_ENV
const isDev = mode === 'development'
module.exports = {
// ... 其他配置

// 关键配置
configureWebpack: {
output: {
filename: isDev ? `[name].js` : `[name].[chunkhash:5].js`,
chunkFilename: isDev ? `[name].js` : `[name].[chunkhash:5].js`,
},
},
}

注意: 本地开发环境不要配置 chunkhashcontenthash,因为编译后文件只存在于内存中,没有实际的磁盘文件,也会与热更新功能冲突。


欢迎访问:天问博客

本文作者: Tiven
发布时间: 2022-01-21
最后更新: 2022-04-14
本文标题: webpack中的hash、chunkhash、contenthash
本文链接: https://www.tiven.cn/p/337f88a7/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^