How do I show in Chrome Web Tool the original directory structure of bundled Javascript files?

Question

I have a project that produces JavaScript files which would be used by other multiple projects. These JavaScript files are copied to each of the projects' directories using a gulp task then the projects reference those files in their index.html. For a certain reason, the files needed to be bundled to a single file so the index.html would only reference one file instead of having the need to add a reference every time a new file is added to the source project. The files are now bundled and it can be debugged in Chrome Web Tool. However is there a way to keep the knowledge of the original file structure in the Chrome Web Tool even if the files are now bundled to a single file? Like being able to see files under their folders, etc. as if they were referenced one by one in the index.html.

I have tried Source Maps but it seems like it's more on being able to debug a minified production code.

Answer 1

Ok, so I further tinkered with how the gulp plugin that bundles the files and its available options and found out that what I am trying to find is actually there. The gulp plugin is called webpack-stream, basically the WebPack in Gulp.

Using the following webpack config options in the gulp file,

it will bundle the files into a single file and allow for debugging and being able to see the source files' folder structure like this:

The bundled.js file is the only file referenced in the index.html and the files shown in their original folder structure is under the webpack:// node.