爬虫从入门到精通(13) | 了解webpack

一、认识webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

首先我们看一下最简单的webpack示例

!function (allModule) {
    function useModule(whichModule) {
        allModule[whichModule].call(null, "hello world!");
    }
    useModule(0)
}([
    function module0(param) {console.log("module0: " + param)},
    function module1(param) {console.log("module1: " + param)},
    function module2(param) {console.log("module2: " + param)},
]);

上述整个代码是一个自执行函数，传递的参数是一个数组(也有对象形式)，里面包含三个方法，分别是 module0、module1 和 module2，我们将其视为三个模块，那么自执行函数接受的参数 allModule 就包含这三个模块，自执行函数里面还包含一个函数 useModule()，可以将其视为模块加载器，即要使用哪个模块，示例中 useModule(0) 即表示调用第一个模块，函数里面使用 call() 方法改变函数中的 this 指向并传递参数，调用相应的模块进行输出。

模块的两种形式

如果我们在node中想调用某个模块

通过设置全局变量，这里我们使用window，然后赋值即可。注意这里window=this会报错，global在node中代表的是全局，this在浏览器中代表的是window

window=global;

!function (allModule) {
    function useModule(whichModule) {
        allModule[whichModule].call(null, "hello world!");
    }
    // useModule(0);
    window.result=useModule
    
}([
    function module0(param) {console.log("module0: " + param)},
    function module1(param) {console.log("module1: " + param)},
    function module2(param) {console.log("module2: " + param)},
]);

result(1)

打包

如果模块比较多，我们就会将模块打包成JS文件, 然后定义一个全局变量 window["webpackJsonp"] = [ ]，它的作用是存储需要动态导入的模块，然后重写 window["webpackJsonp"] 数组的 push( ) 方法为 webpackJsonpCallback( ),也就是说 window["webpackJsonp"].push( ) 其实执行的是 webpackJsonpCallback( ),window["webpackJsonp"].push( )接收三个参数,第一个参数是模块的ID,第二个参数是 一个数组或者对象,里面定义大量的函数,第三个参数是要调用的函数(可选)。

二、逆向抠取webpack

对于我们爬虫逆向当中经常遇到的 webpack 模块化的写法，我们的步骤：

1.我们第一步找的就是加载器，加载器一般是使用call或者apply方法

call() 方法会立即执行这个函数，接受一个多个参数，参数之间用逗号隔开；
apply()方法会立即执行这个函数，接受一个包含多个参数的数组；

格式形如这种

!function(x){
    function xx(n){
        return ..call(**.exports, ***, ***.exports, xx) //apply 
    }
}()

我们在找类似n[“xxx”]这种的字眼，然后打断点，刷新页面进断点，一般就可以找到加载器了

刷新打断后

2.抠取加密函数所在的模块和与其相关的模块一起扣取下来到webstorm中，并补环境window=global

我们抠相关的模块的话，通常是缺什么模块就拿什么模块，要是关系嵌套过多也可以把整个模块函数都抠下来，然后再加载器的js文件中，导入模块js文件即可。


3.定义全局变量调用模块
使用自执行函数中的某个模块，我们可以定义全局变量值，然后在使用模块的地方，赋值到全局变量。call方法的最后就是返回值。

在使用的时候，别忘了改成全局变量名字

三、分界线

• 这里可以看这篇进行实操：某彩网webpack逆向案例
• 这里可以看这篇详细了解webpack：JavaScript之webpack加密代码扣取