[真 ✺ webpack原理] [总览] 快速了解流程, 慢慢深入细节.
因为工作需求我接触了一些webpack的内容, 从而引发了好奇心, 自己看了一些webpack源码.
所以把自己对webpack的了解整理一下, 分享给大家.
学习webpack原理的收益
可以解决真实业务问题: 公司业务项目有一些规模的时候, 对打包脚本一定有特殊要求的.
可以通过写webpack插件解决大多数问题. webpack的插件是和内部原理紧密结合的, 可以说真的会写webpack插件的人是很少的, 并且光看文档是学不会的.
最后一点是出于兴趣, 其实我22年都在给公司写vite的插件, 我是支持vite的, 但还忍不住来看webpack, 可见过程是有趣, 快乐的.
快速获得对webpack的掌控感
我们只要知道2步: 知道webpack做了什么. 和知道webpack做到这些分几个步骤.
webpack做了什么
正如webpack文档首页的图片一样, 其实webpack做的事很简单:
把src下我们写的代码, 处理成另外一些文件, 输出到dist文件夹.
那么为什么要处理呢?
- 浏览器不支持一个js文件引入另一个js文件. (虽然97%的浏览器支持esm了, 但很多正在用的三方包还是umd输出的)
- 代码需要压缩.
- 一些代码浏览器大概率永远不会认识. 比如ts, jsx, vue.
- 工程化配合公司特殊业务做处理.
那如何做到呢?
webpack处理我们的代码, 分成以下步骤:
- 读取入口文件.
- 发现入口文件引入了哪些文件, 并读取.
- 读取了需要的文件, 并建立了关联.
- 根据配置处理文件.
- 根据处理后的文件和他们之间的关系, 产生最终输出的文件.
- 把文件写到目标文件夹里.
到这里, webpack的流程已经说完了.
慢慢, 分层深入细节.
相信对webpack比较了解的读者, 会提出上面的描述少了很多细节, 很多名词.
这个我们会一层一层深入.
webpack执行的时候会整理webpack配置, 并用配置创建compiler. compiler运行的时候会创建compilation, 一次compilation就会把上面所说的步骤都处理完.
(那为什么要用compiler呢? 因为还要配合其他功能比如dev-server, 但不是主要流程)
了解完make, seal, emit做的事, 源文件到最后输出是怎么变化的. 就有了大致了解.
在make, seal, emit的阶段有大量hooks, 是webpack插件的主战场. 通过深入了解compilation阶段, 可以发掘webpack很大的可能性.
实际上, module federation, tree shaking, scope hoisting, lazy loading等等功能, 都是通过插件完成的. 了解插件后我们能做的事非常多.
通过例子, 加深了解
相信看到compilation的三个阶段详解后, 大多数人都是懵圈的.
但只要知道个大概, 我们就可以通过很多例子来加深了解知识. 看着例子, 再回去翻看流程, 对流程的了解就越来越深了.
比如:
另外, 在工作中还遇到一些真实需求, 比如
写在最后
现在目前还打算会深入以下内容:
- loader深入.
- resolver深入.
- hmr.
感谢你的关注, 我们一起学习, 期望与你讨论.