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

🎉 博客主页：【剑九 六千里-CSDN博客】
🎨 上一篇文章：【谈谈关于对webpack热更新的原理？】
🎠 系列专栏：【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍

1. Hash码的生成

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

2. 避免Hash码一致

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

2.1 确保文件内容唯一：

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

2.2 使用chunkhash：

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

2.3 增加文件名前缀：

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

2.4 优化哈希算法：

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

2.5 使用Module IDs：

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

2.6 配置webpack输出选项：

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

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

3. 配置生成Hash的规则

在webpack配置文件（通常为webpack.config.js）中，你可以通过设置output对象的filename和chunkFilename属性来控制输出文件的命名方式，包括使用hash或chunkhash。下面是一个例子：

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]即可：

filename: '[name].[hash].js',
chunkFilename: '[name].[hash].chunk.js',

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