JS加密/解密之webpack打包代码逆向

Webpack 是一个强大的打包工具，能够将多个文件打包成一个或多个最终的文件。然而，将已经经过打包的代码还原回原始源代码并不是一件直接的事情，因为 webpack 打包的过程通常会对代码进行压缩、混淆和优化，丢失了部分变量名和代码结构的信息。因此，完全还原打包前的源码可能并不现实。但是，可以通过一些工具和技术部分还原源码的结构和逻辑。以下是一篇论文的框架，以解释如何尝试还原被 webpack 打包过的代码：

1. 引言

在前端开发中，Webpack 是一个常用的打包工具，能够将多个文件打包成最终可部署的代码。然而，由于 webpack 的优化、压缩和混淆过程，导致打包后的代码难以完全还原为原始源码。本文旨在探讨如何尝试将 webpack 打包后的代码部分还原回原始源码，以及相关工具和技术的应用。

2. Webpack 打包原理

Webpack 的打包过程涉及模块解析、代码转换、依赖图生成和代码打包等多个环节。其中，代码转换阶段会将 ES6+ 语法转换为兼容性更好的代码，并进行压缩和优化处理，从而提高应用的性能和加载速度。

3. 代码还原尝试

尽管完全还原 webpack 打包后的代码是困难的，但通过以下工具和技术可以部分还原源码的结构和逻辑：

• Source Map：Webpack 提供了 Source Map 功能，可以将打包后的代码映射回原始源文件，帮助开发者在浏览器中调试时定位问题，这在一定程度上帮助还原源码结构。
• 代码反混淆工具：一些代码反混淆工具可以帮助还原被混淆过的变量名和函数名，从而提高还原源码的准确性。
• 人工逆向: 由人工分析代码逻辑，逐步解密。

4. 案例分析

考虑以下被 webpack 打包过的简单代码：

// 打包后的代码
!function (e) {
    var t = {};

    function n(r) {
        if (t[r]) return t[r].exports;
        var o = t[r] = {i: r, l: !1, exports: {}};
        return e[r].call(o.exports, o, o.exports, n), o.l = !0, o.exports
    }

    n.m = e, n.c = t, n.d = function (e, t, r) {
        n.o(e, t) || Object.defineProperty(e, t, {enumerable: !0, get: r})
    }, n.r = function (e) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty(e, "__esModule", {value: !0})
    }, n.t = function (e, t) {
        if (1 & t && (e = n(e)), 8 & t) return e;
        if (4 & t && "object" == typeof e && e && e.__esModule) return e;
        var r = Object.create(null);
        if (n.r(r), Object.defineProperty(r, "default", {
            enumerable: !0,
            value: e
        }), 2 & t && "string" != typeof e) for (var o in e) n.d(r, o, function (t) {
            return e[t]
        }.bind(null, o));
        return r
    }, n.n = function (e) {
        var t = e && e.__esModule ? function () {
            return e.default
        } : function () {
            return e
        };
        return n.d(t, "a", t), t
    }, n.o = function (e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    }, n.p = "", n(n.s = 0)
}([function (e, t) {
    console.log("Hello, World!")
}]);

通过 Source Map 和代码反混淆工具，可以部分还原打包前的代码结构：

// 还原后的源码
console.log("Hello, World!")

5. 结论

尽管 webpack 打包后的代码很难完全还原为原始源码，但通过利用 Source Map 和代码反混淆工具（下篇我们介绍如何用source map逆向JS代码），可以在一定程度上部分还原代码结构和逻辑。这些工具为开发者提供了一定的便利，帮助他们更好地理解和调试已经打包的代码。