从源码角度看webpack的hash策略

2023-10-28 06:27:25

在webpack的构建过程中，hash策略是至关重要的，它决定了输出文件的哈希值是如何生成的。webpack提供了三种不同的hash策略，每种策略都有自己的优点和缺点。本文将从源码的角度深入探讨这三种hash策略，帮助您更好地理解它们的工作原理。

哈希策略概述

在webpack中，哈希策略用于生成输出文件的唯一标识符，该标识符用于在浏览器缓存中识别文件。通过使用哈希值，webpack可以确保在文件内容发生更改时，浏览器会加载新版本的文件，从而避免缓存问题。

webpack的hash策略

webpack提供了三种不同的hash策略：

NoHashPlugin ：此策略不生成任何哈希值。这适用于不需要缓存的文件，例如HTML文件。
HashPlugin ：此策略根据输入文件的源内容生成哈希值。这是默认的hash策略，适用于大多数情况。
ContentHashPlugin ：此策略根据编译后的代码生成哈希值。这适用于内容可能在编译过程中发生更改的文件，例如包含动态内容的文件。

从源码角度分析hash策略

要理解这三种hash策略的差异，我们需要从源码的角度进行分析。

NoHashPlugin

此策略的实现非常简单，它根本不会生成哈希值。

class NoHashPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('NoHashPlugin', compilation => {
      compilation.outputOptions.hashFunction = () => '';
    });
  }
}

HashPlugin

此策略根据输入文件的源内容生成哈希值。它使用createHash()函数，该函数接受一个哈希算法（如sha1或md5）和要散列的内容。

class HashPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('HashPlugin', compilation => {
      compilation.outputOptions.hashFunction = (content, context) => {
        const hash = createHash('sha1');
        hash.update(content);
        return hash.digest('hex');
      };
    });
  }
}

ContentHashPlugin

此策略根据编译后的代码生成哈希值。它使用webpack的Compilation对象来获取编译后的代码，然后使用createHash()函数生成哈希值。

class ContentHashPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap('ContentHashPlugin', compilation => {
      compilation.outputOptions.hashFunction = (content, context) => {
        const hash = createHash('sha1');
        hash.update(compilation.assets[context].source());
        return hash.digest('hex');
      };
    });
  }
}