这是我参与「第五届青训营」伴学笔记创作活动的第23天
一、本节课重点内容
本节课将带来 Webpack 的另一个重要的扩展方式——插件，在日常的作业过程中，Webpack 的很多的重要能力需要通过插件来实现，插件架构的存在涉及诸多工程化工具与开发框架，通过插件可以提供工具更多的扩展性。
课程重点内容总结归纳如下所示：
- 插件定义解析
- 插件设计优势
- Loader 与插件的差异
- Webpack 学习方法推荐
二、详细知识点介绍
插件是什么?为什么这么设计? 很多知名工具，如:
- VS Code、Web Storm、Chrome、 Firefox
- Babel、Webpack、 Rollup、 Eslint
- Vue、Redux、Quill、 Axios
等等，都设计了所谓"插件" 架构，为什么?
因为我们需要利用插件，来提升整个应用的拓展性。
这是一个特别复杂的过程，那么:
- 新人需要了解整个流程细节，上手成本高
- 功能迭代成本高，牵一发动全身
- 功能僵化，作为开源项目而言缺乏成长性
- Blabla
- 心智成本高=>可维护性低=>生命力弱 插件架构的精髓:对扩展开放，对修改封闭
它会极大的简化我们的工程量。 创建一个插件的实例，插件用起来十分的简单，但是写起来十分的复杂麻烦。
首先，我们围绕着“钩子”说起：
钩子的核心信息
- 时机:编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情;
- 上下文 :通过tapable 提供的回调机制，以参数方式传递上下文信息;
- 交互:在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变。
- 时机:‘compier.hooks.compilation’（什么时候触发）
- 参数:‘compilation’等（专属对象）
- 交互:‘dependencyFactories.set’（与上下文进行交互）
- 入门应用：理解打包流程
熟练掌握常用配置项、Loader、 插件的使用方法，能够灵活搭建集成Vue、 React、Babel、 Eslint、 Less、Sass、图片处理等工具的Webpack环境掌握常见脚手架工具的用法，例如: Vue- cli、 create-react- app、 @angular/cli，我们可以对其进行简易的使用即可；
- 进阶：理解Loader、 Plugin 机制，能够自行开发Webpack 组件，简单的进行开发，对机制与核心原理有自己的理解
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
- 大师级：阅读源码，理解Webpack编译、打包原理，甚至能够参 与共建。
知识点导航：
简单的理解功能，掌握一些常用的插件的用法，掌握一些核心的机制与内容，能够简单的使用现成的脚手架来进行项目的搭建即可。
三、总结
理解了插件的作用，了解了设计一个能够使用的呃插件需要的操作。 老师也帮助我找到了一个插件学习的新手路径，就是先理解插件的简单概念，能够使用最基础的编译环境来进行简单的插件代码学习，逐渐试应开发、掌握基础的脚手架的用法；然后再逐渐的深入学习，开始进行实际问题的解决，加入自己对核心理论的理解与思考。
