webpack之文件指纹

最新推荐文章于 2025-06-10 21:43:34 发布

原创最新推荐文章于 2025-06-10 21:43:34 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

webpack 专栏收录该内容

14 篇文章

订阅专栏

本文深入解析文件指纹技术，包括其生成原理与应用，如Hash、Chunkhash和Contenthash的区别及如何在Webpack中配置不同类型的文件指纹，适用于版本管理和资源更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是文件指纹

文件指纹是文件打包后输出的文件名的后缀，通常用来做一些文件的版本管理

如何生成

Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改
Chunkhash：和webpack打包的chunk有关，不同的entyr会生成不同的Chunkhash值（一个页面的值改变了并不会影响另一个页面，js文件一般采用此方法）
Contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变（css文件一般采用此方法）

下面我们来看一个例子，以图片的文件指纹为例

1.安装依赖

cnpm i file-loader -D

2.在src下新建index.js，文件目录如下

3.下面我们就来配置webpack

"use strict";

const path=require('path');

module.exports={
    entry:'./src/indexs.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'[name]_[chunkhash:8].js'   //js的文件指纹
    },
    mode:'production',
    module:{
        rules:[
            {
                test:/\.(png|jpg|svg|gif)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[name]_[hash:8].[ext]'  //图片的文件指纹,ext为文件后缀名
                        }
                    }
                ]
            }
        ]
    }
}

4.npm run build运行打包，npm run build是我配置的命令

5.打包结果如下图：

注意：文件指纹没法和热更新一起使用

css文件指纹简介：

    //css文件指纹
    MiniCssExtractPlugin 这个插件可以把css文件分离出来

    plugins:[
        new MiniCssExtractPlugin({
            filename:'[name]_[contenthash:8].css'
        })
    ]

    //这个插件和style互斥，
    rules:[
        {
            test:/\.css$/,
            use:[
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }
    ]