当前位置: 首页 > news >正文

爬虫----webpack

目录

一. 什么是webpack

出现的原因:同名函数

概念:

特征:大量缩进

webpack的格式

简单的webpack格式:

详细的webpack格式:

几个参数的运用

1. webpack数组形式

2. webpack对象格式

3.多个js文件打包

打印要扣的代码

案例,天翼网




知识星球 | 深度连接铁杆粉丝,运营高品质社群,知识变现的工具

一. 什么是webpack

出现的原因:同名函数

概念:

webpack 是 JavaScript 应用程序的模块打包器,可以把开发中的所有资源(图片、js文件、css文
件等)都看成模块,通过loader(加载器)和 plugins (插件)对资源进行处理,打包成符合生产环境
部署的前端资源。所有的资源都是通过 JavaScript 渲染出来的。
  • webpack 是一个基于模块化的打包(构建)工具, 它把一切都视作模块
  • 如果一个页面大部分是script标签构成,80%以上是 webpack 打包。
  • 地址:财联社A股24小时电报-上市公司动态-今日股市行情报道

特征:大量缩进

webpack的格式

简单的webpack格式:

// 简单
!function (e) {加载器
}(接收的参数) 

详细的webpack格式:

 详细
!function (e) {// 存放加载器var c = {}// 加载器function n(t) {// 创建a对象var a = {i: t,  // 表示模块的标识符l: !1, // 布尔值,初试为false,用来表示当前模块是否被加载exports: {}  // 空对象,用于讲模块导出,存储};c[t] = {i: t,  // 表示模块的标识符l: !1, // 布尔值,初试为false,用来表示当前模块是否被加载exports: {}  // 空对象,用于讲模块导出,存储};// 执行函数里面的代码return e[t].call(a.exports, a, a.exports, n),a.l = !0,a.exports}n.m = e  // n.m 用来存所有的模块n(2)     // 执行当前选中的模块,下标2就是第三个模块
}([function () {...},function () {...},function () {...},function () {...},
])

几个参数的运用

1. webpack数组形式

给需要处理业务的模块进行打包,通过下标取值
// 这个格式就是webpack
!function (e) {// 存放加载器var c = {}function n(t) {var a = c[t] = {i: t,l: !1,exports: {}};console.log(a)return e[t].call(a.exports, a, a.exports, n),a.l = !0,a.exports}n.m = e// 入口n(2)
}([// 存放模块function () {console.log('负责登陆')},function () {console.log('负责注册')},function () {console.log('负责注册')}
])
​
 

2. webpack对象格式


给需要处理业务的模块进行打包,通过 key 取值
!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('xialuo') // 对象 根据KEY 找模块
}({0: function () {console.log('我是模块1 负责加密')},'xialuo': function () {console.log('我是模块2 负责解密')},2: function () {console.log('我是模块3 负责爬数据')}}
);
 

3.多个js文件打包

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

打印要扣的代码

window.mycode += '"' + n + '": ' + e[n] + ',\n'

案例,天翼网

b跟webpack有关,根据缩进,有理由怀疑是webpack

发现是多文件的webpack

得全扣,先扣主文件

打断点进去

再扣子文件

最终

此时我们导出加载器

干掉初始化

导出我们要的函数

找到b

最终

然后在本地补环境就行了

补完环境之后精简代码

替换掉这里

 

http://www.lryc.cn/news/443131.html

相关文章:

  • Spring Mybatis PageHelper分页插件 总结
  • 9、等保测评介绍
  • 解决Gson将长数字( json字符串)转换为科学记数法格式
  • php环境搭建教程
  • 测试ASP.NET Core的WebApi项目调用WebService
  • 【用Java学习数据结构系列】对象的比较(Priority Queue实现的前提)
  • 快手视频怎么保存到相册?(详细操作)
  • 为什么 ECB 模式不安全
  • 『功能项目』事件中心处理怪物死亡【55】
  • 一个安卓鸿蒙化工具
  • PyQt5库学习之QFileDialog.getExistingDirectory函数
  • AUTOSAR_EXP_ARAComAPI的5章笔记(9)
  • 京东-第2题-撞车
  • Vue3流程图插件-Vue Flow
  • 初始网络编程(下)
  • java计算机毕设课设—土地档案管理系统(附源码、文章、相关截图、部署视频)
  • 第4步CentOS配置SSH服务用SSH终端XShell等连接方便文件上传或其它操作
  • Spring:统一结果私有属性造成的前端无法访问异常报错问题
  • thinkphp 做分布式服务+读写分离+分库分表(分区)(后续接着写)
  • webpack的使用
  • MATLAB智能优化算法-学习笔记(3)——大规模邻域搜索算法求解旅行商问题【过程+代码】
  • 货币单位换算 - 华为OD统一考试(E卷)
  • 95、k8s之rancher可视化
  • 简单生活的快乐
  • 【JAVA开源】基于Vue和SpringBoot的在线文档管理系统
  • 大数据新视界 --大数据大厂之数据驱动决策:如何利用大数据提升企业竞争力
  • 【Linux】生产者消费者模型:基于阻塞队列,使用互斥锁和条件变量维护互斥与同步关系
  • 多层感知机paddle
  • linux-网络管理-网络服务管理 17 / 100
  • Docker上安装mysql