webpack反编译思路分享

本文从思路上解析，如何进行反编译，提取第三方库。

任务说明

接到任务，阅读editor,JsBarcode，两个模块的代码解析、注释工作

为什么要编译？

因为要进行二次开发，在看不懂的方法上注释或者采用原方法替换，方便后面的人更新维护项目

查看代码，找出任务核心点

目的—并不是为了给所有的代码写注释，而是为了方便项目后面的迭代更新

反编译前的代码

疑问？

有没有办法不阅读十万行的代码，用官方的编译库替换现有的webapck编译，这样引入的第三方库编译文件就不用看每个方法了

三种思路分析对比—以JsBarcode为例

A思路： 1、找到JsBarcode的官方编译库 all.min .js,以这个文件为参考，找到项目中所有的JS中，有二维码的方法，统一放到这个文件中，再进行替换？

B思路： 创建一个示例demo.html文件，把找到的JsBarcode相关的js文件放到这个html文件中引入调用？ 百分百会报错，然后根据这个报错去找对应的方法？ 这个方法的问题在于，如何初始化引入？以前没做过。

C思路： 了解webapck编译文件的编译思路，找到当前方法的对应的原方法，将找到的方法，全部干掉，再引入all.min.js文件，能跑得通，不会有bug就OK了。可能造成的问题，现有文件中，有可能有没有被调用的方法遗留。

确定思路

反复思考可行性及耗费的工作量，最终确定C思路 计划耗时一天的时间，挑选一个小的第三方库JsBarcode，跑通主流程。 如果可以按这个思路，改写剩下的三个第三方库的引入，将大大减少工作量。 如果超过一天的时间，不通，放弃，按原计划，阅读近十万的代码，写注释。

分析webapck编译文件，了解编译思路

找到编译文件入口文件：main.js 参照教程：<简要分析webpack打包后代码>，注释代码分析编译思路

核心方法分析

function __webpack_require__(moduleId) {
        // moduleId 模块的ID名
        if (installedModules[moduleId]) 
            return installedModules[moduleId].exports;
        var module = installedModules[moduleId] = {
            i: moduleId, 
            l: false,
            exports: {}
        };
        // 逗号运算符，先计算左边的参数，再计算右边的参数值。然后返回最右边参数的值
        return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__), module.l = true, module.exports
        // call能确保当模块中使用this的时候，this是指向module.exports的
        // 返回模块的导出
        // 返回module.exports(注意modules[moduleId].call的时候module.exports会被修改)
    }

链式递归调用

替换流程

1、通过打点方法找到调用入口： function (e, t, n) {},每一个方法对应一个数值，如568，调用语句n(568)，通过打console.log(‘e’,e)方法找到JsBarcode调用入口，e中能看到调用方法数值

2、在主文件index.ftl文件中引入官方的编译包: <script src="JsBarcode.all.js"></script>

3、改写调用入口：e.exports = n(526) 为 e.exports = JsBarcode

4、运行项目，查看修改调用是否有bug

5、确定替换成功，删除原有的方法内容，不能删除方法名，需要保存调用链的顺序，删除方法如下：

function (){},
function (){},
function (){},

结语

• 经过替换流程后，已成功将 JsBarcode官方编译库替换现有的编译文件，JsBarcode涉及到的代码就不需要再去阅读，写注释
• 需要改写源代码也可以在源文件中编写，再编译代码替换引用包JsBarcode.all.js
• 参照这个模式替换了XX，XX，XX总共八万多行编译代码
• 只剩下XX没有用这种方法改写引入，因为现有的项目中，改写了这个第三方库，不能用这种模式替换，需要参照项目重写XX库，经与项目负责人商讨，暂时不改写。