这是我参与「第四届青训营 」笔记创作活动的的第12天。本节课的主题是【Webpack 知识体系】，授课老师为范文杰。
本篇笔记分别对课程中所讲的几个要点进行一些解读，如若有误，欢迎大家在评论区交流，指出不当之处。
为什么要学习Webpack
- 理解 前端工程化 的概念、工具、目标
- 成为竞争力
- 高阶前端必经之路
01. 什么是Webpack
前端由各种资源文件构成
Webpack本质上是一种前端资源编译、打包工具。
02. 使用实例
- 安装依赖：webpack与webpack-cli
- 编辑配置文件
- 执行编译命令
核心流程简化版：
- 入口处理
- 依赖解析
- 资源解析：将css png等非JS资源转换为JS内容
- 资源合并打包
（递归调用2、3，直到所有资源处理完毕）
模块化+一致性
Webpack的使用方法围绕“配置”展开
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程外，提供更多工程化能力的配置项
处理CSS：
module里配置rules（使用依赖-style-loader css-loader）
问题：
- Loader的作用？
- 与旧时代方法对比有什么优缺点？
- 如何处理预编译框架
接入Babel：使低版本浏览器兼容高版本JS
Babel：转译工具
- 安装依赖（babel…）
- 配置文件
生成HTML：
使用依赖-html-webpack-plugin
工具线
HMR:模块热替换，更改代码后无需刷新页面就编译完成
Tree-Shaking：删除Dead Code，对工具类库有奇效
其他工具：
- 缓存
- Sourcemap：映射源代码，线上调试必备
- 性能监控
- 日志
- 代码压缩
- 分包
- …
03. 进阶：理解Loader
为了处理非标准JS资源，设计出资源翻译模块-Loader
用于将资源翻译成JS
链式调用：
04.进阶：理解插件
插件围绕“钩子”展开
开发插件：关注时机、参数、交互
05.学习方法
01.入门
- 理解打包流程
- 熟练配置、插件的使用方法
- 掌握常用脚手架的的用法
02.进阶
- 理解机制，能够自行开发组件
- 掌握常见性能优化手段，能用于解决实际问题
03.大师
阅读源码，理解编译打包原理
