当前位置：首页 > news >正文

js逆向Webpack模块加载机制解析：从数组到JSONP

news 2025/9/9 1:59:11

1. 概述

Webpack作为现代前端开发中最流行的模块打包工具，其模块加载机制值得深入理解。本文将解析Webpack的几种模块加载方式，包括数组形式、键值对形式和JSONP动态加载。只有理解了它的相关加载机制，我们才可以进行逆向工作。

2. 数组形式的模块加载

2.1 基本结构

!function (e) {var c = {}; // 用于存储已加载的模块function n(t) {if (c[t]) // 如果模块已加载，则直接返回return c[t].exports;var a = c[t] = { // 创建新模块对象i: t,  // 模块IDl: !1, // 是否加载完成exports: {} // 模块导出对象};e[t].call(a.exports, a, a.exports, n); // 执行模块函数a.l = !0; // 标记模块已加载return a.exports;}n.m = e; // 存储所有模块// 入口执行模块2n(2);
}([function () {console.log('模块1')},function () {console.log('模块2')},function () {console.log('模块3')}
]);

基本结构建议大家去跟踪调试一遍，就明白原理了。

2.2 执行流程

初始化阶段：创建空对象c用于缓存已加载模块

模块加载函数n(t)：

检查模块是否已缓存，是则直接返回

创建新模块对象，包含ID、加载状态和导出对象

执行模块代码，将模块标记为已加载

入口执行：从模块ID=2开始执行

3. 键值对形式的模块加载

3.1 结构变化

!function (e) {// ...相同的主体代码...
}({0: function () {console.log('模块1')},1: function () {console.log('模块2')},2: function () {console.log('模块3')}
});

3.2 与数组形式的区别

使用对象代替数组存储模块

模块ID作为键名，可以是数字或字符串

更灵活地管理模块，支持非连续ID

4. JSONP动态加载机制

4.1 Webpack的JSONP实现

// JSONP回调函数
function webpackJsonpCallback(data) {var chunkId = data[0];    // 模块IDvar modules = data[1];    // 模块代码var runtime = data[2];    // 运行时回调（可选）// 将新加载的模块加入Webpack内部模块管理for (var moduleId in modules) {//Object.prototype.hasOwnProperty.call(modules, moduleId)  检测对象中是否包含这个属性if (Object.prototype.hasOwnProperty.call(modules, moduleId)) {__webpack_modules__[moduleId] = modules[moduleId];}}// 执行回调（如果存在）if (runtime) runtime();
}// 重写push方法
window["webpackJsonp"].push = webpackJsonpCallback;

4.2 动态模块加载示例

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[1],   // 模块ID（chunkId）{"./src/moduleA.js": function(module, exports) {console.log("模块A加载成功");},"./src/moduleB.js": function(module, exports) {console.log("模块B加载成功");}},[[1]]  // 可选的执行入口（runtime callback）
]);

4.3 执行流程

初始化：创建或获取window[“webpackJsonp”]数组

推送数据：调用push方法传入模块数据

回调处理：

提取模块ID、模块代码和运行时回调

将新模块注册到__webpack_modules__中

执行运行时回调函数（如果存在）

总结

把上面的代码都要跑一边，一定要调试跟踪一遍，那个是基础，基础打牢才可以进行逆向。

5. xhs进行逆向

有了前4节的基础后，我们知道，其实就是用JS实现了一个加载器，然后通过加载器分步去调用对应的函数。那么第一步我们就是找到加载器的入口。

在这里插入图片描述
通过调试分析可以找到他的入口加载是在这个js中，并且是通过__webpack_require__去进行模块加载。那么我们要如何修改加载器，让他可以暴露出去，让我们进行调用了？
通过对比前4节所学，我们可以知道__webpack_require__其实就是函数n
在这里插入图片描述
通过观察，我们可以稍微对代码进行调整，我们把需要传递的模块全部传递给eeee并且发现调用模块是通过s，那么我们把eeee赋值给s就可以。那么eeee是怎么被传递的了，通过前4节我们很清楚的可以知道在加载器自加载的时候，把模块全部当成一个参数对象进行传递即可，如下图：
在这里插入图片描述
最后我们把参数入口挂载到全局对象上，就可以实现模块的调用了