Webpack 的 hash 和 chunkhash 的意义及其区别-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Webpack 是一个常用的打包工具，它可以将多个 JavaScript、CSS、图片等文件打包成一个或多个文件。同时，在打包的过程中，Webpack 还会为每个文件生成一个唯一的 hash 值，以实现缓存的更新。除了 hash 值，Webpack 还提供了 chunkhash 值，这两者有什么区别呢？

hash 值的意义

hash 值是 Webpack 在打包的过程中为每个文件生成的唯一的哈希值，它的计算方式是将文件内容转换成字符串，再使用 hash 算法生成哈希值。对于同一份文件，只要文件内容不变，就会生成相同的 hash 值。因此，通过 hash 值，我们可以判断文件是否有变化，如果没有变化，就可以直接使用缓存的文件，提高页面加载速度。

示例代码：

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
};

在这个示例代码中，我们配置了一个 Webpack 打包的入口文件和输出文件，其中，filename 中使用了 [hash] 占位符来表示生成的 hash 值。这样，在每次打包后，生成的文件名都会包含唯一的 hash 值，从而实现了缓存的更新。

chunkhash 值的意义

chunkhash 和 hash 的主要区别在于，hash 值是根据整个打包后的文件计算的，而 chunkhash 值是根据每个单独的入口文件和它依赖的模块所生成的代码块计算的。也就是说，只有某个文件发生了变化，它对应的 chunkhash 值才会变化，而其他文件的 chunkhash 值则不会改变。

示例代码：

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js',
        about: './src/about.js'
    },
    output: {
        filename: '[name].[chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            chunks: ['index'],
            filename: 'index.html'
        }),
        new HtmlWebpackPlugin({
            chunks: ['about'],
            filename: 'about.html'
        })
    ]
};

在这个示例代码中，我们配置了两个 Webpack 打包的入口文件和输出文件，其中，filename 中使用了 [chunkhash] 占位符来表示生成的 chunkhash 值。通过配置额外的 HtmlWebpackPlugin，我们可以将生成的打包文件分别应用于 index.html 和 about.html 中。

区别与使用

综上所述，hash 值和 chunkhash 值的主要区别在于，前者是根据整个打包后的文件计算的，而后者是根据每个单独的入口文件和它依赖的模块所生成的代码块计算的。因此，在开发中，我们可以根据需要来选择使用哪一个占位符。

如果我们需要在所有模块中添加版本号，并且只要其中任何一个文件发生变化，都需要重新生成 hash 值，在这种情况下，我们可以选择使用 [hash] 占位符。
如果我们需要对每个入口文件和它依赖的模块分别添加版本号，并且只有特定的文件发生了变化，我们才需要重新生成 chunkhash 值，在这种情况下，我们可以选择使用 [chunkhash] 占位符。

当然，也可以使用 [contenthash] 占位符来表示模块内容的 hash 值，例如：

// www.javascriptcn.com code example
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
};

通过使用 [contenthash] 占位符，我们可以在文件内容发生变化时重新生成 hash 值，从而实现更精确的缓存管理。

综上所述，hash 值、chunkhash 值和 contenthash 值都是 Webpack 中用于管理缓存的占位符，在实际开发中，我们可以根据需要来选择使用不同的占位符，并合理配置缓存的更新策略，以提高页面加载速度和用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d624b8a941bf7134bcc27a

Webpack 的 hash 和 chunkhash 的意义及其区别

hash 值的意义

chunkhash 值的意义

区别与使用

接着读