这是我参与「第四届青训营 」笔记创作活动的第9天
Webpack
什么是webpack？
本质上是一种前端资源编译打包工具
使用webpack
核心流程
1.入口处理
从entry文件开始，启动编译流程
2.依赖解析
从entry文件开始，根据require or import 等语句找到依赖资源
3.资源解析
根据module配置，调用资源转移器，将png、css等非标准js资源转译为js内容
4.资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的js文件
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持typescript coffeescript方言
- 统一其他资源等处理模型
- etc...
关于webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
-
流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
-
工具类：主流程之外，提供更多工程化能力
流程类配置
工具线
其他工具
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
理解Loader
特点：
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
理解插件
插件架构精髓：对扩展开放，对修改封闭
设置webpack很多功能都是插件来实现的
钩子的核心信息：
1.时机：编译过程的特点节点，webpack会以钩子形式通知插件此刻正在发生什么事情
2.上下文：通过tapable提供的回调机制，以参数方式传递上下文信息
3.交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
学习方法
