Webpack文件指纹详解：Hash、Chunkhash与Contenthash的应用

作者：望舒时间：2026-10-26 09:01:35浏览：171

本文详解Webpack中文件指纹的三种类型：Hash、Chunkhash和Contenthash。通过对比它们的作用范围与适用场景，分别给出JS、CSS及图片文件在Webpack配置中的具体实现方案，帮助开发者优化缓存策略。

1. 什么是文件指纹？

文件指纹是指打包后输出文件名所附加的后缀，主要用于区分修改后的文件版本。

1. 什么是文件指纹？

2. 文件指纹有哪几种？

1. Hash：与整个项目的构建过程相关，只要项目文件发生任何修改，整个项目构建的 hash 值就会更新，通常用于图片文件的设置；

2. Chunkhash：与 webpack 打包生成的 chunk 相关，不同的 entry 会生成不同的 chunkhash 值，一般用于设置JS文件；

3. Contenthash：根据文件内容定义 hash，只要文件内容不变，contenthash 就不会改变，一般用于设置CSS文件；

3. JS的文件指纹设置；

'use strict';
 
const path = require('path');
 
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // 设置chunkhash，长度为8位
        filename: '[name]_[chunkhash:8].js'
    }
};

4. CSS的文件指纹设置；

'use strict';
 
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = {
    
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
 
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'
    },
 
    plugins: [
        new MiniCssExtractPlugin({
            // 设置CSS为contenthash，长度为8位
            filename: '[name]_[contenthash:8].css'
        })
    ]
};

5. 图片的文件指纹设置；

图片文件的指纹设置使用file-loader，常用的占位符的含义如下：

1. 什么是文件指纹？

图片的文件指纹设置如下：

'use strict';
 
const path = require('path');
// npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = {
    entry: {
        index: './src/index.js',
        search: './src/search.js'
    },
    output: {
        path: path.join(__dirname, 'dist'),
        // 设置JS的文件指纹为chunkhash，长度为8位
        filename: '[name]_[chunkhash:8].js'
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: /.js$/,
                use: 'babel-loader'
            },
            {
                test: /.css$/,
                use: [
                    // 去掉style-loader，将CSS单独提取一个文件
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /.less$/,
                use: [
                    // 去掉style-loader，将CSS单独提取一个文件
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // 设置的图片指纹为hash，长度为8位
                            name: '[name]_[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // 设置字体的指纹为hash，长度为8位
                            name: '[name]_[hash:8][ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // 将CSS提取出来一个文件
        new MiniCssExtractPlugin({
            filename: '[name]_[contenthash:8].css'
        })
    ]
};

到此这篇关于Webpack中的文件指纹的实现的文章就介绍到这了,更多相关Webpack 文件指纹内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

Docker 部署 Wiki.js 完整教程：从安装到初始化配置

2026-11-04 10:36:31

从其他平台迁移数据到 Wiki.js 的方法与注意事项

2026-11-03 23:50:05

Wiki.js 启动报错或数据库连接失败怎么排查解决

2026-11-03 09:49:52

macOS 使用 Homebrew 或 nvm 升级 Node.js 的最佳实践

2026-11-03 08:29:29

前端项目部署后如何提示用户版本更新详解

2026-11-01 02:17:48