js逆向_webpack讲解加载器&酷某音乐案例

简单的导出导入

env.js模块

javascript 复制代码

function check_env(){
    return (typeof window) === "undefined" ? "fuck_env": "ok_env";
}

// 定制导出的内容
// module.exports = check_env
// 你这边module.exports导出的东西，是那边导入的东西
module.exports = {
    check : check_env()
}

qiao_enc模块

javascript 复制代码

var CryptoJS = require("crypto-js");

function encrypt(s){
    var key = CryptoJS.enc.Utf8.parse("1234567887654321");
    var iv = CryptoJS.enc.Utf8.parse("0000000000000000");
    var cif = CryptoJS.enc.Utf8.parse(s);
    return CryptoJS.AES.encrypt(cif, key, {
        iv: iv,
        mode:CryptoJS.mode.CBC,
        packing: CryptoJS.pad.Pkcs7
    }).toString();
}

module.exports = {
    encrypt
}

// name = "qiao"
// age = 18
//
// obj = {
//     name,
//     age
// }
// // 13
// console.log(obj)

将env.js模块的函数，导入http.js模块

javascript 复制代码

// 导入外部模块
var mm = require("./env");
var enc = require("./qiao_enc");


function send_req() {
    // 先拿到浏览器环境，然后发出去
    var v = mm.chenv();
    var mi = enc.encrypt(v)
    console.log("我发请求了",mi)
}
window.send_req = send_req;
module.exports = send_req;

完成webpack.config.js的编写！

javascript 复制代码

module.exports = {
    entry: "./qiaofu/http.js",  // 入口
    output:{
        filename: "./qiaofu/js/app.js" // 打包后的文件输出到哪里
    }
}

独立将打包的app.js复制出来另一个文件，图中这个r就是加载器

webpack介绍：

webpack并不是为了防爬虫，而是为了让每个不同模块的代码压缩！遇到这个必定会伴随闭包！

安装webpack命令：npn install webpack

如下是某个编号的函数在被导出，导出后被call运行！

javascript 复制代码

// 所有准备被导入的模块
        // t => {序号:func,序号: func}  77 99
      , e = {}; // 有个e -> 存放已经被导入过的模块

    // 创建了个函数
    function r(i) {  // i = 482
        var n = e[i]; // e[482]  => 第一次运行. n是空的 e也是空的, 第二次运行. e里面有482号

        if (n !== undefined){
            return n.exports;  // 如果n有东西. e[482]有东西. 就返回它的exports
        } else {
            var o = e[i] = {  //  o  =>  e[482] => {exports: {}}
                exports: {}
            };
            console.log(e);
            // 此时:
            /**
             *  e => {
             *      482 : {exports: {}}  =>> o
             *  }
             * 7 9
             */
            // t[i] 内部的this => o.exports
            // o => t[i]函数的第一个参数  => 刚刚创建的大对象
            // o.exports  => t[i]函数的第二个参数  => 刚刚创建大对象中的小对象
            // r => t[i]函数的第三个参数  => r函数
            // o.exports -> this传递给函数
            // t[i](o, o.exports, r)
            t[i].call(o.exports, o, o.exports, r);
            // t是那个大对象 {exports:函数o}
            return o.exports; // 返回  函数_o //13 9

            // 第一次运行完后, e => {
            //        482 : {exports: 函数_o}
            // }
        }
    }
    r.g = function() {  // r.g放的是全局对象
        if ("object" == typeof globalThis)
            return globalThis;
        try {
            return this || new Function("return this")()
        } catch (t) {
            if ("object" == typeof window)
                return window
        }
    }(); // 到这里. 还是什么都没干 7777 999
    var mmmm = r(482); // r的作用是吧482号大函数. export的东西拿到
    mmmm();
    // 结论 r(482)  => 得到的是t中482号函数里面exports的东西
    // r在这里的作用. 是用来获取 编号下函数被导出的内容, r被称为加载器
    r(482);
}
)();