文件指纹

指的是: 打包后输出文件名的后缀

通常用于版本管理

hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存

Hash：和整个项目的构建相关，webpack打包阶段会生成Compiler，Compilation。webpack启动那一次，会生成Compiler（初始化一次）。但是每一次只要项目文件有修改，，Compilation都会发生变化。Compilation变换就会影响Hash的变换，整个项目构建的 hash 值就会更改。如果css/js都是使用hash作为文件指纹的话，那么某一个js或者css发生改变，所有打包出来的css/js指纹都会变化。不利于缓存

Chunkhash：采用hash计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即chunkhash,chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响

Contenthash：根据文件内容来定义 hash ，文件内容不变，则 contenthash 不变。某个页面既有js资源，又有css资源。如果css资源也使用Chunkhash。如果修改了js。由于css资源使用了Chunkhash，就会导致css内容没有变化，发布上线的文件却发生了变化。因此，通常对css资源使用Contenthash。这个时候可以使用mini-css-extract-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建

CSS 的文件指纹设置

设置 MiniCssExtractPlugin 的 filename，使用 [contenthash]

MiniCssExtractPlugin：将css资源提取到一个独立的文件。

module.exports = {

    entry: {

        app:'./src/app.js',

        search:'./src/search.js'

    },

    output: {

        filename:'[name][chunkhash:8].js',

        path: __dirname +'/dist'

    },

    plugins: [

        newMiniCssExtractPlugin({

            filename:`[name][contenthash:8].css`

        }),

    ]

};

在 MiniCssExtractPlugin中设置filename可以使用css文件的文件指纹策略

通常的文件缓存策略

html: header 头的 cache-control 会设置成 no-cache。也就是 html 文件不会走缓存

css/js/img 等静态资源：header头的 cache-control 设置成强缓存，缓存时间通常是1年的样子。通过文件指纹控制缓存是否失效，文件指纹一变，请求就不会走旧文件了