序言
当我们说起webpack 指纹锁，听起来就不知所措啊，都被这些高大上的词唬住了。其实并不是这样的，他到底是什么呢？？无非就是hash值。接下来我们一起来探索下，我会结合代码以及实例来进行讲述
实例目录结构
- 我们会在webpack中配置两个入口：mian 以及main1
- 在入口main中 通过import引入了两个文件brach.js, brach1.js
指纹锁探秘
1. 占位符使用
| 占位符名称 | 含义 |
|---|---|
| ext | 资源后缀名 |
| name | 文件名称 |
| path | 文件的相对路径 |
| folder | 文件所在的文件夹 |
| hash | 每次webpack构建时生成一个唯一的hash值 |
| contenthash | 根据内容生成hash值，文件内容相同hash值就相同 |
| chunkhash | 根据chunk生成hash值，来源于同一个chunk，则hash值就一样 |
2. hash值
- 修改前打包hash值：
- 修改后打包hash值：
-- 其实我就修改了一个branch.js的打印值，导致了hash值发生了变化
3. contenthash 值
- 修改前的hash值
- 修改后的hash值
- 只是将branch.js的进行修改，通过上面的截图我们可以看到，对应文件的hash值发生变化，导入这个文件的主入口的hash也发生了变化，其余的hash值不变的
4. chunkhash 值
- 修改前的hash值
- 修改后的hash值
- 通过上述代码我们可以到，我只是修改了mian1.js 内容，这个入口的hash值发生了变化
指纹用途
hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存
- 通过上述的描述可以看下，其实hash也是为了配合cdn以及其余的缓存的。
优缺点
- hash值：如果使用hash的话，每次打包所有的文件共享一个hash值，一旦一个文件发生了变化，hash值重置，所有的文件名字都发生了变化，这样其实起不到缓存的作用
- contenthash值：顾名思义只有文件内容发生了变化才会生成新的hash值，但是也是有问题存在的，使用chunkhash存在一个问题，就是当在一个JS文件中引入CSS文件，编译后它们的hash是相同的，而且只要js文件发生改变 ，关联的css文件hash也会改变,这个时候可以使用
mini-css-extract-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，那么不会重复构建 - chunkhash值：- chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响
结束语
以上是我自己对hash指纹锁的理解，如果不对的地方欢迎大家指正啊....
- 上述地址的代码地址：webpack-hash
- 其实小编还写了其他的文章，可以参照个人博客
