感谢

感谢字节青训营让我开阔了对前端知识的视野，通过一个月的学习，虽然只有短短的12节课，但是我却收获很多，也让我对前端有了更加全面的认识，感谢字节青训营。

前端知识串讲

让我认识了HTML（超文本标记语言），是用于创建网页结构的标记语言。它使用标签来定义网页的不同部分，如标题、段落、链接等。CSS（层叠样式表）：CSS用于定义网页的样式和布局。通过选择器和属性，可以将样式应用于HTML元素，包括颜色、字体、大小、布局和响应式设计等。JavaScript：JavaScript是一种用于在网页上添加交互性和动态效果的编程语言。它可以处理用户输入、操作网页元素、发送网络请求等。前端三件套是开启前端知识的基础，只有熟练掌握前端知识，才能灵活运用前端知识。

7.27到8.1的三节课让我对前端三件套有了更加深刻的了解，CSS布局是网页设计中非常重要的一部分，它决定了网页元素在页面上的位置和排列方式。而JavaScript脚本语言，解释性和动态的语言，基于原型的面向对象。

深入浅出Typescript

通过8.4的课程，我了解了Typescript，他是JavaScript的一个加强语言，对数据类型的加强，让业务逻辑更加严谨，TypeScript是一种开源的编程语言，它是JavaScript的一个超集，即所有的JavaScript代码都可以在TypeScript中运行。TypeScript通过添加静态类型、类和接口等新特性，使得JavaScript代码更易于维护和扩展。

响应式系统与React

8.14的课程让我对前端框架有了更加清晰的认识，无论是react还是vue，他们都有自己独特的魅力，以及各自适应业务的特点。React是一个流行的JavaScript库，用于构建用户界面。它基于组件化的思想，使得开发者可以将复杂的UI拆分成一系列独立、可重用的组件。React采用虚拟DOM和高效的渲染算法，能够最小化页面重绘，提高性能。而vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Webpack知识体系

1. 初始化阶段：
2. 1. 初始化参数：从配置文件、 配置对象、Shell 参数中读取，与默认配置结合得出最终的参数
   2. 创建编译器对象：用上一步得到的参数创建 Compiler 对象
   3. 初始化编译环境：包括注入内置插件、注册各种模块工厂、初始化 RuleSet 集合、加载配置的插件等
   4. 开始编译：执行 compiler 对象的 run 方法
   5. 确定入口：根据配置中的 entry 找出所有的入口文件，调用 compilition.addEntry 将入口文件转换为 dependence 对象
3. 构建阶段：
4. 1. 编译模块(make) ：根据 entry 对应的 dependence 创建 module 对象，调用 loader 将模块转译为标准 JS 内容，调用 JS 解释器将内容转换为 AST 对象，从中找出该模块依赖的模块，再 递归 本步骤直到所有入口依赖的文件都经过了本步骤的处理
   2. 完成模块编译：上一步递归处理所有能触达到的模块后，得到了每个模块被翻译后的内容以及它们之间的 依赖关系图
5. 生成阶段：

6. 1. 输出资源(seal) ：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会

   2. 写入文件系统(emitAssets) ：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统

单次构建过程自上而下按顺序执行，下面会展开聊聊细节，在此之前，对上述提及的各类技术名词不太熟悉的同学，可以先看看简介：

• Entry：编译入口，webpack 编译的起点
• Compiler：编译管理器，webpack 启动后会创建 compiler 对象，该对象一直存活知道结束退出
• Compilation：单次编辑过程的管理器，比如 watch = true 时，运行过程中只有一个 compiler 但每次文件变更触发重新编译时，都会创建一个新的 compilation 对象
• Dependence：依赖对象，webpack 基于该类型记录模块间依赖关系
• Module：webpack 内部所有资源都会以“module”对象形式存在，所有关于资源的操作、转译、合并都是以 “module” 为基本单位进行的
• Chunk：编译完成准备输出时，webpack 会将 module 按特定的规则组织成一个一个的 chunk，这些 chunk 某种程度上跟最终输出一一对应
• Loader：资源内容转换器，其实就是实现从内容 A 转换 B 的转换器
• Plugin：webpack构建过程中，会在特定的时机广播对应的事件，插件监听这些事件，在特定时间点介入编译过程