// 简化的哈希计算逻辑
const crypto = require("crypto");

function generateHash(content) {
  return crypto
    .createHash("md5") // 使用MD5算法
    .update(content) // 输入内容
    .digest("hex") // 输出16进制格式
    .substring(0, 8); // 取前8位作为短哈希
}

3、输出应用阶段

将生成的哈希插入文件名：main.[hash].js → main.a1b2c3d4.js
不同哈希类型区别：
- [hash]：基于整个构建
- [chunkhash]：基于代码块内容
- [contenthash]：基于文件完整内容

四、具体配置

1、配置建议

所有静态资源统一使用 contenthash
JS 入口文件可搭配 runtimeChunk 使用
禁用 hash（Webpack 5 已默认弃用）

为什么推荐 contenthash？‌

‌精准缓存控制‌：单个文件变更不影响其他资源哈希
‌CDN 友好‌：内容变化时自动刷新 CDN 缓存
‌Tree-shaking 安全‌：避免因哈希连锁变化导致的冗余代码

2、完整示例

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: 'js/[name].[contenthash:10].js',
    assetModuleFilename: 'assets/[name].[contenthash:10][ext]'
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
  ],
};

五、哈希碰撞

1、什么是哈希碰撞

哈希碰撞是指两个文件根据文件特征计算出的哈希值相同。如果文件本身重名，可能会导致严重的缓存和版本管理问题。

如果文件内容相同，一定会产生哈希碰撞，但是一般不会影响代码运行。

如果内容不相同，产生哈希碰撞的概率极低，如果遇到了，就可能会导致代码运行出错。

2、哈希碰撞的危害

哈希碰撞主要影响 Webpack 的 emitAssets 阶段，这个阶段会输出 bundle 到指定目录下。这时候如果遇到了完全同名的 bundle，可能会发生 内容覆盖 的现象，即 后生成的 bundle 会覆盖之前生成的 bundle，最终只剩下一份。如果这些 bundle 的内容不相同，就意味着依赖这些 bundle 的代码在运行时可能会出现非常严重的问题。

3、如何解决

解决办法主要是通过更换算法、调整内容生成策略、增长哈希值长度、手工加盐（salt） 来降低碰撞的概率。

使用更复杂的哈希算法

可以指定 webpack 使用更复杂的哈希算法：例如 SHA-256、SHA-512 等。这些算法的哈希值复杂度更高、长度更长、碰撞的概率也更低。

// 使用 webpack 5 的新特性：混合指纹算法
// 组合 SHA-3 + BLAKE3 双重校验
experiments: {
  hybridHash: {
    js: 'sha3-256',    // JS 用抗量子算法
    media: 'blake3'    // 多媒体用高速算法
  }
}

修改哈希算法的生成策略

contenthash：根据文件内容计算的哈希值，所以文件内容不同，contenthash 也不同，不会产生哈希碰撞。
chunkhash：根据文件所属的代码块（chunk）来计算的哈希值，所以如果文件所属的代码块内容不同，生成的 chunkhash 也不同，不会产生哈希碰撞。

修改哈希值长度

// 根据文件体积自动调整哈希位数
output: {
  filename: '[name].[contenthash:auto].js',  // 体积>1MB → 16位
  assetModuleFilename: '[name].[hash:12][ext]' // 12 位 Hash
}

人工加盐

在 bundle 的文件名中加入一些变化的字符串，如文件的 size、时间戳，这样即使文件内容完全相同，哈希值也会不同，从而避免哈希碰撞。

// 采用 12 位哈希 + 时间戳双校验
filename: `[name].[contenthash:12].${Date.now()}.[ext]`;

使用 plugin 插件检测

可以通过插件来获取并临时保存构建过程中产生的 bundle 信息，在构建过程中随时比对，发现有重复的 bundle 就报错，或者重新生成一个新的 bundle 名称。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24