这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
课程介绍
- 本节课将重点围绕「构建 Webpack 知识体系」这一核心话题展开。在正式学习 Webpack 之前，本节课将解读为什么需要学习 Webpack ，Webpack 的本质是什么以及 Webpack 技术优势等相关知识。
- 在介绍完 Webpack 是什么之后，本节课将主要带来 Webpack 的使用方法，帮助同学从理论到实践，能够通过代码展示与案例讲解，了解关于 Webpack 的具体使用方法。
- 有关 Webpack 的讲解，除了使用与配置之外，还有重要的知识则是 Webpack 的扩展方式，在对基础的概念、本质、使用讲解完成后，本节课主要解读 Webpack 的扩展方式之一 - Loader。
- 本节课将带来 Webpack 的另一个重要的扩展方式 - 插件，在日常的作业过程中，Webpack 的很多的重要能力需要通过插件来实现，插件架构的存在涉及诸多工程化工具与开发框架，通过插件可以提供工具更多的扩展性。
课程重点
- Webpack 的本质
- Webpack 定义解析
- Webpack 优势
-
- 处理 CSS
- 接入 Bable
- 生成 HTML
- 使用 Webpack - 工具线
- Webpack 内容识别 - 只认识 JS
- 使用 Loader
- 认识 Loader ：链式调用与其他特性
- Loader 编写
- 常见 Loader
- 插件定义解析
- 插件设计优势
- Loader 与插件的差异
- Webpack 学习方法推荐
什么是webpack
前端项目由什么构成？---资源
出现了很多工程化工具，某种程度上正是这些工具的出现，才有了“前端工程”这一概念。
使用Webpack
使用Webpack
核心流程
- 入口处理
- 从“entry”文件开始，启动编译流程
- 依赖解析
- 从“entry”文件开始，根据“require”“or”“import”等语句找到依赖资源
- 资源解析
- 根据“module”配置，调用资源转移器，将pnf,css等非标准JS资源转译为JS内容
- 资源合并并打包
- 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件
模块化+一致性
- 多个文件资源合并成一个，减少http请求数
- 支持模块化开发
- 支持高级JS特性
- 支持Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其他资源的处理模型
- Etc...
使用Webpack
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
使用Webpack---流程类配置
使用Webpack---配置总览
按使用频率：
- entry/output
- module/plugins
- mode
- watch/devServer/devtool
使用Webpack---处理CSS
使用Webpack---接入Babel
使用Webpack---生成HTML
使用Webpack---工具线
进阶篇：理解Loader
使用Loader
认识Loader：链式调用
认识Loader：其他特性
特点：
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
如何编写Loader
常见Loader
站在使用角度，建议掌握这些常见Loader的功能、配置方法
进阶篇：理解插件
总结
引用参考
字节青训营第十三节课Webpack知识体系
