一、前语

为什么写该系列文章？

对我来言，主要有以下原因：

  • 个人成长：构建系统作为前端工程化中的重要一环，有必要进行全面的常识整理和查漏补缺，同时也是对我这几年作业的总结和复盘
  • 作业需求：我目前所处的团队是做CICD流程相关的，涉及到大量前端工程化相关的常识。自研平台上每天都有几百条流水线在运行，而我作为团队中的核心前端开发人员，经常被邀请帮助其他团队处理各种奇奇怪怪的构建过程中的报错问题
  • 目标需求：是的，你没有看错，为了能让女朋友轻松的糊弄面试官，我将其整理成了一个系列（因而，不要怕担心看不明白，我都把你们当我的女朋友来看待了，你还怕什么？不明白直接来喷我！！！我手牵手的教你！！！）

本系列由于常识系统太过于庞大，因而我将其分为三个部分：

  • Webpack常识系统
  • Rollup常识系统
  • Vite常识系统

该系统全体将以 70%原理 + 30%最佳实践 的方法来进行解说，保证每个阶段的人群都有不同的收成。

关于一些重难常识点的解说，我会对常识粒度进行拆解，尽量以图文的方法进行展示，便利咱们了解。

关于偏原理性文章，将采用结论先行、自顶向下的方法进行解说，注重实现思路，注重规划思维。

二、目录

此文作为这个系列的目录，会持续坚持更新。坚持一周一篇的更新速度，每周一早上发布。

标题 模块 内容 难度 发布时刻
从构建产物观察模块化原理 webpack 原理剖析 ⭐️⭐️ 2022.09.26
【Webpack】异步加载(懒加载)原理 webpack 原理剖析 ⭐️⭐️ 2022.10.10
前端工程化柱石——AST以及AST的广泛应用 公共 原理剖析 ⭐️⭐️⭐️ 2022.10.17
【万字长文｜兴趣图解】完全弄懂Webpack中的Loader机制 webpack 原理剖析 ⭐️⭐️⭐️ 2022.10.24
【Webpack Plugin】写了个插件跟喜欢的女生表白，结果… webpack 实践 ⭐️⭐️ 2022.10.31
【中级/高档前端】为什么我主张你一定要读一读 Tapable 源码？ webpack 原理剖析 ⭐️⭐️⭐️ 2022.11.10
线上崩了？一招教你快速定位问题！ 公共 实践 ⭐️ 2022.11.15
二十张图片完全讲明白Webpack规划理念，以看懂为意图 webpack 原理剖析 ⭐️⭐️⭐️⭐️ 2022.11.28
Webpack深度进阶：两张图完全讲明白热更新原理！ webpack 原理剖析 ⭐️⭐️⭐️⭐️ 2022.12.14

三、听说你学不动了？

扶我起来，我还能学！！！

抛开现有的这些东西，咱们仔细想一想，假如没有这些东西，咱们在上线前需求做哪些作业？

  • 处理模块化的问题，由于部分浏览器并不支持ES Module的方法，咱们需求将咱们的源代码转换成浏览器知道的格式
  • 处理CSS、JS代码的浏览器兼容性问题
  • 对HTML代码、CSS代码、JS代码、图片等资源进行紧缩
  • 对未运用的代码或运行不到的代码进行删除
  • 将较大的文件别离成多个较小的文件（代码切割）
  • 将较小的文件进行合并
  • 对 .jsx、.tsx、.vue、.less、.sass等文件进行解析，转换成浏览器能辨认的代码（loader解析）
  • 进行代码校验以及类型校验
  • 对第三方模块进行抽离
  • ……

不能想了不能想了，想想就头疼……

幸亏咱们日子在这个科技化时代，要不然每上一次线，就得累死一个前端。

正是有了这些构建东西，咱们才得以解放生产力呀。

因而，关于新技术，咱们更多的应该报以活跃的心态，信任它的诞生一定是为了处理一些问题而存在，而咱们正是东西的运用者。有人为咱们写出了更便利更快捷更好用的东西，何乐而不为呢？

四、读完本系列，你将收成什么？

  • 假如你是一个刚入行没多久的新人，你将学会一系列的最佳实践以及部分问题的通用企业级处理方案
  • 假如你跟我一样，已经是一个作业3-4年的 “老鸟”，你将学会构建系统中涉及到的一切源码实现与规划思维，帮助你完结中级开发到高档开发的跃升
  • 假如你已经是一个5年以上的老老鸟，在我这儿更多的是查漏补缺，完善本身的常识系统，在遇到相关的问题时，可以快速给出几种不同的处理方案
  • 假如你是以面试为意图的人群，能坚持跟着我将整个系列学完，信任在构建范畴你是可以轻松吊打一半以上的面试官
  • 假如你想练辟邪剑法，期望速成，我也会助你一臂之力（帮你自宫），专门整理出一篇面经文章
  • ……

总归，期望能让不同阶段的人群都有收成。

五、最后

构建相关的系列文章往往很简单烂尾，由于要花很大时刻研究和学习，笔者在写这个系列之前就足足准备了3-4个月。在这之间往往由于一个小问题想不通就会卡上好几天，但也正是由于这种死磕到底的精神，让我在这几个月对整个前端的知道提高到了一个新的高度。

因而，勇敢走出第一步，不要担心学不会看不明白。

该系列全体难度从易到难，从点状常识点出发，由点成面，最后将带领咱们整理出完整的构建流程。

让咱们一起参加 荣耀的进化吧