How are hash file names requested by a browsre

I am a beginner in web development. In a project I see that asset files are built and their names are changed - a hash string is appended to their names. I know that some bundler does this magic, but I dont understand how the browser knows their "new" names. For example if I have in the index.js file <script src="/main.js"...> and after build this main.js has turned into a main-ad466ef6367...js, this script tag should be changed accordingly, with the new name right?

Solution

Your assumption is correct. The HTML that is sent to the browser should have the correct links to the js, css and other assets. If you use html webpack plugin to generate your html it can inline the hashed links to your assets out of the box. If you only use webpack to bundle your assets you can use manifest plugin to generate a manifest.json file which will contain an object map of your assets, ie

{
  "main.js": "/main-4kj5h62.js",
  "style.css": "/style-k67bv2.css",
  "logo.svg": "/logo-m2vb456.svg"
}

you can reference this file in your server app to inline the correct links to your assets.