Details about the differences among hash, chunkhash, and contenthash in webpack.

Details about the differences among hash, chunkhash, and contenthash in webpack.

Hash, chunkhash, contenthash

Hash is generally used in combination with CDN cache. After webpack is built, the corresponding file name is generated automatically with the corresponding MD5 value. If the file content changes, the corresponding file hash value will also change, and the corresponding HTML referenced URL address will also change, triggering the CDN server to pull the corresponding data from the source server, then update the local cache. However, in actual use, there are still some differences between these hash calculations.
We will first create a test case to simulate:

Project Structure

Our project structure is very simple. The input file index.js uses index.css. Then, jquery. js and test. js are created as public libraries.

//index.js require('./index.css') module.exports = function(){  console.log(`I'm jack`)  var a = 12 }

//index.css .selected : {   display: flex;   transition: all .6s;   user-select: none;   background: linear-gradient(to bottom, white, black); }

Next, we modify webpack. config. js to simulate different hash calculations.

Hash

Hash is related to the construction of the entire project. As long as there are file changes in the project, the hash value of the entire project is changed, and all files share the same hash value.

 var extractTextPlugin = require('extract-text-webpack-plugin'),  path = require('path')  module.exports = {  context : path.join(__dirname,'src'),  entry:{  main: './index.js',  vender:['./jquery.js','./test.js']  },  module:{  rules:[{   test:/\.css$/,   use: extractTextPlugin.extract({   fallback:'style-loader',   use:'css-loader'   })  }]  },  output:{  path:path.join(__dirname, '/dist/js'),  filename: 'bundle.[name].[hash].js',  },  plugins:[  new extractTextPlugin('../css/bundle.[name].[hash].css')  ] }

According to the above configuration, after executing the webpack command, we can get the following results:

Result 1 of hash calculation:

Result 2:

We can see that the generated file hash values are the same, so hash computing is related to the construction of the entire project. The hash generated during the same build process is the same.

Chunkhash

When hash computing is used, the hash values generated after each build are different, even if the file content is not changed at all. In this way, the cache effect cannot be achieved. We need to change the hash value calculation method, that is, chunkhash.

Chunkhash is different from hash. It parses dependent files based on different Entry files, constructs corresponding chunks, and generates corresponding hash values. In the production environment, we separate some public libraries and program entry files and pack and build them separately. Then we generate hash values using chunkhash, so as long as we do not change the code of the public library, the hash value is not affected.

 var extractTextPlugin = require('extract-text-webpack-plugin'),  path = require('path')  module.exports = {  ...  ...  output:{  path:path.join(__dirname, '/dist/js'),  filename: 'bundle.[name].[chunkhash].js',  },  plugins:[  new extractTextPlugin('../css/bundle.[name].[chunkhash].css')  ] }

Execution result 1 Calculated using chunkhash:

Result 2:

As we can see, because the project's main access file index.js and its corresponding dependent file index.css are packaged in the same module, the same chunkhash is shared, but the public library has different modules, so there is a separate chunkhash. This ensures that the file content is not repeatedly built when the file content is not changed online.

Contenthash

In the chunkhash example, we can see that index.css is referenced by index. js, so the same chunkhash value is shared. But there is a problem. If index. js changes the code, even if the content of the css file is not changed, the css file will be constructed again because the module has changed.
At this time, we can use the contenthash value in extra-text-webpack-plugin to ensure that the content of the css file remains unchanged even if the content of other files changes in the module where the css file is located, so the building will not be repeated.

 var extractTextPlugin = require('extract-text-webpack-plugin'),  path = require('path')  module.exports = {  ...  ...  output:{  path:path.join(__dirname, '/dist/js'),  filename: 'bundle.[name].[chunkhash].js',  },  plugins:[  new extractTextPlugin('../css/bundle.[name].[contenthash].css')  ] }

Execution result 1 Calculated using contenthash:

Result 2:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.