浅析webpack源码之Tapable粗解（五）

Arno 发布于2019-08-23 14:45 / 2655人阅读

摘要：打开是个构造函数，定义了一些静态属性和方法我们先看在插件下地址上面写的解释就跟没写一样在文件下我们看到输出的一些对象方法每一个对应一个模块而在下引入的下面，我们先研究引入的对象的英文单词解释，除了最常用的点击手势之外，还有一个意思是水龙头进

打开compile

class Compiler extends Tapable {
    constructor(context) {
        super();
            this.hooks = {
                //...
            }
    }
}

Compiler是个构造函数，定义了一些静态属性和方法

我们先看 Tapable

Tapable在node_modules插件下
git地址
上面写的解释Just a little module for plugins就跟没写一样

在lib/index.js 文件下

exports.__esModule = true;
exports.Tapable = require("./Tapable");
exports.SyncHook = require("./SyncHook");
exports.SyncBailHook = require("./SyncBailHook");
exports.SyncWaterfallHook = require("./SyncWaterfallHook");
exports.SyncLoopHook = require("./SyncLoopHook");
exports.AsyncParallelHook = require("./AsyncParallelHook");
exports.AsyncParallelBailHook = require("./AsyncParallelBailHook");
exports.AsyncSeriesHook = require("./AsyncSeriesHook");
exports.AsyncSeriesBailHook = require("./AsyncSeriesBailHook");
exports.AsyncSeriesWaterfallHook = require("./AsyncSeriesWaterfallHook");
exports.HookMap = require("./HookMap");
exports.MultiHook = require("./MultiHook");

我们看到输出的一些对象方法

每一个对应一个模块

而在webpakck Compiler.js下引入的下面

const {
    Tapable,
    SyncHook,
    SyncBailHook,
    AsyncParallelHook,
    AsyncSeriesHook
} = require("tapable");

so，我们先研究引入的对象

tap 的英文单词解释，除了最常用的点击手势之外，还有一个意思是水龙头

进一步可以理解为tapable是管理事件流的意思

借用网上的一张图，tapable是事件管家
之所以名称有差距，是版本问题导致的，目前的是1.1.0版本，我们看看git果然证明了v0.2.8以前的全部都是下图函数所示

idc机房托管混合云源码浅析 Java设计模式之（五）——代理模式源码中文说明之 Tapable

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101089.html

浅析webpack源码之Compilation.js粗解(九)

摘要：编写良好的模块提供了可靠的抽象和封装边界，构成了一致的设计和明确的目的。块此特定术语在内部用于管理捆绑过程。捆绑包由块组成，其中有几种类型例如入口和子。总结一个块是进程中的一组模块，一个是一个发出的块或一组块。我们先看一下 compilation是什么？是一个很大的对象打印key值 [ _pluginCompat, hooks, name, compiler, res...

Tangpj 2019-08-23 14:50 评论0 收藏0
浅析webpack源码之Stat.js粗解(十）

摘要：从出来接着我们看大法，打印一下感觉之前所以的对象都放在了一个合集里，给人而全的感觉里面主要含有一个对象，，输出的，等给每次打包一个值，代表唯一性天啊从compilation出来接着我们看 const stats = new Stats(compilation); Stats.js log大法，打印一下 stats let Stats = { compilation:{ ...

Andrman 2019-08-23 14:50 评论0 收藏0
浅析webpack源码之Compiler.js模块(八)

摘要：小尾巴最终返回了属性挂载把引入的函数模块全部暴露出来下面暴露了一些插件再通俗一点的解释比如当你你能调用文件下的方法这个和上面的不同在于上面的是挂在函数对象上的正题要想理解必须要理解再写一遍地址我们先简单的理解它为一个通过注册插件是插件的事 webpack.js小尾巴 const webpack = (options, callback) => { //... if (...

PumpkinDylan 2019-08-23 14:50 评论0 收藏0
webpack源码之tapable

摘要：它的行为和的方法相似，用来注册一个处理函数监听器，来在信号事件发生时做一些事情他最终还是调用进行存储。而就全部取出来执行。总结上面这些知识是理解插件和运行原理的前置条件更多内容待下次分解参考源码版本说明参考链接引言去年3月的时候当时写了一篇webpack2-update之路,到今天webpack已经到了4.2,更新挺快的,功能也在不断的完善,webpack4特性之一就是零配置, w...

Keagan 2019-08-22 15:49 评论0 收藏0
Webpack源码阅读之Tapable

摘要：源码分析安装好包，根据上述方法，我们运行如下命令初始化在构造函数处打上断点，可以看到继承自，上面定义了一个函数。因为函数定义在原型上，并通过在构造函数中赋值。 Webpack源码阅读之Tapable webpack采用Tapable来进行流程控制，在这套体系上，内部近百个插件有条不紊，还能支持外部开发自定义插件来扩展功能，所以在阅读webpack源码前先了解Tapable的机制是很有必...

yanwei 2019-08-26 10:48 评论0 收藏0