如何获取网站JavaScript代码？解包webpack打包生成的main.js模块的方法

针对Webpack打包后生成的晦涩压缩JS文件，完全可以通过结构化的方式把所有嵌入的独立模块拆分提取出来，具体可根据遇到的场景选择对应方法：

通用解包操作路径 #

• 利用Webpack的运行时结构特性解包：Webpack不管经过多深度的压缩混淆，核心模块缓存机制不会变，所有模块都会以「模块ID：对应模块执行函数」的键值对形式存在于运行时的缓存对象中，常见的全局标识为webpackJsonp、挂载在全局的__webpack_require__对象。可以直接在浏览器控制台遍历这个缓存对象，把每个模块的函数体单独剥离，按模块ID命名为独立的.js文件即可。
• 专用解包工具的正确使用方式：之前尝试de-bundle这类工具不生效，大多是因为目标站点的Webpack版本、配置和工具的识别逻辑不匹配。可以直接使用适配Webpack 4/5、Rollup等主流打包器的开源解包工具，不需要全局安装，执行npx <对应解包工具名> 你的main.js本地路径，工具会自动识别打包结构、拆分所有独立模块到单独目录，还会自动做初步的代码美化。
• 闭包隐藏场景的提取：如果站点把模块缓存全封在IIFE立即执行函数内部，不暴露到全局作用域，静态工具爬取不到模块数组时，可以直接在浏览器Source面板的代码执行初始位置打个断点，等程序断住时直接在当前作用域内拿到完整的模块缓存对象，直接导出所有运行时加载的模块代码，不需要依赖外部爬取的main.js文件。

高混淆场景的优化技巧 #

• 碰到完全压缩的单行main.js时，不要直接丢给解包工具，先在DevTools的Source面板点击{}格式化按钮对代码做初步美化，再把格式化后的代码拿去解包，工具的识别准确率会大幅提升。
• 如果站点配置了不对外暴露的sourcemap文件，可以在Network面板过滤.map后缀的请求，如果能拿到对应的sourcemap文件，直接通过sourcemap解析工具还原的代码会保留原始的文件路径、变量命名，比纯静态解包的可读性高很多。

之前使用de-bundle不生效的常见原因：该工具仅适配老版本Webpack暴露全局webpackJsonp的结构，如果目标站点用了Webpack 5的模块联邦能力、自定义了全局入口标识、把模块数组全封在闭包内部不对外暴露，工具找不到对应的模块数组入口就会返回空结果，并非工具本身失效。

内容的提问来源于stack exchange，提问作者Bhushan Wagh