这是我参与「第四届青训营 」笔记创作活动的第12天
一、什么是Webpack
本质上是一种前端资源编译、打包工具
多份资源文件打包成一个Bundle
支持Babel、Eslint、TS、CoffeeScript、Less、Sass
支持模块化处理css、图片等资源文件
支持HMR+开发服务器
支持持续监听、持续构建
支持代码分离
支持Tree-shaking
支持Sourcemap
二、使用Webpack
核心流程--极度简化版
- 入口处理：从
entry文件开始，启动编译流程 - 依赖解析：从
entry文件开始，根据requireorimport等语句找到依赖资源 - 资源解析：根据
module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容 - 资源合并打包：将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
- 递归调用2、3，直到所有资源处理完毕
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持TypeScript、CoffeeScript方言
- 统一图片、CSS、字体等其他资源的处理模型
使用Webpack
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
工具类：主流程之外，提供更多工程化能力的配置项
Tree-shaking
树摇，用于删除Dead Code
Dead Code：代码没有被用到，不可到达 代码的执行结果不会被用到 代码只读不写
Tree-shaking：模块导出了，但未被其他模块使用
其他工具
- 缓存
- Sourcemap
- 性能监控
- 日志
- 代码压缩
- 分包
三、理解Loader
Webpack只认识JS
为了处理非标准JS资源，设计出资源翻译模块Loader，用于将资源翻译为标准JS
其他特性
链式执行
支持异步执行
分normal、pitch两种模式
四、理解插件
甚至，Webpack本身的很多功能也是基于插件实现的
钩子的核心信息：
- 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情
- 上下文：通过taptable提供的回调机制，以参数方式传递上下文信息
- 交互：在上下文参数中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
五、学习方法
- 入门应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
- 掌握常见脚手架工具的方法，例如：Vue-cli、create-react-app、@angular/cli
- 进阶
- 理解Loader、Plugin机制，能够自行开发Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
- 大师级
- 阅读源码，理解Webpack编译、打包原理，甚至能够参与共建
六、小结
这节课程学习了：
- Webpack的作用
- 理解Webpack配置结构，学习关键配置项
- Loader的作用与常用Loader
- 插件基本形态与作用
