Menu
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:
613
You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.
Open developer tools in chrome by pressing F12 /Ctrl + Shift + I/ right-click anywhere inside the web page and select Inspect/Inspect Element which will be mostly the last option. Go to Sources tab in developer tools and open any minified JS which you want to debug as shown in the image.
Webpack is an aggressive and powerful module bundler for JavaScript applications. It packages all the modules in your application into one or more bundles (often, just one) and serves it to the browser.
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.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
