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://')?

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://')?

• javascript
• webpack
• build
• source-maps

• please check this post (i can not ment): stackoverflow./questions/27626764/… – user10988894 Commented Mar 25, 2019 at 6:46

1 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.