The difference between hash, Chunkhash and Contenthash in Webpack

There can be three hash values for the output file name in Webpack:

1. Hash

2. Chunkhash

3. Contenthash

What's the difference between those three?

Hash

If you use hash, because this is the project level, that is, every time you modify any file, the hash of all filenames will change. So once any file has been modified, the file cache for the entire project will be invalidated. Such as:

It is clear that the hash value of each compressed file is the same, so it is obviously inappropriate for modules that have not changed because the cache is invalid. At this point, the use of Chunkhash comes with it.

Chunkhash

Chunkhash relies on file parsing according to different entry files (Entry), constructs corresponding chunk, and generates corresponding hash values. In a production environment, some common libraries and program entry files are separated, packaged and built separately, and then we generate hashes in the form of Chunkhash, so as long as we do not change the code of the Public library, we can guarantee that its hash value will not be affected. and WEBPACK4 support asynchronous import function, solid, Chunkhash also function in this, as follows:

We change the hash value of each module (except the skeleton file) to Chunkhash, and then build it again to get:

We can clearly see that the hash of each chunk module is not the same.

However, there is a problem because we import the styles as modules into JavaScript files, so their chunkhash are consistent, such as Test1.js and TEST1.CSS:

This will have a problem, as long as the corresponding CSS or JS changes, and its associated file hash value will change, but its content has not changed, so did not reach the cache meaning. The use of solid contenthash comes with it.

Contenthash

Contenthash is for file content level, only the content of your own module has changed, then the hash value changes, so we can solve the appeal problem through Contenthash. As follows:

That ' s all~