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 包