webpack之文件指纹

原文链接 https://blog.csdn.net/weixin_43675447/article/details/120235539. 更清楚
原文链接：https://blog.csdn.net/liuhua_2323/article/details/103322392

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

如何生成
Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的hash值就会更改

Chunkhash：和webpack打包的chunk有关，不同的entyr会生成不同的Chunkhash值（一个页面的值改变了并不会影响另一个页面，js文件一般采用此方法）

Contenthash：根据文件内容来定义hash，文件内容不变，则contenthash不变（css文件一般采用此方法）

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

1.安装依赖

cnpm i file-loader -D

2.在src下新建index.js，文件目录如下
[图片上传中...(image.png-b61771-1635577926644-0)]

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是我配置的命令

image.png

5.打包结果如下图：

image.png

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

css文件指纹简介：

    //css文件指纹
    MiniCssExtractPlugin 这个插件可以把css文件分离出来
 
    plugins:[
        new MiniCssExtractPlugin({
            filename:'[name]_[contenthash:8].css'
        })
    ]
 
    //这个插件和style互斥，
    rules:[
        {
            test:/\.css$/,
            use:[
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }
    ]