mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4mobile wallpaper 5mobile wallpaper 6
384 字
1 分钟
webpack反爬处理技巧
2026-03-08

webpack*大胖狗#

Webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具(Module Bundler)。 简单来说,它的核心工作是:把你项目中散落的多个文件(JS、CSS、图片、字体等),分析它们之间的依赖关系,然后打包成一个或多个浏览器能直接运行的“ bundles”(包)。 它不仅能帮助前端打包整理文件,也在反爬虫上面起了很重要的作用,可谓是一举两得😊

1.wenbpack经典调用形式#

!function(形参){加载器}([模块1,模块2······]) 以数组调用,其中最后的小括号会将里面内容传给形参
!function(形参){加载器}("k1":"模块1","k2":"模块2"·······)以对象形式调用
加载器本质:构建一个对象,能够轻松调用所有的功能函数

2.实例(数组形式)#

//建立一个数组
shuzu = [
function(){console.log("a功能")},
function(){console.log("b功能")}
]
!function(e){
//加载器逻辑
var t ={};//缓存对象
function n(r){
//判断是否已经在缓存池里了
if(t[r])
return t[r].exports;
//第一次调用,写入缓存池对象
var o = t[r] = {
i:r,
l:!1,
exports:{}
};
//真正的函数调用
e[r].call(o.exports,o,o.exports,n);
return o.exports.exports
}
window.loader = n;
}(shuzu);

3.实例(对象形式)#

function(e){
var t = {};
//加载器函数
function n(r){
//判断是否已经在缓存池里了
if(t[r])
return t[r].exports;
//第一次调用,写入缓存池对象
var o = t[r] = {
i:r,
l:!1,
exports:{}
};
//真正的函数调用
e[r].call(o.exports,o,o.exports,n);
return o.exports.exports
}({
1001:function(){
console.log("a调用");
this.exports = 100;
},
1002:function(){
console.log("b调用");
this.exports = 200;
}
});

4.在自执行函数外面调用某个功能模块#

//写一个全局变量,类似于读取c++类里的私有成员
let a = {}
function(e){
var t = {};
//加载器函数
function n(r){
//判断是否已经在缓存池里了
if(t[r])
return t[r].exports;
//第一次调用,写入缓存池对象
var o = t[r] = {
i:r,
l:!1,
exports:{}
};
a.n = n; //将加载器函数提取
//真正的函数调用
e[r].call(o.exports,o,o.exports,n);
return o.exports.exports
}({
1001:function(){
console.log("a调用");
this.exports = 100;
},
1002:function(){
console.log("b调用");
this.exports = 200;
}
});

5.模块吐日志#

//在执行下面调用之前,加上 console.log("模块调用————",r)
e[r].call(o.exports,o,o.exports,n);

这里容易踩的坑:如果模块不在一个文件里,会出现cannot read of undefined (reading “call”)的错误,意思是模块缺失。所以吐日志能检测缺谁,debugger也是一样的道理。

6.注释初始化的坑#

他可能在加载器里调用环境检测的模块,这里要补环境或者直接注释掉他的检测代码
_0x3ff111是加载器,那么以下是对他的属性赋值可以不管
_0x3ff111['m'] = _0x2c4462,
_0x3ff111['c'] = _0x4c8708,
_0x3ff111['d'] = function(_0x3c0136, _0x2bf2fe, _0x5914f9) {
_0x3ff111['o'](_0x3c0136, _0x2bf2fe) || Object['defineProperty'](_0x3c0136, _0x2bf2fe, {
'enumerable': !0x0,
'get': _0x5914f9
});
}
,
_0x3ff111['r'] = function(_0x2341e6) {
'undefined' !== typeof Symbol && Symbol['toStringTag'] && Object['defineProperty'](_0x2341e6, Symbol['toStringTag'], {
'value': 'Module'
}),
Object['defineProperty'](_0x2341e6, '__esModule', {
'value': !0x0
});
}
,
_0x3ff111(_0x3ff111('a')=0)//这里进行赋值初始化,大概率就是环境检测的位置,要注释掉!

7.如何找到加载器呢?#

加载器在页面生成时就开始完成,所以你单纯点下一页这种事件是不会触发的!所以找到类似执行加载器的地方,打断点再刷新

一般找加载器我都是拿到pycharm里面然后宏观看缩进的代码,找到加载器位置,而不是在网页端找,比较难找

8.vue和webpack组合起来的坑#

_0x263439 = Object(_0x2fa7bd['a'])(this['$store']['state']['url']['index']);
像这样的具有$store属性的就是vue,其中this指向vue组件,你在node里直接调用不了(重点是nm的this['$store']['state']['url']['index']这是个定值!研究这么久,不知道放控制台打印一下阿!)
分享

如果这篇文章对你有帮助,欢迎分享给更多人!

webpack反爬处理技巧
https://mizuki.mysqil.com/posts/webpackpojie/
作者
神秘大胖狗
发布于
2026-03-08
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

封面
Sample Song
Sample Artist
封面
Sample Song
Sample Artist
0:00 / 0:00