定义:由文件名与hash值拼接而成
作用:性能优化,用于版本控制。只有检测到文件发生变化,才会生成新的hash,我们只要把更新的文件发布上去即可。未更新的文件无需替换,客户端的缓存文件依旧有效
分三类:
Hash:任一文件的变化,整个项目的hash值都会发生变化
Chunkhash :和webpack 的chunk相关,不同的entey 会生成不同的chunkhash
Contenthash: 文件内容不变,则contenthash也不变,多用于css。图片也可用
文件指纹的设置
Js的文件指纹设置
设置output 的 filename,使用[chunkhash:8],
css文件指纹设置
设置 MiniCssExtractPlugin 的filename,使用[contenthash]
借助MiniCssExtractPlugin 生成css文件。如果使用css loader 和 style loader ,它是以style标签的形式插入head中的,没法使用contenthash
图片或字体文件的指纹设置
设置 file-loader 的name,使用 [hash]
这里的hash,指的是文件内容的hash,默认是md5生成
思考:
- 新的资源文件如何覆盖旧的资源文件?
相关知识点: - Http 的缓存策略
- bundle chunk module 三者的关系
Module 表示模块,每个文件都可以看作一个模块
chunk 表示块,由各模块生成
Bundle 打包后的最终文件
