=====================

以下以 webpack 3.x 为例

======================

1、plugins

plugins 向开发者 提供了webpack 引擎运行过程中一些钩子，并容许开发者注入自己的逻辑

2、plugins 生命周期

##1. 两个重要的组成部分： Compiler and Compilation

compiler: 会在webpack启动的时候被创建（只会被创建一次）， 包含了webpack的所有操作配置， 并且当我们调用一个插件时，会被作为参数传给插件使用

compilation: 是文件编译过程中的对象， 并且提供了很多回调，供开发者注入自己的逻辑

##2. compiler 周期内的hooks

类型: 同步（sync）、异步（async）、并行（parallel）

1. (async)run: 用于启动一个编译环境
2. (sync)compile: 编译器开始启动， 并且在这个阶段可以对参数进行变更
3. (sync)compilation: 开始某个plugin的编译过程
4. (parallel)make:
5. (async)after-compile:
6. (async)emit: 将开始对资源文件做输出，这里有最后一次机会操作assets对象
7. (sync)done:

	this.applyPluginsAsync("before-run", this, err => {
			if(err) return callback(err);

			this.applyPluginsAsync("run", this, err => {
				if(err) return callback(err);

				this.readRecords(err => {
					if(err) return callback(err);

					this.compile(onCompiled);
				});
			});
		});
        

Asynchronously applies all registered handlers for name. The handler functions are called with all args and a callback function with the signature (err?: Error) -> void. The handler functions are called in order of registration.

callback is called after all handlers are called.

Tapable.prototype.applyPluginsAsyncSeries = 	Tapable.prototype.applyPluginsAsync = function 			 applyPluginsAsyncSeries(name) {
	var args = Array.prototype.slice.call(arguments, 1);
	var callback = args.pop();
	var plugins = this._plugins[name];
	if(!plugins || plugins.length === 0) return callback();
	var i = 0;
	var _this = this;
	args.push(copyProperties(callback, function next(err) {
		if(err) return callback(err);
		i++;
		if(i >= plugins.length) {
			return callback();
		}
		plugins[i].apply(_this, args);
	}));
	plugins[0].apply(this, args);
};

3. Compilation 期间

1. compilation.modules: 一个存放编译中涉及的模块（构建时的输入）的数组。每个模块处理了你源码库中的一个原始文件的构建。
2. module.fileDependencies: 一个存放模块中包含的源文件路径的数组。它包含了 JavaScript 源文件自身（例如：index.js），和所有被请求（required）的依赖资源文件（样式表，图像等等）。想要知道哪些源文件属于这个模块时，检查这些依赖是有帮助的。
3. compilation.chunks: 一个存放编译中涉及的块（构建后的输出）的数组。每个块处理了一个最终输出资源的组合。
4. chunk.modules: 一个存放块中包含的模块的数组。为了扩展，你也许需要查阅每个模块的依赖来得知哪些源文件注入到了块中。
5. chunk.files: 一个存放了块生成的输出文件的文件名的数组。你也许需要从 compilation.assets 中访问这些资源内容。

4. 案例分析

a. DefinePlugin

hook：compilation

b. BannerPlugin

hook: compilation - optimize-chunk-assets

5. 总结

1. 场景
   可以在资源编译之后，对资源做一些统一的处理 如bannerPlugin
   可以对源码本身做一些改变，如 DefinePlugin
   可以对文件进行缓存，加速编译过程， 如CachePlugin
   实现热加载， 如 HotModuleReplacementPlugin

2. 编写插件
   plugin -> apply -> 分析作用 -> 选择hook -> 编写业务

6. 其他

1. parser
2. watch
3. 3.x -> 4.x的变化

参考：（部分3.x版本文档已经下线，下面部分的是4.x版本的）

1. webpack
2. webpack版本
3. plugins
4. webpack源码
5. plugin列表
6. plugins API
7. how to write