[webpack由浅入深]系列的内容
- 第一层: 了解一个小功能的完整流程. 看完可以满足好奇心和应付原理级别面试.
- 第二层: 源码陪读, webpack源码比较灵活, 自己看容易陷入迷惑. 文章里会贴出关键流程的代码来辅助阅读源码. 如果你正在自己调试, 在这些方法上下断点会节约你宝贵的时间.
因为每次是以小功能出发, 所以文章系列会有前后依赖, 有兴趣的可以关注这个系列.
学习webpack原理的收益
可以解决真实业务问题: 公司业务项目有一些规模的时候, 对打包脚本一定有特殊要求的.
可以通过写webpack插件解决大多数问题. webpack的插件是和内部原理紧密结合的, 可以说真的会写webpack插件的人是很少的, 并且光看文档是学不会的.
更好的使用webpack三方插件: 我真实经历: 使用svgr插件, 遇到了webpack5 asset module的问题. 因为是公司打包脚本, 一定要确定配置的正确性才可以改动. 这个时候就非常需要真正理解自己在做什么, 会不会和其他插件产生关联, 而不是网上抄了一个配置. 然后如果出了问题查不到方案焦头烂额.
最后一点是出于兴趣, 其实我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, 但不是主要流程)
那么compilation做了那么多事情, 所以可以继续深入compilation看看第二层: compilation流程: make, seal, emit.
了解完make, seal, emit做的事, 源文件到最后输出是怎么变化的. 就有了大致了解.
在make, seal, emit的阶段有大量hooks, 是webpack插件的主战场. 通过深入了解compilation阶段, 可以发掘webpack很大的可能性.
实际上, module federation, tree shaking, scope hoisting, lazy loading等等功能, 都是通过插件完成的. 了解插件后我们能做的事非常多.
通过例子, 加深了解
相信看到compilation的三个阶段详解后, 大多数人都是懵圈的.
但只要知道个大概, 我们就可以通过很多例子来加深了解知识. 看着例子, 再回去翻看流程, 对流程的了解就越来越深了.
比如:
另外, 在工作中还遇到一些真实需求, 比如
然后对于emit阶段不了解的话, 可以查看webpack打包结果来理解.
写在最后
这个系列, 我是还会继续更新深入内容的. 现在已经更新了tapable相关的介绍, dev-server基本流程.
现在目前还打算会深入以下内容:
- loader深入.
- resolver深入.
- hmr.
感谢你的关注, 我们一起学习, 期望与你讨论.
