这是我参与「第五届青训营」伴学笔记创作活动的第 13 天

一、Webpack定义解析

1. 为什么要学习Webpack

理解前端“工程化”概念、工具、目标
一个团队总要有那么几个人熟悉Webpack（提高个人核心竞争力）
高端前端必经之路

2. 什么是Webpack

前端项目由什么构成？

资源!

资源管理难题

Webpack之前，手动管理所用到的资源，

依赖手工，过程繁琐
代码文件有依赖时，要严格按顺序书写
开发与生产环境一致，难以接入JS或TS新特性
较难接入Less、Sass等工具
JS、图片、CSS资源管理模型不一致

为解决这些问题，出现了很多工程化工具，有了“前端工程”这一概念

Webpack 出现

Webpack，本质是一种前端资源编译、打包工具

多份资源文件打包成一个 Bundle
支持 Babel、Eslint、TS、CoffeScript、Less、Sass
支持模块化处理css、图片等资源文件
支持 HMR +开发服务器
支持持续监听、持续构建
支持代码分离
支持 Tree-shaking
支持 Sourcemap
...

二、Webpack使用方法

1. 使用Webpack —— 示例

安装
编辑配置文件
执行编译命令

2. 核心流程 —— 极度简化版

3. 模块化 + 一致性

image - 2023-02-17T182856.870.png

4. 使用Webpack

关于 Webpack的使用方法，基本都围绕"配置"展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or 若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项

image - 2023-02-17T183235.284.png

流程类配置

配置总览

按使用频率:
- `entry/output`
  - `module/plugins`
  - `mode`
  - `watch/devServer/devtooI`
Webpack配置官方文档：
- webpack.js.org/configurati…
  
  Webpack配置

image - 2023-02-17T184200.140.png

1.声明入口文件
2.声明产物出口`output`

image - 2023-02-17T184207.482.png

3.运行`npx webpack`

处理CSS

image - 2023-02-17T184527.537.png

image - 2023-02-17T184531.489.png

1.安装Loader
2.添加`module`处理css文件

Loader拓展问题:
Loader有什么作用？为什么这里需要用到css-loader、style-loader
与旧时代——在HTML文件中维护css相比，这种方式会有什么优劣处？
有没有接触过Less、Sass、Stylus这一类CSS预编译框架？如何在 Webpack接入这些工具？
参考资料：

接入Babel

image - 2023-02-17T185300.137.png

image - 2023-02-17T185305.186.png

1.安装依赖
2.声明产物出口`output`
3.执行`npx webpack`

Babel拓展思考：
Babel具体有什么功能?
Babel 与 Webpack 分别解决了什么问题？为何两者能协作到一起了?
- 参考资料：

生成HTML

image - 2023-02-17T185855.934.png

1.安装依赖
2.声明产物接口`output`
3.执行`npx webpack`

生成HTML拓展思考：

相比于手工维护HTML内容，这种自动生成的方式有什么优缺点？
参考资料：
- HtmlWebpackPlugin | webpack

工具线

image - 2023-02-17T134730.716-1676636513641-34.png

HMR

Hot Module Replacement —— 模块热替换
1.开启HMR
2.启动Webpack
参考资料：
- Webpack 原理系列十：HMR 原理全解析 (qq.com)
  
  Tree-Shaking
Tree-Shaking，树摇，用于删除Dead Code
Dead Code
- 代码没有被用到，不可到达
- 代码的执行结果不会被用到
- 代码只读不写
- ...
Tree-Shaking
- 模块导出了，但未被其他模块使用
开启Tree-Shaking
- `mode:"production"`
- `optimization.usedExports:true`
```
对工具类库如 Lodash 有奇效
```

其他工具

缓存
Sourcemap
性能监控
日志
代码压缩
分包
...
拓展：
- 除上面提到的内容，还有哪些配置可划分为”流程类"配置？
- 工具类配置具体有什么作用？包括`devtool/cache/stat`等
- 相关资料：

三、理解Loader

1. 问题：Webpack只认识JS

为了处理非标准S资源,设计出资源翻译模块 —— Loader用于将资源翻译为标准JS

2. 使用Loader

image - 2023-02-17T211647.028.png

image - 2023-02-17T211649.910.png

1.安装 Loader
2.添加`module`处理css文件

3. 认识Loader：其他特性

特点
- 链式执行
- 支持异步执行
- 分normal、pitch两种模式
参考资料：
- Webpack 原理系列七：如何编写loader (qq.com)

4. 如何编写Loader

image - 2023-02-17T212100.008.png

image - 2023-02-17T212103.553.png

参考资料
- 微信公众平台 (qq.com)

5. 常见Loader

站在使用角度，建议掌握这些常见Loader的功能、配置方法

6. Loader拓展

思考题
- Loader输入是什么?要求的输出是什么?
- Loader 的链式调用是什么意思?如何串联多个Loader?
- Loader 中如何处理异步场景?
参考资料：
- 微信公众平台 (qq.com)

四、理解插件

1. 插件是什么？为什么这么设计？

插件使用广泛

很多知名工具，如:
- VS Code、Web Storm、Chrome、Firefox
- Babel、Webpack、Rollup、Eslint
- Vue、Redux、Quill、Axios等等，都设计了所谓"插件"架构，为什么?

插件的妙处

这是一个特别复杂的过程,那么:
- 新人需要了解整个流程细节，上手成本高
- 功能迭代成本高，牵一发动全身
- 功能僵化，作为开源项目而言缺乏成长性
- Blabla
心智成本高 => 可维护性低 => 生命力弱
插件架构精髓：对扩展开放，对修改封闭

插件到处可见
甚至，Webpack本身的很多功能也是基于插件实现的
使用html-webpack-plugin
使用html-webpack-plugin + DefinePlugin

2.插件的开发

用起来很简单,但写起来…

首先:插件围绕`钩子`展开
钩子的核心信息:
1.时机:编译过程的特定节点,Webpack 会以钩子形式通知插件此刻正在发生什么事情;
2.上下文:通过tapable提供的回调机制，以参数方式传递上下文信息;
3.交互:在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变
时机:`compier.hooks.compilation`
参数:`compilation`等
交互:`dependencyFactories.set`

image - 2023-02-17T215223.273.png

拓展思考题：
- Loader 与插件有什么区同点?
- “钩子"有什么作用？如何监听钩子函数?
- 相关资料：
  - [源码解读] Webpack 插件架构深度讲解 (qq.com)
  - [万字总结] 一文吃透 Webpack 核心原理 (qq.com)

五、学习方法

Webpack知识体系

导图线上地址：
- GitMind
  
  Webpack的学习
01.入门应用
- 理解打包流程
- 熟练掌握常用配置项、Loader、插件的使用方法，能够灵活搭建集成
- Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境
- 掌握常见脚手架工具的用法，例如: Vue-cli、create-react-app、@angular/cli
02.进阶
- 理解 Loader、Plugin机制，能够自行开发Webpack组件
- 理解常见性能优化手段，并能用于解决实际问题
- 理解前端工程化概念与生态现状
03.大师级
- 阅读源码，理解 Webpack 编译、打包原理，甚至能够参与共建

六、总结

本节课学习了Webpack是什么、Webpack的使用方法、Webpack的拓展Loader和插件，了解到了Webpack对前端工作的强大作用和功能，今后应当多花时间来学习和熟悉Webpack，对前端工程化有更大的了解和掌握。

Webpack知识体系 | 青训营笔记