构建Webpack知识体系 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第14天

为什么要学习Webpack

• 理解前端“工程化”概念、工具、目标
• 一个团队总要有那么几个人熟悉Webpack，某种程度上成为个人的核心竞争力
• 高阶前端必经之路

为什么要Webpack

前端项目由什么构成

• html
• js
• css
• ts
• vue
• jsx
• png、jpg、svg......

当然我们可以手动管理这些资源，例如

但是会产生一些问题

• 依赖手工操作，过程繁琐
• 当代码文件之间有依赖关系时，就得严格按照书写顺序
• 开发与生产环境没差，难以接入TS或JS的新特性
• 难以接入sass、less等工具
• js、图片、css等资源管理模型不一致

因此出现了很多工程化工具，才有了”前端工程化“的概念

什么是webpack

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

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

如何使用Webpack

示例

1. 安装

2. 编辑配置文件

3. 执行编译命令

核心流程

1. 入口处理

   • 从‘entry’开始，启动编译流程

2. 依赖解析

   • 从’entry‘文件开始，根据’require‘或者’import‘等语句找到资源依赖

3. 资源解析

   • 根据’module‘配置，调用资源转换器将png、css等非标准js资源转译为JS内容

4. 递归调用2和3知道左右资源处理完毕

5. 资源合并打包

   • 将转译完成的资源内容合并并打包为可运行的JS文件

模块化+一致性

1. 多个文件资源合并成一个，减少http请求
2. 支持模块化开发
3. 支持高级的JS特性
4. 支持TS、CS方言
5. 统一图片、css、图片等其他资源的处理模型
6. ETC
7. ......

配置总览

关于Webpack的使用方法，基本都围绕”配置“展开，其中配置大致可划分为两类

• 流程类：作用于流程中某个或者若干个环节直接影响打包效果的配置项目
• 工具类：主流程外，提供更多工程化的能力的配置项

流程类

处理CSS

接入Babel（js代码转译）

生成HTML

工具类

HMR（热更新）

Tree-Shaking（删除 Dead Code）

进阶：理解Loader

Webpack无法理解非JS语言，因此需要loader处理非标准JS资源，设计出资源翻译模块、

链式调用

编写Loader

常用Loader

进阶：理解插件

这是一个非常复杂的过程，会产生一些问题

• 新人需要了解整个流程细节，上手成本高
• 功能迭代成本高。牵一发动全身
• 功能僵化，作为开源项目而言缺乏成长性
• ······

插件的精髓就在于：对扩展开放，对修改封闭

然而，用起来简单，写起来难

• 首先插件围绕”钩子“展开

• 钩子的核心信息：

  0. 时机：编译过程的特定节点，Webpack会以钩子形式通知插件此刻正在发生什么事情
  1. 上下文：通过tapable提供的回调机制，以参数方式传递上下文信息；
  2. 交互：在上下文参数对象中附带了很多存在side effect的交互接口，插件可以通过这些接口改变

学习方法

1. 入门应用

   • 理解打包流程
   • 熟练掌握常用配置项、loader、插件的使用方法，能够灵活搭建集成Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的Webpack环境
   • 掌握常见脚手架工具的用法，例如：Vue-cli、create-react-app、@angualr/cli

2. 进阶

   • 理解Loader、Plugin机制，能够自行开发Webpack 组件
   • 理解常见性能优化手段，并能用于解决实际问题
   • 理解前端工程化概念与生态现状

3. 大师

   • 阅读源码，理解Webpack编译、打包原理，甚至能够参与与共建

知识点

总结

现代的前端开发工程师，对于webpack的学习不是进行时就是未来时，但是对于介绍各种api的教程，有一个学习的体系更加重要，这节课的最重要的意义便浓缩在学习体系上。