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的更多相关文章

  1. Gradle学习系列之十——自定义Plugin（本系列完）

    在本系列的上篇文章中,我们讲到了如何自定义Task类型,在本篇文章中,我们将讲到如何自定义Plugin. 请通过以下方式下载本系列文章的Github示例代码: git clone https://gi ...

  2. vue---vue2.x自定义plugin，给vue添加全局方法，原型上增加全局方法

    1. 自定义plugin.js export default{ install(Vue,options); { Vue.prototype.toStringTwo=(str)=>( ('0000 ...

  3. cordova 自定义 plugin

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_30879415/article/details/81265455准备工作安装cordovanp ...

  4. Gradle学习系列之九——自定义Task类型

    在本系列的上篇文章中,我们学习了多Project构建,在本篇文章中,我们将学到如何自定义Task类型. 请通过以下方式下载本系列文章的Github示例代码: git clone https://git ...

  5. MyBatis之简单了解Plugin

    MyBatis的Configuration配置中有一个Plugin配置,根据其名可以解释为"插件",这个插件实质可以理解为"拦截器"."拦截器&quo ...

  6. webpack 快速入门 系列 - 自定义 wepack 上

    其他章节请看: webpack 快速入门 系列 自定义 wepack 上 通过"初步认识webpack"和"实战一"这 2 篇文章,我们已经学习了 webpac ...

  7. 深入浅出Mybatis系列（六）---objectFactory、plugins、mappers简介与配置

    上篇文章<深入浅出Mybatis系列(五)---TypeHandler简介及配置(mybatis源码篇)>简单看了一下TypeHandler, 本次将结束对于mybatis的配置文件的学习 ...

  8. （转）android平台phonegap框架实现原理

    (原文)http://blog.csdn.net/wuruixn/article/details/7405175 android平台phonegap框架实现原理 分类: Android2012-03- ...

  9. Gradle学习系列之一——Gradle快速入门

    这是一个关于Gradle的学习系列,其中包含以下文章: Gradle快速入门 创建Task的多种方法 读懂Gradle语法 增量式构建 自定义Property 使用java Plugin 依赖管理 构 ...

  10. PhoneGap原理分析

    PhoneGap提供了Native Api的支持(如:重力感应.相机.联系人.文件.地址位置…), 比如要用js获取本机的联系人,可以用: var options = new ContactFindO ...

随机推荐

  1. python 取整方法

    1.向下取整: int() 2.向上取整:ceil() 使用ceil()方法时需要导入math模块,例如 3.四舍五入:round() 4.分别取 将整数部分和小数部分分别取出,可以使用math模块中 ...

  2. xshell连接时显示“服务器发送了一个意外的数据包。received:3,expected:20“问题的解决方法

    xshell连接时显示"服务器发送了一个意外的数据包.received:3,expected:20"问题的解决方法 解决方法:在/etc/ssh/sshd_config最后增加以下 ...

  3. JZOJ 1073. 【GDOI2005】山海经

    \(\text{Solution}\) 非常经典的求区间最大字段和 不难想到线段树,考虑处理区间答案的合并 维护前缀后缀最大和与区间答案,合并考虑跨中点贡献即可 代码打得非常恶心... \(\text ...

  4. GDOI2021游记

    \(\text{Day0}\) 4月9日抵达深圳耀华实验学校 宿舍在迷你公寓,竟然是女生公寓?!! 我想起了 \(b\) 站看到的一个 \(NOI\) 全国总决赛的纪录片(惊人的相似) 不过确实还行 ...

  5. 题解 P5072 【[Ynoi2015] 盼君勿忘】

    在太阳西斜的这个世界里,置身天上之森.等这场战争结束之后,不归之人与望眼欲穿的众人, 人人本着正义之名,长存不灭的过去.逐渐消逝的未来.我回来了,纵使日薄西山,即便看不到未来,此时此刻的光辉,盼君勿忘 ...

  6. Word 文本转换为表格

    文本转换为表格的功能,首先点击"插入"选项卡"表格"组中的"表格"下拉按钮,打开下拉列表中选择"文本转换成表格"选项.

  7. 基于OpenGL绘制shp文件

    1. 引言 坐标数据是空间数据文件的核心,空间数据的数据量往往是很大的.数据可视化是GIS的一个核心应用,绘制海量的坐标数据始终是一个考验设备性能的难题,使用GPU进行绘制可有效减少CPU的负载,提升 ...

  8. MySQL 中的锁有哪些类型，MySQL 中加锁的原则

    MySQL 中的锁理解 锁的类型 全局锁 缺点 适用范围 表级锁 表锁 元数据锁 意向锁 自增锁 行锁 Record Lock Gap Lock Next-Key Lock 插入意向锁 加锁的原则 1 ...

  9. 聊一下kafka的消费组

    介绍 消费组使kafka中很重的概念,只有弄清楚消费组的概念,才能在项目中把它运用好,在kafka中,每个消费者都对应一个消费组,消费者可以是一个线程,一个进程,一个服务实例,如果kafka想要消费消 ...

  10. 1137. 第 N 个泰波那契数 (Easy)

    问题描述 1137. 第 N 个泰波那契数 (Easy) 泰波那契序列 T 定义如下: T = 0, T = 1, T = 1, 且在 n >= 0 的条件下 T = T + T + T 给你整 ...