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

原创于 2025-09-06 21:11:51 发布 · 1.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #webpack #开发语言

JS逆向专栏收录该内容

9 篇文章

订阅专栏

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,  // 模块ID
            l: !1, // 是否加载完成
            exports: {} // 模块导出对象
        };

        e[t].call(a.exports, a, a.exports, n); // 执行模块函数
        a.l = !0; // 标记模块已加载
        return a.exports;
    }

    n.m = e; // 存储所有模块

    // 入口执行模块2
    n(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];    // 模块ID
    var 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节我们很清楚的可以知道在加载器自加载的时候，把模块全部当成一个参数对象进行传递即可，如下图：
在这里插入图片描述
最后我们把参数入口挂载到全局对象上，就可以实现模块的调用了