这是我参与「第四届青训营 」笔记创作活动的的第12天
为什么学习 Webpack？
- 理解前端“工程化”概念、工具、目标
- 一个团队总要有那么几个人熟悉 Webpack ，某种程度上可以称为个人的核心竞争力
- 高阶前端的必经之路
01. 什么是 Webpack
数据中有大量的文件资源，手工管理起来太过于繁琐，容易出现问题，对开发的效率影响巨大。于是出现了许多工具：
但是在过去 13、14 年的时候，会个 Gulp、Require.js 已经很厉害，Webpack 普遍不太看好，因为太复杂了。
Webpack 本质上是一种前端资源编译、打包工具。
02. 使用 Webpack
示例
- 安装
2. 编辑配置文件
3. 执行编译命令
极度简化版
模块化 + 一致性
使用 Webpack
关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
流程类配置
配置总览
处理 CSS
CSS Loader
Webpack 原理系列七：如何编写loader
style-loader | webpack
接入 Babel
思考题：
- Babel 具体有什么功能？
- Babel 与 Webpack 分别解决了什么问题？为何二者能协作到一起？
参考资料：
babel-loader
Babel 官网)
@babel/preset-env
@babel/preset-react
@babel/preset-typescript
生成 HTML
思考题：
相比于手工维护 HTML 内容，这种自动生成的方式有什么优缺点？
参考资料：
HtmlWebpackPlugin | webpack
工具线
HMR
Hot Module Replacement —— 模块热替换
Webpack 原理系列十：HMR 原理全解析 (qq.com)
Tree - Shaking
Tree - Shaking —— 树摇，用于删除 Dead Code
思考题：
- 除上面提到的内容，还有那些配置可以划分“流程类”配置？
- 工具类配置具体有什么作用？包括
devtool/cache/stat等
D&A 环节
Tecvan-fe/awesome-webpack-4plus (github.com)
深入浅出 Webpack
Preface (survivejs.com)
03. 进阶篇：理解 Loader
问题：Webpack 只认识 JS
使用 Loader
认识 Loader：链式调用
- lee-loader：实现 less => css 的转换
- css-loader：将 CSS 包装成类似 module.exports = "￥{css}" 的内容，包装后的内容符合 JavaScript 语法
- style-loader：将 CSS 模块包进 require 语句，并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签
这里打开示例8，进入 debugger 模式，看看各个 loader 的处理结果
认识 Loader：其他特性
特点：
- 链式执行
- 支持异步执行
- 分 normal、pitch 两种模式
如何编写 Loader
常见 Loader
站在使用角度，建议掌握这些常见 Loader 的功能、配置方法
理解插件
思考题：
- Loader 输入是什么？要求的输出是什么？
- Loader 的链式调用是什么意思？如何串联多个 Loader ？
- Loader 种如何处理异步场景？
参考文件：
Webpack 原理系列七：如何编写loader
04. 进阶篇：理解插件
插件是什么？为什么这么设计？
很多知名工具，如：
- VS Code、Web Storm、Chrome 、 Firefox
- Babel、 Webpack、 Rollup、 Eslint
- Vue、 Redux、 Quill、 Axios
等等，都设计了所谓“插件”架构，为什么？
Webpack 本身的很多功能也是基于插件实现的
理解插件
插件的功能非常强大，甚至可以改变 Webpack 的输出结构
这里侧重讲 钩子 的作用，重在：在编译的某个环节触发钩子，某种程度上可以理解为 —— 事件
思考题：
- Loader 与插件有什么共同点？
- “钩子”有什么作用？如何监听钩子函数？
参考：
[源码解读] Webpack 插件架构深度讲解
[万字总结] 一文吃透 Webpack 核心原理
小结
Webpack 5 知识体系 - GitMind
我们前面学了：
- Webpack 的作用
- 理解 Webpack 配置结构，学习关键配置项
- Loader 的作用与常用的 Loader
- 插件基本形态与作用
