webpack [hash] 和 [chunkhash] 的目的是什么? [英] What is the purpose of webpack [hash] and [chunkhash]?

问题描述

谁能告诉我 [hash] 和 [chunkhash] 的目的是什么，它们来自哪里?

输出:{路径:/home/proj/cdn/assets/[hash]"，publicPath: "http://cdn.example.com/assets/[hash]/"}

解决方案

这个对我来说有一段时间并不明显，所以我认为它值得更详细的解释.

官方文档说明:

官方

每个文件都有相同的哈希值，因为 [hash] 是基于我们使用的所有源文件生成的.如果我在不更改任何内容的情况下重新运行构建，生成的哈希将保持不变.如果我只编辑一个文件，那么哈希值会发生变化，并且我生成的所有包的名称中都会包含这个新的哈希值.

使用 [chunkhash]:

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

使用 [contenthash]:

这是显而易见的.每个生成的文件在其名称中都有一个唯一的哈希值，根据该文件的内容计算得出.如果我改变让我们说 index.css 重新构建，只有生成的 index.css 将有一个新的哈希.

Could somebody tell me what is the the purpose [hash] and [chunkhash] and where do they come from?

output: {
    path: "/home/proj/cdn/assets/[hash]",
    publicPath: "http://cdn.example.com/assets/[hash]/"
} 

解决方案

This one wasn't obvious for me for a while, so I think it deserves some more detailed explanation.

What the official documentation says:

A brief description from the official documentation about their purpose:

A simple way to ensure the browser picks up changed files is by using output.filename substitutions. The [hash] substitution can be used to include a build-specific hash in the filename, however it's even better to use the [contenthash] substitution which is the hash of the content of a file, which is different for each asset.

Another explanation one by one from the documentation of output.filename:

• [hash] is a "unique hash generated for every build"
• [chunkhash] is "based on each chunks' content"
• [contenthash] is "generated for extracted content"

Let's make it more more understandable with examples:

I have 3 files in my src directory: index.js, index.css, vendors.js

Relevant parts from my example Webpack config:
(not a full, working config!)

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

So I have 2 chunks name, index and vendors, but look that the index chunk will also have css content because it imports a css file in the array. When building, the css part will be exported to a separate file using MiniCssExtractPlugin (in my case) but Webpack knows that index.js and index.css belong to the same chunk.

Now let's try to build it with different hashing types. (changing the two filename option equally)

Using [hash]:

Every file has the same hash, because [hash] is generated based on all of our used source files. If I re-run the build without changing anything, the generated hash will remain the same. If I edit only one file then hash will change and all my generated bundles will have this new hash in their name.

Using [chunkhash]:

As you see, the 1st and 2nd files were coming from the same index chunk, so they have the same hash in their name. It's because [chunkhash] is generated based on the whole content of the given chunk. So if I edit let's say index.css and re-build, the files coming from the index chunk will have a new hash, but the one from vendors chunk will remain the same as was before.

Using [contenthash]:

This one is obvious. Each generated file has got a unique hash in their name, calculated from the content of that file. If I change let's say index.css an re-build, only the generated index.css will have a new hash.

这篇关于webpack [hash] 和 [chunkhash] 的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！