【八股系列】webpack打包时Hash码是怎样生成的?随机值存在一样的情况,如何避免?

文章目录

  • [1. Hash码的生成](#1. Hash码的生成)
  • [2. 避免Hash码一致](#2. 避免Hash码一致)
    • [2.1 确保文件内容唯一:](#2.1 确保文件内容唯一:)
    • [2.2 使用chunkhash:](#2.2 使用chunkhash:)
    • [2.3 增加文件名前缀:](#2.3 增加文件名前缀:)
    • [2.4 优化哈希算法:](#2.4 优化哈希算法:)
    • [2.5 使用Module IDs:](#2.5 使用Module IDs:)
    • [2.6 配置webpack输出选项:](#2.6 配置webpack输出选项:)
  • [3. 配置生成Hash的规则](#3. 配置生成Hash的规则)

1. Hash码的生成

webpack打包过程中,hash码并不是随机生成的,而是基于文件内容 的哈希值。这个哈希值是通过对文件内容进行哈希运算 (通常是SHA-1MD5)来得到的,确保内容的任何变化都会导致生成不同的哈希值 。这样做的目的是确保每次文件内容有变动 时,输出的文件名也会相应改变 ,从而强制浏览器重新下载更新的资源

2. 避免Hash码一致

当两个不同的文件意外地生成相同的hash值时,这通常是因为它们的内容实际上是相同的,或者在哈希算法的极小概率事件下出现了碰撞。为了减少这种可能性并确保每个文件的hash码是唯一的,可以采取以下策略:

2.1 确保文件内容唯一:

  • 确保每个模块或文件都有其独特的标识,避免重复的代码或资源。
  • 如果是动态生成的文件,确保每次生成的内容都有微小差异。

2.2 使用chunkhash:

  • 除了hash之外,webpack还提供了chunkhashchunkhash是基于整个chunk(也就是按需加载的模块组合)的哈希,而不是单个文件。这更适用于代码分割,因为它只会在chunk内容改变时更新。

2.3 增加文件名前缀:

  • 可以在webpack配置中添加一个前缀或者时间戳,这将确保即使哈希碰撞,文件名也是唯一的。

2.4 优化哈希算法:

  • 可以考虑调整webpack使用的哈希算法,选择一个更不容易出现碰撞的算法。如:SHA-256SHA-3,它们的碰撞概率更低。

2.5 使用Module IDs:

  • Webpack 4引入了contenthash,它是基于模块内容的哈希,可以用于避免因为模块ID相同而导致的哈希冲突。

2.6 配置webpack输出选项:

  • 确保webpack的输出配置output.filenameoutput.chunkFilename正确设置了哈希模式,例如[name].[chunkhash].js

通过以上方法,可以有效地降低hash码重复的可能性,确保webpack打包后的文件名能够准确反映文件内容的变化。

3. 配置生成Hash的规则

webpack配置文件(通常为webpack.config.js)中,你可以通过设置output对象的filenamechunkFilename属性来控制输出文件的命名方式,包括使用hashchunkhash。下面是一个例子:

javascript 复制代码
const path = require('path');

module.exports = {
  // 其他配置...
  
  output: {
    path: path.resolve(__dirname, 'dist'), // 输出目录
    filename: '[name].[contenthash].js', // 普通文件的命名,使用contenthash
    chunkFilename: '[name].[contenthash].chunk.js', // chunk文件的命名,也使用contenthash
  },
  
  // 其他配置...
};

在这个配置中,[name]代表每个chunk的名称,而[contenthash]则是基于chunk内容生成的哈希值。每次你的代码发生变化,这些哈希值就会更新,确保浏览器会获取到最新的文件。

如果想要使用hash而不是contenthash,只需要将上面的[contenthash]替换为[hash]即可:

javascript 复制代码
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].chunk.js',

hash是基于整个项目的哈希,而contenthash是基于每个单独chunk的哈希。在大多数情况下,contenthash是更好的选择,因为它只在相关代码更改时才更新,减少了不必要的文件重命名。

相关推荐
别拿曾经看以后~36 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死39 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试42 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc1 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter