update docs

.vitepress/nav.ts

@@ -17,7 +17,7 @@ export const nav: DefaultTheme.NavItem[] = [
   //     { text: 'Vue', link: '/vue' },
   //   ],
   // },
-  // { text: '前端工程化', link: '/engineering' },
+  { text: '前端工程化', link: '/engineering' },
   { text: '浏览器原理', link: '/browser' },
   // { text: '前端框架', link: '/frameworks' },
   // { text: '前端工程化', link: '/engineering' },

.vitepress/sidebar.ts

@@ -42,10 +42,9 @@ export const sidebar: DefaultTheme.Sidebar = {
     {
       text: '工程化',
       items: [
-        {
-          text: 'Webpack',
-          link: '/engineering/webpack',
-        },
+        { text: 'Webpack', link: '/engineering/webpack' },
+        { text: 'Webpack Loader', link: '/engineering/webpack-loader' },
+        { text: 'Webpack 插件', link: '/engineering/webpack-plugin' },
       ],
     },
   ],

src/docs/engineering/vite.md

@@ -0,0 +1,9 @@
+---
+title: vite 原理
+---
+
+# vite 原理
+
+Vite 是一个基于浏览器原生 ESM 的构建工具，它省略了开发环境的打包过程，利用浏览器去解析 imports，在服务端按需编译返回。同时，在开发环境拥有速度快到惊人的模块热更新。
+
+Vite 的工作原理可以分为以下几个步骤：

src/docs/engineering/webpack-loader.md

@@ -0,0 +1,48 @@
+---
+title: webpack loader 详解
+---
+
+# webpack loader 详解
+
+## 什么是 loader
+
+loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件！
+
+loader 本质上是导出为函数的 JavaScript 模块。loader runner 会调用此函数，然后将上一个 loader 产生的结果或者资源文件传入进去。函数中的 this 作为上下文会被 webpack 填充，并且 loader runner 中包含一些实用的方法，比如可以使 loader 调用方式变为异步，或者获取 query 参数。
+
+## loader 的执行顺序
+
+1. 前置 Loader（pre loader）
+2. 普通 Loader（loader）
+3. 内联 Loader（inline loader）
+4. 后置 Loader（post loader）
+
+相同类型的 Loader，执行顺序是从右到左，从下到上。
+
+**使用方式：**
+
+1. 配置文件中配置：pre、normal、post
+2. 内联方式：在 import 语句中显示指定使用
+
+## loader 的类型
+
+1. 同步 Loader
+2. 异步 Loader
+3. Raw Loader
+4. Pitching Loader
+
+**同步 Loader**
+
+同步 loader 会在 webpack 构建时立即执行，并将处理后的结果返回给 webpack。同步 loader 的执行速度快，但可能会阻塞 webpack 构建进程。
+
+**异步 Loader**
+
+异步 loader 会在 webpack 构建时异步执行，并将处理后的结果通过 promise 返回给 webpack。异步 loader 的执行速度慢，但不会阻塞 webpack 构建进程。
+
+**Raw Loader**
+
+raw loader 不会对资源文件进行任何处理，而是将资源文件的内容原样返回给 webpack。raw loader 通常用于将资源文件作为模块导入。
+
+**Pitching Loader**
+
+pitching loader 会将处理后的结果传递给下一个 loader 之前，执行一些额外的逻辑。pitching loader 通常用于处理资源文件的依赖关系。

src/docs/engineering/webpack-plugin.md

@@ -0,0 +1,32 @@
+---
+title: webpack 插件
+---
+
+# webpack 插件
+
+插件是 webpack 的支柱功能。Webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上！
+
+插件目的在于解决 loader 无法实现的其他事。
+
+插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调，开发者可以在 webpack 构建流程中引入自定义的行为。创建插件比创建 loader 更加高级，因为你需要理解 webpack 底层的特性来处理相应的钩子，所以请做好阅读源码的准备！
+
+webpack5的插件是一个类，它继承自 webpack.Plugin 类。webpack.Plugin 类提供了一些钩子方法，插件可以通过这些钩子方法来执行自己的逻辑。
+
+webpack5 的插件原理可以概括为以下几个步骤：
+
+1. webpack 在构建阶段，会根据配置文件中的插件列表，创建插件实例
+2. webpack 会为每个插件实例调用 apply() 方法，并传入 compiler 对象作为参数
+3. 插件实例会在 apply() 方法中执行自己的逻辑
+4. webpack 会将插件实例的返回值作为钩子方法的参数
+
+插件可以通过钩子方法来执行自己的逻辑。
+
+**webpack5提供了以下钩子方法：**
+
+1. apply()：在插件实例创建后调用
+2. init()：在插件实例初始化后调用
+3. preCompile()：在编译模块之前调用
+4. compile()：在编译模块时调用
+5. postCompile()：在编译模块之后调用
+6. emit()：在打包文件之前调用
+7. normalModuleFactory()：在创建模块工厂时调用

src/docs/engineering/webpack.md

@@ -1,48 +1,72 @@
 ---
-title: webpack
+title: webpack 原理
 ---
 
-# webpack
+# webpack 原理
 
-webpack 的作用是将源代码编译（构建、打包）成最终代码。
+## 核心概念
 
-webpack 打包过程可以分为三步：
+1. Entry
+2. Output
+3. Loader
+4. Plugin
+5. Mode
 
-1. 初始化
-2. 编译
-3. 输出
+详情查看文档：https://webpack.js.org/concepts/
 
-## 初始化
+## 编译过程
 
-初始化时，webpack 会将 CLI 参数、配置文件、默认配置等进行合并，形成最终的配置对象。
+1. 初始化阶段
+2. 构建阶段
+   1. 创建模块
+   2. 依赖收集
+   3. 模块编译
+   4. chunk 分割
+3. 生成阶段
+4. 输出阶段
 
-## 编译
+### 一、初始化阶段
 
-**1. 创建 chunk**
+在初始化阶段，webpack 会根据用户的配置文件创建一个 compiler 对象。compiler 对象是 webpack 的核心，它负责整个打包过程的控制。
 
-chunk 是 webpack 内部构建过程中的一个概念，译为`块`，它表示通过某个入口找到的所有依赖的统称。
+### 二、构建阶段
 
-每个 chunk 都有至少两个属性：
+构建阶段是 webpack 打包流程中最重要的阶段。在构建阶段，webpack 会根据用户的配置文件，对源代码进行解析、编译、优化等处理，最终生成可执行的代码。
 
-1. name: 默认为 main
-2. id: 唯一编号，开发环境和 name 相同，生产环境为从 0 开始的数字
+构建阶段可以分为以下几个步骤：
 
-**2. 构建所有依赖模块**
+1. 创建模块
 
-![webpack](./webpack/webpack.png)
+在创建模块阶段，webpack 会根据入口文件的内容，创建一个个模块对象。模块对象包含了模块的名称、路径、依赖等信息。
 
-**3. 产生 chunk assets**
+2. 依赖收集
 
-在第二步完成后，chunk 中会产生一个模块列表，列表中包含了模块id和模块转换后的代码。
+在依赖收集阶段，webpack 会根据模块的依赖关系，将所有相关的模块都收集到一起。
 
-**4. 合并chunk assets**
+3. 模块编译
 
-将多个 chunk 的 assets 合并到一起，并产生一个总的 hash。
+在模块编译阶段，webpack 会根据用户配置的 loader，对每个模块进行编译。loader 可以对模块的代码进行转换、压缩、优化等处理。
 
-## 输出
+4. chunk 分割
 
-此步骤非常简单，webpack 将利用 node 中的 fs 模块（文件处理模块），根据编译产生的总的 assets，生成相应的文件。
+在 chunk 分割阶段，webpack 会根据模块的使用情况，将模块分割成多个 chunk。chunk 是 webpack 打包输出的最小单元。
 
-## 总过程
+### 三、生成阶段
 
-![webpack flow](./webpack/flow.png)
+在生成阶段，webpack 会根据 chunk 的类型，生成相应的输出文件。例如，js 文件会生成 js 文件，css 文件会生成 css 文件。
+
+### 四、输出阶段
+
+在输出阶段，webpack 会将生成的文件输出到指定的目录。
+
+### 什么是 Compiler ？
+
+Compiler 继承自 Tapable，是 Webpack 的整个生命周期管理，代表了完整的 Webpack 环境配置。
+
+每个 Webpack 的配置，对应一个 Compiler 对象，记录了 Webpack 的 options、loader 和 plugin 等信息，并且通过的 Hook 机制管理整个打包流程的生命周期。
+
+### 什么是 Compilation ？
+
+Compilation 也继承自 Tapable，代表了一次资源版本构建，包含了当前的模块资源、编译生成资源、变化的文 件、以及被跟踪依赖的状态信息。
+
+每次构建过程都会产生一次 Compilation，比如我们启动 watch 功能的时候，每当检测到一个文件变化，就会重新创建一个新的 Compilation，从而生成一组新的编译资源。