关于前端:从零到亿系统性的建立前端构建知识体系✨开篇

一、前言

为什么写该系列文章？

对我来言，次要有以下起因：

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

本系列因为常识零碎太过于宏大，因而我将其分为三个局部：

• Webpack 常识体系
• Rollup 常识体系
• Vite 常识体系

该体系总体将以 70% 原理 + 30% 最佳实际 的形式来进行解说，确保每个阶段的人群都有不同的播种。

对于一些重难知识点的解说，我会对 常识粒度进行拆解，尽量以图文的形式进行展现，不便大家了解。

对于偏原理性文章，将采纳 论断后行、自顶向下 的形式进行解说，重视实现思路，重视设计思维。

二、目录

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

三、据说你学不动了？

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

抛开现有的这些工具，咱们认真想一想，如果没有这些工具，咱们在上线前须要做哪些事件？

• 解决模块化的问题，因为局部浏览器并不反对 ES Module 的形式，咱们须要将咱们的源代码转换成浏览器意识的格局
• 解决 CSS、JS 代码的浏览器兼容性问题
• 对 HTML 代码、CSS 代码、JS 代码、图片等资源进行压缩
• 对未应用的代码或运行不到的代码进行删除
• 将较大的文件拆散成多个较小的文件（代码宰割）
• 将较小的文件进行合并
• 对 .jsx、.tsx、.vue、.less、.sass 等文件进行解析，转换成浏览器能辨认的代码（loader 解析）
• 进行代码校验以及类型校验
• 对第三方模块进行抽离
• ……

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

幸好咱们生存在这个科技化时代，要不然每上一次线，就得累死一个前端😭😭😭。

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

因而，对于新技术，咱们更多的应该报以踊跃的心态，置信它的诞生肯定是为了解决一些问题而存在，而咱们正是工具的使用者。有人为咱们写出了更不便更快捷更好用的工具，何乐而不为呢？

四、读完本系列，你将播种什么？

• 如果你是一个刚入行没多久的新人，你将学会 一系列的最佳实际以及局部问题的通用企业级解决方案
• 如果你跟我一样，曾经是一个工作 3 - 4 年的“老鸟”，你将学会 构建体系中波及到的所有源码实现与设计思维，帮忙你实现中级开发到高级开发的跃升
• 如果你曾经是一个 5 年以上的老老鸟，在我这里 更多的是查漏补缺，欠缺本身的常识体系，在遇到相干的问题时，可能疾速给出几种不同的解决方案
• 如果你是以面试为目标的人群，能保持跟着我将整个系列学完，置信 在构建畛域你是可能轻松吊打一半以上的面试官
• 如果你想练辟邪剑法，心愿速成，我也会助你一臂之力（帮你自宫），专门整顿出一篇面经文章
• ……

总之，心愿能让不同阶段的人群都有播种。

五、最初

构建相干的系列文章往往很容易烂尾，因为要花很大工夫钻研和学习，笔者在写这个系列之前就足足筹备了 3 - 4 个月。在这之间往往因为一个小问题想不通就会卡上好几天，但也正是因为这种死磕到底的精力，让我在这几个月对整个前端的意识晋升到了一个新的高度。

因而，怯懦走出第一步，不要放心学不会看不懂。

该系列 整体难度从易到难，从点状知识点登程，由点成面，最初将率领大家梳理出残缺的构建流程。

让咱们一起退出 光彩的进化吧 📣📣📣