27_wbpack_自定义Plugin
Tapable
要想学会自定义Plugin就要先了解Tapable这个库
在我们的wbpack中有两个非常重要的两个类Compiler和Compilation
他们是通过注入插件的方式,来监听webpack 的所有生命周期
在他们的示例中有很多个hooks,而hooks其实是创建了Tapable库中的各种Hook的实例
Tapable有哪些Hook呢?
同步:Sync
- SyncHook
- SyncBailHook
- SyncWaterfallHook
- SyncLoopHook
异步:Async
- Paralle(并行)
- AsyncParallelHook
- AsyncParallelBailHook
- Serise(串行)
- AsyncSeriesHook
- AsyncSeriesBailHook
- AsyncSeriesWaterfallHook
同步和异步的
- 以sync开头的,是同步的Hook
- 以async开头的,两个事件处理回调,不会等待上一次处理回调结束后再执行下一次回调
类别
- bail:当有返回值时,就不会执行后续的事件触发了
- Loop:当返回值为true,就会反复执行该事件,当返回值为undefin或者不返回内容,就退出事件
- Waterfall:当返回值不为undefined时,会将这次返回结果作为下次事件的第一个参数
- Parallel:并行,会同时执行次事件处理回调结束,才执行下一次事件处理回调
- Series:串行,会等待上一是异步的Hook
自定义Plugin
在我们的webpack中有很多的生命周期,我们的插件需要注册到webpack的生命周期当中,那么是如何注册的呢?
- 在webpack函数的createCompiler方法中注册了所有的插件
- 在注册插件的时候会调用插件函数或者插件对象的apply方法
- 插件方法会接收compiler或者compilation对象,我们可以通过compiler或者compilation对象来注册Hook的事件
27_wbpack_自定义Plugin的更多相关文章
- Gradle学习系列之十——自定义Plugin(本系列完)
在本系列的上篇文章中,我们讲到了如何自定义Task类型,在本篇文章中,我们将讲到如何自定义Plugin. 请通过以下方式下载本系列文章的Github示例代码: git clone https://gi ...
- vue---vue2.x自定义plugin,给vue添加全局方法,原型上增加全局方法
1. 自定义plugin.js export default{ install(Vue,options); { Vue.prototype.toStringTwo=(str)=>( ('0000 ...
- cordova 自定义 plugin
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_30879415/article/details/81265455准备工作安装cordovanp ...
- Gradle学习系列之九——自定义Task类型
在本系列的上篇文章中,我们学习了多Project构建,在本篇文章中,我们将学到如何自定义Task类型. 请通过以下方式下载本系列文章的Github示例代码: git clone https://git ...
- MyBatis之简单了解Plugin
MyBatis的Configuration配置中有一个Plugin配置,根据其名可以解释为"插件",这个插件实质可以理解为"拦截器"."拦截器&quo ...
- webpack 快速入门 系列 - 自定义 wepack 上
其他章节请看: webpack 快速入门 系列 自定义 wepack 上 通过"初步认识webpack"和"实战一"这 2 篇文章,我们已经学习了 webpac ...
- 深入浅出Mybatis系列(六)---objectFactory、plugins、mappers简介与配置
上篇文章<深入浅出Mybatis系列(五)---TypeHandler简介及配置(mybatis源码篇)>简单看了一下TypeHandler, 本次将结束对于mybatis的配置文件的学习 ...
- (转)android平台phonegap框架实现原理
(原文)http://blog.csdn.net/wuruixn/article/details/7405175 android平台phonegap框架实现原理 分类: Android2012-03- ...
- Gradle学习系列之一——Gradle快速入门
这是一个关于Gradle的学习系列,其中包含以下文章: Gradle快速入门 创建Task的多种方法 读懂Gradle语法 增量式构建 自定义Property 使用java Plugin 依赖管理 构 ...
- PhoneGap原理分析
PhoneGap提供了Native Api的支持(如:重力感应.相机.联系人.文件.地址位置…), 比如要用js获取本机的联系人,可以用: var options = new ContactFindO ...
随机推荐
- mysql19-锁
1.什么是锁 锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除传统的计算资源(如CPU.RAM.I/O等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性. ...
- VeryCapture V1.8.9.5 中文版安装使用教程
VeryCapture简介 VeryCapture中文版是一款实用的屏幕捕捉工具.VeryCapture最新版持将图钉在桌面.这个功能可以方便图片对比,在写论文或者写文章时比较方便.VeryCaptu ...
- HTML5 + canvas 汽车赛道,飙车游戏(附源码)
好玩的游戏千千万 有趣的万里挑一 最近逛 gitHub 时 发现的一个好玩的赛车游戏 ,试玩之后感觉还是挺不错的 在这分享给那些喜欢玩赛车的车友们 效果图如下 源码分析 TweenMax.min.js ...
- Android 初代 K-V 存储框架 SharedPreferences,旧时代的余晖?
本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. SharedPreferences 是 Android 平台上轻量级的 K-V ...
- 如何在Ubuntu 20.04上安装和保护phpMyAdmin
转载csdn:cukw6666 https://blog.csdn.net/cukw6666/article/details/107985170
- Hbase学习三:Hbase常用命令总结
转载请注明出处: 1.Hbase连接 1.1.进入hbase命令行 hbase shell # 或 bin/hbase shell 1.2.查看帮助 help 1.3.查看所有表 list 2.表操作 ...
- Vue框架整理:computed计算属性设置与缓存
简单的一些小计算可以直接用模板内的表达式计算,比较复杂一点的就建议使用"计算属性来运算了",也方便后期的维护:vue所有的计算属性都以函数的形式写在Vue实例内的computed里 ...
- PE头结构解析(代码实现)
PE头结构解析(代码实现) 图表实现在:https://www.cnblogs.com/juicyhumberger/articles/17064764.html #include "std ...
- 在 Ubuntu 22 的基础上进行 Hadoop 伪分布式(HDFS)的搭建
一.使用VMware安装Ubuntu虚拟机 在Linux系统各个发行版中,Ubuntu系统在服务端和桌面端使用占比最高,网络上资料最是齐全,所以这里使用Ubuntu LTS. 整体的系统安装文件较大( ...
- 项目day1 -- vscode远程连接云服务器
刚学完go的语法,本来想着找个小项目试试手,发现大佬们都是vscode ssh到云服务器上做开发的.正好看到阿里云的学生认证后可以白嫖,就先嫖了个试试手 跟着各大教程简单配置了一下阿里云,安装vsco ...