Webpack打包中Hash、Chunkhash与Contenthash的区别详解
本文详细解析Webpack打包生成的三种Hash值：全局Hash、分组Chunkhash与内容Contenthash。通过多入口文件配置示例，对比修改单个文件时三种策略对缓存失效的影响，帮助开发者根据实际需求选择最优的文件命名策略以优化浏览器缓存。
引言
作者林三心，主张以通俗语言阐述复杂技术，强调基础对进阶的重要性
回顾过往校招经历
曾参加网易雷火工作室面试，被问及Webpack中三种hash配置的区别
因当时对Webpack配置不熟，未能作答，最终落选
具体是哪三种？
Webpack包含以下三种hash类型：
- hash：全局哈希
- chunkhash：分块哈希
- contenthash：内容哈希
实战演示
准备工作
需创建三个源文件：
- main.js
import './main.css'
console.log('我是main.js')
- console.js
console.log('我是console.js')
- main.css
.title {
color: #000;
}
构建环境配置
此处省略环境搭建细节，后续将单独撰文详解，本文仅展示核心配置
- webpack.config.js
// 多入口打包
entry: {
main: './src/main.js',
console: './src/console.js'
},
// 输出配置
output: {
path: path.resolve(__dirname, './dist'),
// 这里预设为hash
filename: 'js/[name].[hash].js',
clean: true
},
plugins: [
// 打包css文件的配置
new MiniCssExtractPlugin({
// 这里预设为hash
filename: 'styles/[name].[hash].css'
})
]
hash模式
基于预设的hash配置，执行npm run build命令，观察打包结果
结果显示所有文件文件名中的hash值完全一致，随后修改main.css文件
.title {
// #000 改成 #fff
color: #fff;
}
再次执行npm run build命令，观察新的打包结果：
可见，修改单个文件后，所有文件的hash值均发生变化
结论：采用hash模式时，牵一发而动全身。修改任一文件，所有输出文件的hash值均会更新，导致缓存失效。
chunkhash模式
将输出文件名规则调整为chunkhash：
entry: {
main: './src/main.js',
console: './src/console.js'
},
output: {
path: path.resolve(__dirname, './dist'),
// 修改为 chunkhash
修改 filename: 'js/[name].[chunkhash].js',
clean: true
},
plugins: [
new MiniCssExtractPlugin({
// 修改为 chunkhash
修改 filename: 'styles/[name].[chunkhash].css'
})
]
执行npm run build命令，查看打包产物：
结果显示，hash值根据入口文件不同分为两组：
- main.js与main.css归入main.js入口对应的阵营
- console.js归入console.js入口对应的阵营
接着，再次修改main.css文件：
.title {
// 从 #fff 改为 pink
color: pink;
}
重新执行npm run build命令，观察结果：
可见，main.css的修改仅影响了main.css及main.js的hash值
结论：采用chunkhash模式时，hash值按入口文件分组。修改某入口关联的文件，仅更新该组文件的hash值，不影响其他入口文件。
contenthash模式
将输出文件名规则调整为contenthash：
entry: {
main: './src/main.js',
console: './src/console.js'
},
output: {
path: path.resolve(__dirname, './dist'),
// 修改为 contenthash
修改 filename: 'js/[name].[contenthash].js',
clean: true
},
plugins: [
new MiniCssExtractPlugin({
// 修改为 contenthash
修改 filename: 'styles/[name].[contenthash].css'
})
]
执行npm run build命令，观察打包文件形态：
结果显示，每个文件的hash值均独立生成，基于其自身内容。随后修改main.css：
.title {
// pink 修改为 blue
color: blue;
}
重新打包，观察结果：
可见，main.css的修改仅影响其自身的hash值
结论：采用contenthash模式时，每个文件的hash值独立生成。修改某文件内容，仅更新该文件自身的hash值，不影响其他文件。
以上即为Webpack打包三种hash值的详细解析，更多Webpack相关技巧请参阅本站其他文章！
Mock.js 与 MSW、YApi 对比：前端接口模拟工具怎么选
2026-11-04 22:55:05
Turf.js 安装与引入：NPM 打包及 CDN 快速上手指南
2026-11-03 23:23:32
JS代码混淆后无法调试？Source Map配置与浏览器断点技巧
2026-11-03 14:12:17
前端JS发送HTTP请求遇到跨域(CORS)报错怎么解决
2026-11-02 10:30:07
Three.js怎么安装：npm引入与CDN加载方法
2026-11-02 09:23:52
