一、loader&plugin
- loader它是一个转换器，它只专注于转换这一个领域，例如babel-loader能将ES6+的代码转换为ES5或以下，以此来保证兼容性，那么它是运行在打包之前的。
- plugin可能运行在打包之前，也可能运行在打包的过程中，或者打包完成之后。总之，它不局限于打包，资源的加载，还有其它的功能。所以它是在整个编译周期都起作用。
3.常用的loader：
- 常用的plugin:
clean-webpack-plugin插件会在我们每次打包之前自动清理掉旧的dist文件夹，
二、自定义plugin
- compiler 对象代表了完整的 webpack 环境配置。
- compilation 对象代表了一次资源版本构建。
过程：
//创建一个构造函数
function No1WebpackPlugin (options) {
this.options = options
}
//重写构造函数原型对象上的 apply 方法
No1WebpackPlugin.prototype.apply = function (compiler) {
compiler.hooks.done.tap('No1', () => {
console.log(this.options.msg)
})
}
//3. 将我们的自定义插件导出
module.exports = No1WebpackPlugin;
让我们来拆分一下compiler.hooks.done.tap('No1', () => {})：
拆分过程
3种触发compiler钩子的方法:tap、tapAsync、tapPromise
根据钩子所属的类型(9种)选择不同的触发方法（同步、异步、promise）
- tap：可以注册同步钩子也可以注册异步钩子
- tapAsync：回调方式注册异步钩子
- tapPromise：Promise方式注册异步钩子,回调函数中只需要一个参数compilation，不需要再调用一下cb()
