这是我参与「第五届青训营 」笔记创作活动的第16天
本堂课重点内容
1. Webpack 的本质 2. Webpack 定义解析 3. Webpack 优势 4. 流程类配置 5. 处理 CSS 6. 接入 Bable 7. 生成 HTML 8. 使用 Webpack - 工具线 9. Webpack 内容识别 - 只认识 JS 10. 使用 Loader 11. 认识 Loader ：链式调用与其他特性 12. Loader 编写 13. 常见 Loader 14. 插件定义解析 15. 插件设计优势 16. Loader 与插件的差异 17. Webpack 学习方法推荐
重点知识点介绍
Webpack的核心流程
1. 入口处理
从entry文件开始，启动编译流程
2. 依赖解析
从entry文件开始，根据require or import等语句找到依赖资源
3. 资源解析
根据module配置，调用资源转移器，将png, css等非标准JS资源转译为JS内容
4. 资源合并打包
将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
- 递归调用2，3直到所有资源处理完毕
模块化 + 一致性
- 多个文件资源合并成一个，减少http请求数 - 支持模块化开发 - 支持高级JS特性 - 支持Typescript、CoffeeScript语言 - 统一图片、CSS、字体等其他资源的处理模型 - ……
使用Webpack
配置
- 流程类配置
- 入口处理：输入entry, context
- 模块解析：resolve, externals
- 模块转译：module
- 后处理：otimization, mode, target
- 工具类配置
Loader
loader作用：webpack只认识js安装各种loader依赖，需要将各种非js转成js
特性：
- 链式执行 - 支持异步执行 - 分normal、pitch两种模式
常用loader
Plugin
引用参考
Webpack 知识体系(feishu.cn)
