webpack 三种hash的区别

可以配合浏览器缓存带给用户带来更佳的用户体验，根据文件来生成对应的hash值以此来告诉浏览器要不要读区缓存。

一般是配置在输入文件名字：

output: {
  filename: "[name].[chunkhash].js"
},

1
2
3

每个文件都具有相同的哈希值，因为它[hash]是基于我们使用的所有的源文件生成的。

如果重新运行该构建而不更改任何内容，则生成的[hash]值保持不变。

如果我们仅编辑一个文件，则【hash】值发生改变，并且所有生成捆绑的名称中都包含此新【hash】。

chunkhash是根据不同的入口进行依赖文件解析，构建对应的chunk模块，生成对应的hash值

我们可以把一些公共库和程序入口文件区分开来，单独打包构建，然后采用chunkhash方式生成hash值，只要我们不改动公共库的代码，就可以保证其hash值不受影响，这样也能起到缓存作用。

每个生成的文件的名称都有一个唯一的hash值，该hash值是根据该文件的内容计算得出的。

当构建的文件内容发生改变时，就会生成新的hash值，且该文件的改变并不会影响和它同一个模块下的其它文件。

hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都公用相同的hash值。
chunkhash是根据不同的入口进行依赖文件解析，构建对应的chunk模块，生成对应的hash值，只有被修改的chunk模块在重新构建之后才会生成新的hash值，不会影响其他的chunk。
contenthash是跟每个生成的文件相关，每个文件拥有唯一的hash值，且该文件的改变并不会影响和它同一个模块下的其它文件。