webpack文件指纹

webpack文件指纹

前沿

As we all know， 浏览器会缓存文件。缓存的好处是，浏览器直接读取缓存文件，速度更快，用户体验好。
缺点是：当我们修改了文件内容，发布之后，用户看到的文件还是缓存中的老文件。
所以，这个时候我们需要告知浏览器，这个缓存文件不是最新的，需要加载最新的。如何做到这一步呢？我们只需要修改文件名称，当浏览器触发缓存没有命中这个文件名的时候就会重新加载。
这时候就用到了标题所提到的三者。

hash

webpack中的的hash值取自于文件内容的md5值。当文件内容变化时，hash值也会变化。
所以，如果出口时hash，那么一旦针对项目中的任意一个文件修改，都会重新获取hash。缓存的目的失效。

chunkhash

chunkhash根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。他是独立的hash。如果entry里面的其中一个文件内容改变，只会改变这个入口文件的bundle名，不会影响到其他的文件。

contenthash

contenthash表示由文件内容产生的hash值。内容不容产生的contenthash也不一样。在项目中通常会把项目中的css都抽离出对应的css文件来加以引用。
因为css文件经常在入口文件中引用。如：在main.js文件中引用css。当css变化是，js的hash也会变化，如果js变化，css的hash也会变化，这样，缓存也没有效果了，所以css文件最好使用contenthash。

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'
        })
    }
}