关注它，不迷路。

• 本文章中所有内容仅供学习交流，不可用于任何商业用途和非法用途，否则后果自负，如有侵权，请联系作者立即删除！

一.概念

‍webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

下篇的这篇文章是我见过最详细的笔记，从js逆向的角度去讲解webpack，非常的简单易懂，强烈建议学习收藏:

https://app.yinxiang.com/fx/970ae39c-9964-4aae-aa96-7e81fee4ef8f

二.实战

1，抠代码的方式，适用于模块与模块直接耦合都非常小的情况，具体请参考下面的文章:

     JS逆向|非常实用的扣代码教程来了，欢迎收藏

     JS逆向:Webpack打包后的代码怎么搞？猿人学爬虫比赛第十六题详细题解

2.手动导出的方式，可以参考朱哥的这篇文章:

https://blog.csdn.net/qq_37438485/article/details/119965300?spm=1001.2014.3001.5501

跟着文章的思路一步一步来，就会有收获，感觉挺棒的。

3.补环境的方法:

  JS逆向实战|猿人学16题 webpack 快速修改调用

  这个是渔滒自创的方法，拿到整个webpack的js，补上浏览器环境，删除node检测相关的环境，然后将加密结果打印出来给Python文件获取即可。

4.基于ast的方式自动抠取webpack打包的代码，项目地址:

https://gitcode.net/zjq592767809/webpack_ast/-/blob/master/webpack_mixer.js

食用指南:

使用命令行的方式:

node webpack_mixer.txt -l runtime.62249a5.js -m app.597640f.js -o webout.js

参数说明：

-l 加载器的js路径

加载器的js特征：

• 以自执行函数开头

• 定义导出函数，类似 return e[n].call(r.exports, r, r.exports, d), r.l = !0, r.exports

• 为导出函数添加多个方法，类似d.e，d.m，d.n等等

-m 函数模块的js路径

函数模块的js特征：

1.一般以(window.webpackJsonp开头

-o 输入结果的js路径

备注：如果js本身有检测等，需要自行补头或者其他处理。

具体参见这篇文章:

https://blog.csdn.net/zjq592767809/article/details/122355530?spm=1001.2014.3001.5502

三.结语

想不到ast还能这么玩，渔滒实在太强大了，推荐一波他的星球，干货多多，有需要的可以加入噢: