Unbundle a webpack bundle.js with the SourceMap

Question

I want to reverse or unbundle a bundle.js. Currently I am loading the bundle.js in my browser (Chrome) Chrome detects the sourcemap and shows me a nice structure of the full application based on the bundle. The application is bundled using webpack and is a flux react application.

Is there a way to generate all these files out of the bundle so I can easily browse the bundle based on the application structure?

This is for a reverse engineering project to get the application source from an existing bundle.

So in chrome I can nicely browse the whole application using devtools sources. and see all the individual files. But I would like to create that exact same structure on my local drive.

I was trying a tool like debundle But I cannot find a way to add the sourcemap to this conversion?

So can I easily unbundle an existing bundle.js if:

• Sourcemap is available
• Chrome can easily show me the structure and individual files
• Bundle is not minified or scrambled.
• Bundle is created using webpack

Explicate

Answer 1

I found shuji to be a good option - you just provide the path to the sourcemap to it. It unbundled an example bundle I made with babel and webpack perfectly. It doesn't preserve folder structure though, all of the files just end up in one folder.

Lamentation

Let's say i unbundled it, make edits, and now i want to bundle it back, there's a way to do so? – Battled