这是我参与「第四届青训营 」笔记创作活动的第8天
1、为什么要学习Webpack?
1、理解前端“工程化”概念、工具、目标
2、一个团队总要有那么几个熟悉Webpack,某种程度上可以成为个人的核心竞争力
3、高阶前端必经之路
2、什么是Webpack
本质上是一种前端资源编译、打包工具
多份资源文件打包成一个Bundle
支持Babel,Eslint,TS,CoffeSoript,Loss,Sass
支持模块化处理css,图片等资源文件
支持HMR+开发服务器
支持持续监听，持续构建
支持代码分离
3、使用Webpack实例
核心流程--极度简化版
模块化+一致性
1、多个文件资源合并成一个，减少http请求数
2、支持模块化开发
3、支持高级JS特性
4、支持Typescript/CoffeScript/方言
5、统一照片、CSS、字体、等其它资源的处理模型
等
4、使用Webpack
关于Webpack的使用方法，基本都围绕“配置” 展开，而这些配置大致可以划分为两类：
流程类：作用于流程中某个或者若干给环节，直接影响打包效果的配置项
工具类：主流程之外，提供更多工程化能力的配置项
流程类配置
使用Webpack
工具类配置
因为配置太多了我们可以重点学习使用频率比较高的:
entry/output
module/plugins
mode
watch/devServer/devtool
5、理解插件
什么是插件？为什么需要这么设计？
很多的知名工具都是所谓“插件”架构的 eg：
- VScode、Webstorm、Chrome、Firefox
- Babel、Webpack、Rollup、Eslint
- Vue、Redux、Quill、Axios
如果没有使用“插件”架构，对于一个项目而言是不好的，缺点如下：
- 新人需要了解整个流程细节，上手成本高
- 功能迭代成本高，牵一发动全身
- 功能僵化，作为开源项目而言缺乏成长性
- Blaba
总结：
- 心智成本高
- 可维护性低
- 缺少生命力
钩子的核心信息：
1、时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情
2、上下文：通过tapable提供的回调机制，以参数方式传递上下文的信息
3、交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变。
