非常教程

Webpack参考手册

接口 | API

Tapable

Tapable是一个小型库,允许你添加和应用插件到一个javascript模块。它可以被继承或混入其他模块。它类似于NodeJS的EventEmitter课程,专注于定制事件发射和操作。但是,除此之外,还Tapable允许您通过回调参数访问事件的“排放者”或“生产者”。

Tapable 有四组成员函数:

  • plugin(name:string, handler:function):这允许自定义插件注册到Tapable实例的事件中。这起到类似on()的方法EventEmitter,这是用于注册一个处理程序/侦听器当信号/事件发生做一些事情。
  • apply(…pluginInstances: (AnyPlugin|function)[])AnyPlugin应该是一个具有方法的类(或者很少,是一个对象)apply,或者只是一个带有一些注册码的函数。此方法仅适用于插件的定义,以便真正的事件侦听器可以注册到Tapable实例的注册表中。
  • applyPlugins*(name:string, …)Tapable实例可以使用这些函数将特定哈希下的所有插件应用。这组方法就像使用各种策略精心控制事件发射的emit()方法EventEmitter
  • mixin(pt: Object):一种简单的方法来将Tapable原型扩展为mixin而不是继承。

不同的applyPlugins*方法涵盖以下用例:

  • 插件可以串行运行。
  • 插件可以并行运行。
  • 插件可以一个接一个地运行,但从前一个插件(瀑布)获取输入。
  • 插件可以异步运行。
  • 放弃保释运行插件:也就是说,一旦一个插件返回非插件undefined,跳出运行流程并返回该插件的返回。这听起来像once()EventEmitter,但是是完全不同的。

webpack的Tapable实例之一编译器负责编译webpack配置对象并返回一个编译实例。编译实例运行时,将创建所需的捆绑包。

请参阅下面的简化版本,了解它如何使用Tapable

node_modules/webpack/lib/Compiler.js

var Tapable = require("tapable");

function Compiler() {
    Tapable.call(this);
}

Compiler.prototype = Object.create(Tapable.prototype);

现在在编译器上编写一个插件,

my-custom-plugin.js

function CustomPlugin() {}
CustomPlugin.prototype.apply = function(compiler) {
  compiler.plugin('emit', pluginFunction);
}

编译器在其生命周期的适当位置通过执行插件

node_modules/webpack/lib/Compiler.js

this.apply*("emit",options) // will fetch all plugins under 'emit' name and run them.
Webpack

webpack 是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。

主页 https://webpack.js.org/
源码 https://github.com/webpack/webpack
发布版本 3.8.1

Webpack目录

1.指南 | Guides
2.接口 | API
3.概念 | Concepts
4.组态 | Configuration
5.装载 | Loaders