What method does webpack use to show the sources in a 'webpack://' folder in dev tools?

Question

If I use webpack in dev mode, when I open chrome dev tools, in the 'sources' tab, I can see a 'webpack://' folder with all my source code.

I would like to know how I could do something similar with my own code (without webpack).

Let's say that I want to program my own build system. This build system takes some source code then transpiles it. How can I show the original source code (including js, html, and css files) in a special folder (for example 'mysource://')?

Supplement

please check this post (i can not comment): #27627264 – Contrapuntist

Answer 1

The source code you see in your DevTool-window are so called 'source-maps', in webpack they are generated (in most cases) by the SourceMapDevToolPlugin by default when in 'dev' mode.

Here is another article about how to generate source maps.

Appaloosa