从上文提炼出 webpack 的一些主要流程
init => run(前两个一般不用) => compile(编译开始的时候) => compilation(准备编译的整个过程) => make(开始编译) => afterCompile(编译结束) => seal(对代码进行封装，比如优化、合并...) => codeGenerate(生成代码) => emit(发射，把文件写到硬盘里面) => done
插件，就是找个地方插进去
比如：imagemin-webpack-plugin 、clean-webpack-plugin
imagemin-webpack-plugin
- 这是一个压缩图片的插件
- 文件目录非常简单
- 主要看 apply 这个函数
- 根据看源码的步骤，跳过声明
- 直接看最后的 if else，因为我们一般使用的是 webpack 4 以上的版本，所以进入 compiler.hooks 分支（见代码备注）
- 发现他监听了 emit 这个事件
- 直接看函数名字我们就能知道他的主要功能（优化项目中图片和其他外部图片）
- 对 compilation.assets （此次编译的文件）进行 map 操作，用 testFunction 判断是否是图片文件，然后执行 optimizeImage 这个方法进行图片优化（这里用到了 imagemin 这个库）
这个插件非常简单
clean-webpack-plugin
- 这是一个清理 webpack 的输出目录的插件
- 分析这个插件之前，我们先思考如果我们要写这个插件，我们应该监听哪个钩子函数？如果是init 可能可以？但是有点不妥，因为有可能初始化的过程中会报错，这样就不会产生新的文件，所以就没有必要清除之前的文件
- 很显然我们应该在 emit （写文件之前）去清理文件
- 果然他也是在监听 emit，从而去执行 handleInitial 和 removeFiles（看函数名字就知道了，这俩函数逻辑非常简单，这里暂不分析了）
- 但是细心的你肯定也发现了，为什么下面他还监听了 done？
- 因为可能 emit 的时候也会产生一些垃圾、临时文件，所以也需要清理
ProvidePlugin
- 这个插件主要用于注入全局变量，比如说每个文件都需要用到 JQuery，你需要每个文件都引入，
用这个插件他会帮你自动引入，你直接用就好了 - 使用方法很简单
- 在选项中声明好，只要你用到了 $ 或者 JQuery，就会自动引入 JQuery
vue 同理
同样，如果是我们写这个插件，我们应该监听哪个钩子函数？
猜测应该是在 compilation 或者 make 阶段
- 这个插件就不一样了，他主要监听的是 nft 的 parse 阶段
- 我们来看这个 handle 函数做了什么
- 遍历了 definition （就是选项哪个对象: {$: 'jquery', vue: [....]}）
- 分析所有的表达式（expression），如果你用到了哪些，就帮你直接在依赖中添加（等价于帮你自动 import）
- 主要思路
正式因为插件可以在任何阶段进行魔改，所以 webpack 功能非常强大
常用插件
loader 与 plugin 的区别
- loader 是在 make 阶段执行的，而 plugin 可以在任何一个阶段插入，两者之间没有关系
- webpack 中 loader 和 plugin 的区别是什么
- 截取一个最高赞的分析一下
![]()
loader 没啥问题，就是转换文件
它丰富了webpack本身（难道 loader 没有丰富 webpack 吗？）
针对是loader结束后（plugin 可以对任何阶段进行操作）
它并不直接操作文件（他可以直接操作文件，甚至可以删文件）
就这些修正
loader 比较简单，在 make 阶段中执行，单纯的文件转换过程，而 plugin 他是对 webpack 的功能进行拓展，他是基于事件机制，对 webpack 的每个阶段都可以进行介入，做一些功能（任何你想做的）。
如何自己写一个 plugin
必须名声一个 class
必须有一个 apply 函数，并且接受一个 compiler 参数
接下来对某一个钩子进行监听，在写你的主要逻辑
举例
![]()
一个简单的在 done 之后打印一句话，和使用方法
用到的主要知识
对 webpack hooks 的了解
对编译原理的了解
对 chunk、hash、module、dep、factor 等概念的理解
