webpack之原理篇（二）：hash、chunkhash、contenthash的认识

webpack系列说明

已完成：

基础篇

1. webpack之基础篇（一）：webpack的基础认识
2. webpack之基础篇（二）：前端基本开发环境的搭建
3. webpack之基础篇（三）：配置loader和plugin
4. webpack之基础篇（四）：webpack-dev-server浅析
5. webpack之基础篇（五）：配置开发、测试、生产环境

优化篇

1. webpack之优化篇（一）：优化静态资源
2. webpack之优化篇（二）：优化配置提高构建速度
3. webpack之优化篇（三）：http压缩之Gzip
4. webpack之优化篇（四）：webpack DllPlugin配置的代替方案hard-source-webpack-plugin

原理篇

1. webpack之原理篇（二）：hash、chunkhash、contenthash的认

编写中：

1. webpack之原理篇（一）：webpack的工作流程和原理
2. webpack之原理篇（三）：webpack-dev-server原理
3. webpack之原理篇（四）：手写loader
4. webpack之原理篇（五）：手写plugin

hash,chunkhash和contenthash的认识

确保浏览器选择更改的文件的简单方法是使用 output.filename替换。该[hash]置换可用于文件名中包含一个内置特定的哈希值，但它甚至更好使用[contenthash]替代这是一个文件的内容，这是每个资产不同的哈希值。

官方文档中有关其用途的简要说明, output-filename的描述:
https://www.webpackjs.com/configuration/output/#output-filename

模板	描述
[hash]	是“为每个构建生成的唯一hash”
[chunkhash]	是“基于每个块的内容”的hash”
[contenthash]	是“为提取的内容生成的”。 在使用 ExtractTextWebpackPlugin(MiniCssExtractPlugin) 时，可以用 [contenthash] 来获取提取文件的 hash（既不是 [hash] 也不是 [chunkhash]）

在这想通过示例的方式进一步理解：
我在我的3个文件js目录：index.js，index.css，vendors.js

关于webpack.config.js的配置：

entry: {
  index: ["./js/index.js", "./js/index.css"],
  vendors: ["./js/vendors.js"]
},
output: {
  filename: "[name].[hash].js"
}
plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].[hash].css"
  })
]

因此，我有2个块名称，index和vendors，但是看起来该index块也将具有css内容，因为它css在数组中导入了一个文件。构建时，css将使用MiniCssExtractPlugin（在我的情况下）将零件导出到单独的文件，但Webpack知道这一点，index.js并且index.css属于同一块。

现在，让我们尝试使用不同的哈希类型来构建它。（filename相等地更改两个选项,[hash][chunkhash]）

示例1：使用hash

webpack.config.js配置(非完整)：

entry: {
  index: ['./js/index.js', './style/style.css'],
  vendors: ["./js/vendors.js"]
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.[name].[hash].js'
}
plugins: [
  new MiniCssExtractPlugin({
    filename: "css/[name].[hash].css"
  })
]

• 每个文件都具有相同的哈希值，因为它[hash]是基于我们使用的所有源文件生成的。
• 如果我重新运行该构建而不更改任何内容，则生成的[hash]将保持不变。
• 如果我仅编辑一个文件，则[hash]值将发生变化，并且所有生成捆绑的名称中都会包含此新[hash]。

示例2：使用chunkhash
webpack.config.js配置：

entry: {
  index: ['./js/index.js', './js/index.css'],
  vendors: ["./js/vendors.js"]
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.[name].[chunkhash].js'
}
plugins: [
  new MiniCssExtractPlugin({
    filename: "css/[name].[chunkhash].css"
  })
]

• 如图，第一个和第二个文件来自同index一块，因此它们的名称具有相同的[hash]。这是因为[chunkhash]是基于给定块的全部内容生成的。因此，如果我编辑index.css并重新构建，来自index块的文件将具有一个新的哈希，但来自vendors块的文件将保持与以前相同。

示例3：使用contenthash
webpack.config.js配置：

entry: {
  index: ['./js/index.js', './js/index.css'],
  vendors: ["./js/vendors.js"]
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.[name].[contenthash].js'
}
plugins: [
  new MiniCssExtractPlugin({
    filename: "css/[name].[contenthash].css"
  })
]

每个生成的文件的名称都有一个唯一的哈希值，该哈希值是根据该文件的内容计算得出的。如果我进行更改，例如index.css重新构建，则仅生成的index.css将具有新的哈希。