Webpack和Tapable

1. webpack有两个非常重要的类：Compiler和Compilation
2. 他们通过注入插件的方式，来监听webpack的所有生命周期；
3. 插件的注入离不开各种各样的Hook，而他们的Hook是如何得到的呢？
4. 其实是创建了Tapable库中的各种Hook的实例；
5. 所以，如果我们想要学习自定义插件，最好先了解一个库：Tapable
6. Tapable是官方编写和维护的一个库；
7. Tapable是管理着需要的Hook，这些Hook可以被应用到我们的插件中；

Tapable有哪些Hook呢？

Tapable的Hook分类

1. 同步和异步的：
2. 以sync开头的，是同步的Hook；
3. 以async开头的，两个事件处理回调，不会等待上一次处理回调结束后再执行下一次回调；
4. 其他的类别
5. bail：当有返回值时，就不会执行后续的事件触发了；
6. Loop：当返回值为true，就会反复执行该事件，当返回值为undefined或者不返回内容，就退出事件；
7. Waterfall：当返回值不为undefined时，会将这次返回的结果作为下次事件的第一个参数；
8. Parallel：并行，会同时执行次事件处理回调结束，才执行下一次事件处理回调；
9. Series：串行，会等待上一是异步的Hook；

Hook的使用过程

1. 第一步：创建Hook对象

2. 第二步：注册Hook中的事件

3. 第三步：触发事件

自定义Plugin

1. 常见的Plugin：
2. CleanWebpackPlugin
3. HTMLWebpackPlugin
4. MiniCSSExtractPlugin
5. CompressionPlugin
6. 这些Plugin是如何被注册到webpack的生命周期中的呢
7. 第一：在webpack函数的createCompiler方法中，注册了所有的插件
8. 第二：在注册插件时，会调用插件函数或者插件对象的apply方法
9. 第三：插件方法会接收compiler对象，我们可以通过compiler对象来注册Hook的事件
10. 第四：某些插件也会传入一个compilation的对象，我们也可以监听compilation的Hook事件

开发自己的插件

1. 如何开发自己的插件呢？
2. 目前大部分插件都可以在社区中找到，但是推荐尽量使用在维护，并且经过社区验证的；
3. 这里我们开发一个自己的简单插件：将静态文件自动上传服务器中；
4. 自定义插件的过程：
5. 创建AutoUploadWebpackPlugin类；
6. 编写apply方法：
7. 通过ssh连接服务器；
8. 删除服务器原来的文件夹；
9. 上传文件夹中的内容；
10. 在webpack的plugins中，使用AutoUploadWebpackPlugin类；