Webpack知识体系
1 什么是Webpack
前端项目由各种资源构成
手动管理这些资源的缺陷：
- 资源文件过多时，操作过程繁琐
- 资源文件之间有依赖关系的时候，需要严格按照依赖顺序书写
- 开发与生产环境一致，难以接入TS或JS新特性
- 比较难以接入Less、Sass等工具
- JS、图片、CSS资源管理模型不一致
Webpack本质上是一种前端资源编译、打包工具：
- 多份资源文件打包成一个Bundle
- 支持Babel、Eslint、TS、CoffeeScript、Less、Sass
- 支持模块化处理CSS、图片等资源
- 支持HMR + 开发服务器
- 支持持续监听、持续构建
- 支持代码分离
- 支持Tree-shaking
- 支持Sourcemap
- ……
2 Webpack打包核心流程
2.1 打包核心流程（极简版）
2.2 核心优势：模块化 + 一致性
- 多个文件资源合并成一个，减少HTTP请求数
- 支持模块化开发
- 支持高级JS特性
- 支持TypeScript、CoffeeScript语法
- 统一图片、CSS、字体等其它静态资源的处理模型
- ……
3 使用webpack
关于Webpack的使用方法，基本都围绕“配置”展开。 而这些配置大致可划分为两大类：
- 流程类：作用于流程中的某个或若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
3.1 流程类配置
按使用频率：
- entry / output
- module / plugins
- mode
- watch / devServer / devtool
流程类配置使用方法：
3.2 处理CSS
安装配置css-loader、style-loader，即可在js文件中引入css样式文件
3.3 接入Babel
3.4 生成HTML
3.5 HMR
3.6 Tree-Shaking
3.7 其它工具
- 缓存
- SourceMap
- 性能监控
- 日志
- 代码压缩
- 分包
- ……
3 Loader
为了处理非标准JS资源，设计出资源翻译模块（用于将资源翻译为标准JS）
3.1 使用Loader
3.2 链式调用
以上图为例：
- less-loader：实现less=》css的转换
- css-loader：将css包装成类似module.eports = "${css}"的内容，包装后的内容符合js语法
- style-loader：将css模块包进require语句，并在运行时调用injectStyle等函数将内容注入到页面的style标签
3.3 其它特性
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
3.4 如何编写Loader
3.5 常见Loader
4 Plugin
插件架构精髓：对扩展开放，对修改封闭
插件围绕“钩子”展开
钩子的核心信息：
- 时机：编译过程的特定节点，webpack会以钩子形式通知插件此刻正在发生什么事情（compiler.hooks.compliation）
- 上下文：通过tapable提供的回调机制，以参数形式传递上下文信息（compilation等）
- 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变上下文信息（dependencyFactories.set）
