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. 宇宙最强开发工具VScode简易手册

    VS Code 的全称是 Visual Studio Code,是一款开源的.免费的.跨平台的.高性能的.轻量级的代码编辑器.它在性能.语言支持.开源社区方面,都做得很不错,是这两年非常热门的一款开发 ...

  2. 【NOIP2012提高组】开车旅行

    题目 到处都有 闲话 碰巧考场上出了 \(Noip\) 原题 然后这题自然而然想到 预处理一个点开始分别由 \(A,B\) 驾驶会走到的下一个点 然后用预处理的数组求答案 当然你会发现 \(X=X0\ ...

  3. 我在京东做研发 | 从好玩到好用，爆火ChatGPT前沿分享

    | 嘉宾:吴友政,京东集团高级总监.京东科技语音语言算法部负责人. 2006年中科院自博士毕业后,先后在日本国立信息通信研究机构.英国爱丁堡大学.索尼中国研究院从事自然语言处理相关研究工作,主要聚焦自 ...

  4. Python常见面试题006 类方法、类实例方法、静态方法有何区别？

    006. Python中类方法.类实例方法.静态方法有何区别? 全部放一个里面篇幅过大了,就拆分成1个个发布 示例代码 class Human: def __init__(self, name): s ...

  5. Mbps 与 MBps

    bps 是速率单位,表示比特每秒(bit per second),单位也可以是 bit/s.1K = 103 bit/s:1M = 106 bit/s.Mbps 中的b不是字节 Byte,而是比特 b ...

  6. Java中的源码，反码和补码

    一.在Java中所有数据都是以补码的形式表示的,原码即数字的二进制表示加符号位,反码即将原码按位取反,补码简单来说即反码加1 二.Java中数据的表示方式 1.正数:正数的原码.补码.反码都相同,正数 ...

  7. ABP微服务学习系列-修复System.Text.Json不支持序列化Exception

    前面我们已经把服务都启动了,然后我们试试请求API.发现请求出现500 返回错误 System.NotSupportedException: Serialization and deserializa ...

  8. net core 添加cors，解决跨域问题

    ConfigureServices //允许跨域 services.AddCors(options => { options.AddPolicy("any", builder ...

  9. 【Java-01-1】java基础-基本语法（1）（基本输入输出，计算）

    1.基本输出语句 /* * java * 多行注释 */ //java单行注释 public class _01_HelloWorld { public static void main(String ...

  10. MySQL 修改字段子表中的顺序

    修改字段排列位置 ALTER TABLE 表名 MODIFY 字段名1 数据类型 FIRST|AFTER 字段名2 参数说明 FIRST,可选参数 将字段1,修改为表的第一个字段. AFTER 字段名 ...