2021-03-16

5个Webpack核心知识点整理

1. 核心概念

entry：入口。webpack是基于模块的，使用webpack首先需要指定模块解析入口(entry)，webpack从入口开始根据模块间依赖关系递归解析和处理所有资源文件。

output：输出。源代码经过webpack处理之后的最终产物。

loader：模块转换器。本质就是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。因为 Webpack 只认识 JavaScript，所以 Loader 就成了翻译官，对其他类型的资源进行转译的预处理工作。

plugin：扩展插件。基于事件流框架 Tapable，插件可以扩展 Webpack 的功能，在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

module：模块。除了js范畴内的es module、commonJs、AMD等，css @import、url(…)、图片、字体等在webpack中都被视为模块。

2. 标题打包流程

初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；

初始化编译：用上一步得到的参数初始化 Compiler 对象，注册插件并传入 Compiler 实例（挂载了众多webpack事件api供插件调用）；

AST & 依赖图：从入口文件（entry）出发，调用AST引擎(acorn)生成抽象语法树AST，根据AST构建模块的所有依赖；

递归编译模块：调用所有配置的 Loader 对模块进行编译；

输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；

输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统；

3. Loader

loader就像一个翻译官，将源文件经过转换后生成目标文件并交由下一流程处理

每个loader职责都是单一的，就像流水线上的工人

顺序很关键（从右往左）

实现准则

简单【Simple】loader只做单一任务，多个loader > 一个多功能loader

链式【Chaining】遵循链式调用原则

无状态【Stateless】即函数式里的Pure Function，无副作用

使用工具库【Loader Utilities】充分利用 loader-utils 包