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. mysql19-锁

    1.什么是锁 锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除传统的计算资源(如CPU.RAM.I/O等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性. ...

  2. VeryCapture V1.8.9.5 中文版安装使用教程

    VeryCapture简介 VeryCapture中文版是一款实用的屏幕捕捉工具.VeryCapture最新版持将图钉在桌面.这个功能可以方便图片对比,在写论文或者写文章时比较方便.VeryCaptu ...

  3. HTML5 + canvas 汽车赛道,飙车游戏（附源码）

    好玩的游戏千千万 有趣的万里挑一 最近逛 gitHub 时 发现的一个好玩的赛车游戏 ,试玩之后感觉还是挺不错的 在这分享给那些喜欢玩赛车的车友们 效果图如下 源码分析 TweenMax.min.js ...

  4. Android 初代 K-V 存储框架 SharedPreferences，旧时代的余晖？

    本文已收录到  AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. SharedPreferences 是 Android 平台上轻量级的 K-V ...

  5. 如何在Ubuntu 20.04上安装和保护phpMyAdmin

    转载csdn:cukw6666 https://blog.csdn.net/cukw6666/article/details/107985170

  6. Hbase学习三：Hbase常用命令总结

    转载请注明出处: 1.Hbase连接 1.1.进入hbase命令行 hbase shell # 或 bin/hbase shell 1.2.查看帮助 help 1.3.查看所有表 list 2.表操作 ...

  7. Vue框架整理：computed计算属性设置与缓存

    简单的一些小计算可以直接用模板内的表达式计算,比较复杂一点的就建议使用"计算属性来运算了",也方便后期的维护:vue所有的计算属性都以函数的形式写在Vue实例内的computed里 ...

  8. PE头结构解析（代码实现）

    PE头结构解析(代码实现) 图表实现在:https://www.cnblogs.com/juicyhumberger/articles/17064764.html #include "std ...

  9. 在 Ubuntu 22 的基础上进行 Hadoop 伪分布式（HDFS）的搭建

    一.使用VMware安装Ubuntu虚拟机 在Linux系统各个发行版中,Ubuntu系统在服务端和桌面端使用占比最高,网络上资料最是齐全,所以这里使用Ubuntu LTS. 整体的系统安装文件较大( ...

  10. 项目day1 -- vscode远程连接云服务器

    刚学完go的语法,本来想着找个小项目试试手,发现大佬们都是vscode ssh到云服务器上做开发的.正好看到阿里云的学生认证后可以白嫖,就先嫖了个试试手 跟着各大教程简单配置了一下阿里云,安装vsco ...