使用SourceMap解开webpack bundle.js

Question

我想反向或解包bundle.js.目前我正在浏览器中加载bundle.js(Chrome)Chrome检测到源图,并根据捆绑包向我展示了完整应用程序的一个很好的结构.该应用程序使用webpack进行捆绑,是一种助焊剂反应应用程序.

有没有办法从捆绑包中生成所有这些文件,以便我可以根据应用程序结构轻松浏览捆绑包？

这是一个逆向工程项目,用于从现有捆绑包中获取应用程序源.

所以在chrome中我可以使用devtools源很好地浏览整个应用程序.并查看所有单个文件.但我想在我的本地驱动器上创建完全相同的结构.

我试图像一个工具debundle但我不能找到一种方法,将sourcemap添加到这种转换？

因此,如果符合以下条件,我可以轻松地解开现有的bundle.js:

• 源图是可用的
• Chrome可以轻松向我显示结构和单个文件
• 捆绑没有缩小或扰乱.
• Bundle是使用webpack创建的

Answer 1

我发现shuji是一个不错的选择 - 您只需提供源映射的路径即可。它完美地解开了我用 babel 和 webpack 制作的示例包。但它不保留文件夹结构，所有文件最终都位于一个文件夹中。