一：概述

在webpack使用中，需要使用hash来做静态资源实现增量更新，文件名的hash值可以有三种hash生成方式，每一种都有不同应用场景，那么三者有何区别呢？

二：作用

在构建过程中用于生成唯一的哈希值，以便在生产环境中实现缓存策略和文件指纹

三：分类

（1）hash

1：hash是跟整个项目的构建相关，构建生成的文件hash值都是一样的，跟整个项目的构建相关，

2：同一次构建过程中生成的hash都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改。

3：如果出口是hash，那么一旦针对项目中任何一个文件的修改，都会构建整个项目，重新获取hash值，缓存的目的将失效

4：适用于在生产环境中更新整个应用程序

output: {
    filename: '[name].[hash:8].js',
    path: __dirname + '/built'
}

（2）chunkhash

1：基于特定代码块（chunk）的哈希值。当某个代码块发生变化时，chunkhash值会改变，每一次构建后生成的hash值都不一样，即使文件内容压根没有改变

2：没办法实现缓存效果

3：适用于按需加载（lazy loading）或代码分割（code splitting）的场景

entry:{
    main: path.join(__dirname,'./main.js'),
    vendor: ['vue']
},
output:{
    path:path.join(__dirname,'./dist'),
    publicPath: '/dist/',
    filname: 'bundle.[chunkhash].js'
}

（3）contenthash

1：根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值

2：在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成hash值，那么只要我们不改动公共库的代码，就可以保证其hash值不会受影响

3：适用于处理静态资源（如CSS、图片等）

const miniCssExtractPlugin=require("mini-css-extract-plugin");

module.exports={
    module:{
        rules:[
            {
                test: /\.css$/,
                use:[
                    miniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new miniExtractPlugin({
            filename: 'main.[contenthash:7].css'
        })
    }
}

四：总结

1：hash：每次构建会生成一个hash。和整个项目有关，只要有项目文件更改，就会改变hash

2：contenthash：和单个文件的内容相关。指定文件的内容发生改变，就会改变hash

3：chunkhash：和webpack打包生成的chunk相关。每一个entry，都会有不同的hash