Do you know the 3 hash values of the package? Back then when my school was recruiting, I was stumped by this question!

foreword

Hello everyone, I'm Lin Sanxin, uses the most simple and easy-to-understand words to describe the most difficult knowledge points. is my motto. foundation is the premise of .

School Recruitment of the Year

I vaguely remember that when I participated in the school recruitment of a large factory, I was interviewed by Netease Thunder Fire Studio . There was a question at that time, I remember it very clearly, that is: Talk about the difference between the three hash configurations in

Haha, I didn't even know how to configure webpack at that time, so I couldn't answer it, and then also. . . No then. .

Which three?

The three types of 06201e5a296fec in hash are:

• hash : global hash
• chunkhash : grouped hash
• contenthash : content hash

Practical explanation

prepare in advance

Prepare three files:

• main.js

  import './main.css'
  
  console.log('我是main.js')

• console.js

  console.log('我是console.js')

• main.css

  .title {
  color: #000;
  }

  Building a packaging environment

  I won't go into details about the construction of the packaging environment here. I will write an article to explain it after I want to read it. Here I will extract the best part.

• webpack.config.js

  // 多入口打包
  entry: {
    main: './src/main.js',
    console: './src/console.js'
  },
  // 输出配置
  output: {
    path: path.resolve(__dirname, './dist'),
    // 这里预设为hash
    filename: 'js/[name].[hash].js',
    clean: true
  },
  plugins: [
      // 打包css文件的配置
      new MiniCssExtractPlugin({
      // 这里预设为hash
      filename: 'styles/[name].[hash].css'
    })
  ]

hash

Since our default is hash , so we directly run the package npm run build , let's see what we packaged

As you can see, the file name hash values of all files are the same, so let's change the file main.css now

.title {
  // #000 改成 #fff
  color: #fff;
}

Then we run npm run build package to see what is packaged:

It can be seen that when a file is modified, the hash values of all files change accordingly.

Conclusion: the whole body to , and only changes one main.css , which will cause the hash value of all files to change after packaging. So when the package name is set to hash , the entire project file is consistent, and modifying one of them will cause all of them to be changed together.

chunkhash

We change the output filename rule to chunkhash :

entry: {
    main: './src/main.js',
    console: './src/console.js'
  },
output: {
    path: path.resolve(__dirname, './dist'),
    // 修改为 chunkhash
修改    filename: 'js/[name].[chunkhash].js',
    clean: true
  },
plugins: [
      new MiniCssExtractPlugin({
      // 修改为 chunkhash
修改      filename: 'styles/[name].[chunkhash].css'
    })
]

At this point, we run npm run build to see what is packaged:

We can see that the hash value will be divided into two camps according to the different of the entry file:

• main.js、main.css a camp, all belong to entry file
• console.js a camp, belonging to console.js entry file

Then we still modify main.css now:

.title {
  // 从 #fff 改为 pink
  color: pink;
}

Re-run npm run build to package and see:

It can be seen that the modification of main.css will affect the hash value of main.css、main.js

Conclusion: When the rule is chunkhash , the hash value after packaging will be different according to the use of the entry file. When an entry file is modified and repackaged, the hash values of all files associated with this entry file will be modified, but not Will affect the hash value of other entry files

contenthash

We change the output file name rule to contenthash :

entry: {
    main: './src/main.js',
    console: './src/console.js'
  },
output: {
    path: path.resolve(__dirname, './dist'),
    // 修改为 contenthash
修改    filename: 'js/[name].[contenthash].js',
    clean: true
  },
plugins: [
      new MiniCssExtractPlugin({
      // 修改为 contenthash
修改      filename: 'styles/[name].[contenthash].css'
    })
]

Run npm run build package and see what the packaged file looks like:

It can be seen that the hash value of each file is different, and the hash value of each file is generated according to its own content, so let's modify main.css now:

.title {
  // pink 修改为 blue
  color: blue;
}

Repackage and see:

It can be seen that the modification of main.css will only affect the hash value of main.css , that is, its own hash value

Conclusion: When the rule is contenthash , the hash value of each file is generated according to its own content. When the content of a file is modified, it will only modify its own hash value after packaging, and will not affect the hash value of other files.

Epilogue

I'm Lin Sanxin, an enthusiastic front-end rookie programmer. If you are motivated, like the front-end, and want to learn the front-end, then we can make friends and fish together haha, touch the fish group, add me, please note [Si No]