How or Where does the browser get the source files for "sourcemapped" javascript files?

Question

I am beginning work on an existing project, which is built using angular JS. When I open chrome dev tools "source" view, the browser tells me:

Source map detected...

and I see this:

Where

• inline.bundle.js
• main.bundle.js
• etc...

are compiled files, whose original files are in the source directories Ive circled, e.g.

• ng://
• webpack://
• etc..

The browser doesn't show any network requests for these ng://, webpack:// files, so my question is, where do these files come from? how is the browser obtaining this data?

Im guessing the server delivered a "sourcemap" file/s to the browser, which contained all the original source code and its corresponding compiled code? then the browser parsed the sourcemap and essentially generated a "virtual" file tree for these files - and thats why there is no network request? Where do these "files" come from?

Answer 1

The sourcemaps could be baked into the original JS bundle, though it's not usually done in production.

It could also be an external file (usually referenced on the last line of the bundle).

Webpack allows all these different options through the devtool config option.