指纹占位符
一、认识
文件指纹 是指打包后输出的文件名和后缀。
二、ext 占位符
资源后缀名[ext]
三、name 占位符
文件名称[name]
四、path 占位符
文件的相对路径[path]
五、hash 占位符
对于浏览器来说，一方面期望每次请求页面资源时，获得的都是最新的资源；一方面期望在资源没有发生变化时，能够复用缓存对象。这个时候，使用文件名+文件哈希值的方式，就可以实现只要通过文件名，就可以区分资源是否有更新。而webpack就内置了hash计算方法，对生成文件的可以在输出文件中添加hash字段。
Webpack 中的 Hash 策略有三种:
-
hash: 项目每次构建都会生成一个hash，和整个项目有关，项目任意地方有改变就会改变。hash会更据每次工程的内容进行计算，很容易造成不必要的hash变更，不利于版本管理。 一般来说，没有什么机会直接使用hash。 -
chunk hash: 和webpack打包生成的chunk相关。每一个entry，都会有不同的hash。一般来说，针对于输出文件，我们使用chunkhash。因为webpack打包后，最终每个entry文件及其依赖会生成单独的一个js文件。此时使用chunkhash，能够保证整个打包内容的更新准确性 -
content hash: 和单个文件的内容相关。指定文件的内容发生改变，就会改变hash，内容不变hash值不变。对于css文件来说，一般会使用MiniCssExtractPlugin将其抽取为一个单独的css文件。此时可以使用contenthash进行标记，确保css文件内容变化时，可以更新hash
5.1 hash
hash 指纹占位符生成的效率最高，成本最低，影响的范围最大，精度最低。
function createHash() {
return require('crypto').createHash('md5');
}
const entry = {
entry1: 'entry1',
entry2: 'entry2',
};
const entry1 = 'require("./module1")';
const entry2 = 'require("./module2")';
const module1 = 'module1';
const module2 = 'module2';
const hash = createHash().update(entry1).update(entry2).update(module1)
.update(module2)
.digest('hex');
console.log(hash);
根据原理可知: entry1、entry2、entry3、entry4 其中任何一个文件发生改变，都会重新生成 hash 值。整个 webpack 构建的项目共用一个 hash
5.2 chunkhash
chunkhash 指纹占位符生成的效率仅次于 hash ，成本也不高，影响的范围仅次于 hash，精度高于 hash。
function createHash() {
return require("crypto").createHash("md5");
}
const entry = {
entry1: "entry1",
entry2: "entry2",
};
const entry1 = 'require("./module1")';
const entry2 = 'require("./module2")';
const module1 = "module1";
const module2 = "module2";
const entry1ChunkHash = createHash()
.update(entry1)
.update(module1)
.digest("hex");
console.log(entry1ChunkHash);
const entry2ChunkHash = createHash()
.update(entry2)
.update(module2)
.digest("hex");
console.log(entry2ChunkHash);
根据原理可知: chunkhash 只与自己依赖的模块有关，且一个入口一个 chunk 。比如说一个 chunk 将其中的 A 模块换成了 B 模块，那么 chunkhash 就会发生变化
5.3 contenthash
contenthash 指纹占位符生成的效率最低，成本最高，影响的范围也最小，精度最细。
function createHash() {
return require("crypto").createHash("md5");
}
const entry = {
entry1: "entry1",
entry2: "entry2",
};
const entry1 = 'require("./module1")';
const entry2 = 'require("./module2")';
const module1 = "module1";
const module2 = "module2";
const entry1File = entry1 + module1;
const entry1ContentHash = createHash().update(entry1File).digest('hex');
console.log(entry1ContentHash);
const entry2File = entry2 + module2;
const entry2ContentHash = createHash().update(entry2File).digest("hex");
console.log(entry2ContentHash);
根据原理可知: contenthash 只与自己依赖的模块的内容有关，且一个入口一个 chunk 。比如说: 一个 chunk 将其中的 A 模块换成了 B 模块，但是这两个模块内容是一致的，所以 contenthash 不会改变。
六、folder 占位符
文件所在的文件夹[folder]