Webpack Hashing name of files is different

Question

Hashing name of files when I run npm run build it generated in different number of the number in index.html file

enter image description here

in index.html file code is :

   <script src="../src/plugins/common/common.min.js"></script>
   <script src="../src/js/custom.min.js"></script> 

Answer 1

Wanted to add a comment to get more info but don't have enough rep so I'll answer a bit blindly.

Firstly it depends on what hashing you chose in webpack for your file. I imagine somewhere in your webpack.common or webpack.prod inside output you might have something like this

output: {
  filename: '[contenthash].js',
  ...config
}

to keep the filename you should change that to:

output: {
  filename: '[name].[contenthash].js',
  ...config
}

Why does webpack add a hash, or better yet why should you have a hash in your filename?

In short caching!

• Having something like custom.abc123.js allows the clients browser to invalidate the file in their cache and force it download the new version.

• The abc123 hash for example could be generated based on the contents of your file, so if you update your code, you file now has a new hash custom.efg456.js and the clients browser knows custom.abc123.js is now outdated.

Hope that answers why you should use a hash, and potentially why it your project compiled to have one!