diff --git a/docs/note/Front-end Engineering.md b/docs/note/Front-end Engineering.md
index d0da8a25..dde647b1 100644
--- a/docs/note/Front-end Engineering.md	
+++ b/docs/note/Front-end Engineering.md	
@@ -1091,3 +1091,58 @@ pnpm store path # 获取到硬链接store的路径
 pnpm store prune # prune修剪 从store中删除当前未被引用的包 以释放store的空间
 ```
 
+## 系统学习Webpack
+
+- 认识webpack工具
+- webpack基本打包
+- webpack配置文件
+- 编写和打包CSS文件
+- 编写Less文件
+- PostCSS工具处理CSS
+
+ ### Node内置模块 path
+
+- path模块用于对路径和文件进行处理
+- 在不同系统上，文件路径的分隔符是不同的
+  - MacOS和Linux的分隔符是`/`
+  - Windows上的分隔符是`\` `\\` 目前也支持 `/`
+
+可以通过Node的path模块来抹平不同平台的差异
+
+常用API
+
+- `path.extname` 后缀名
+
+- `path.basename` 文件名
+
+- `path.dirname` 文件夹名
+
+- `path.join` 拼接多个路径
+  - 下例中，由于`p2`通过`../`指定了上一级路径，所以从`abc`紧接着就是`why`了
+
+
+```js
+const path = require('path')
+const p1 = 'abc/cba'
+const p2 = '../why/kobe/james.txt'
+console.log(path.join(p1, p2)) // \\abc\\why\\kobe\\james.txt
+```
+
+- `path.resolve` 将多个路径片段解析、拼接为一个绝对路径
+  - **从右往左**处理传入的路径序列，每个路径依次被解析，直到构造完成一个绝对路径
+  - 如果在处理完所有给定path的段之后，还没有生成绝对路径，则使用当前工作目录
+  - 生成的路径被规范化并删除尾部斜杠，零长度path段被忽略
+  - 如果没有传递path段，则`path.resolve()`将返回当前工作目录的绝对路径
+
+### 初识Webpack
+
+path模块在webpack的使用中有较大作用，所以预先介绍了一下，下面正式进入Webpack的学习
+
+- Webpack能够帮助我们进行模块化开发
+- 高级特性提升开发效率和代码安全性、可维护性，如 ES6+ TypeScript SASS Less 等都需要构建工具
+- 实时文件监听（开发热更新）、代码压缩合并等
+
+
+
+
+
diff --git a/docs/note/JavaScriptEnhanced.md b/docs/note/JavaScriptEnhanced.md
index 963b36e1..d6b8eb83 100644
--- a/docs/note/JavaScriptEnhanced.md
+++ b/docs/note/JavaScriptEnhanced.md
@@ -2447,9 +2447,39 @@ Promise.race(promises)
 
 ## 迭代器与生成器
 
-### 异步处理
+- 迭代器 可迭代对象
+- 原生的迭代器对象
+- 自定义类的迭代器
+- 生成器的理解和作用
+- 自定义生成器方案
+- 异步处理方案解析
 
-#### 请求代码结构
+### 什么是迭代器
+
+迭代器是帮助我们对某个数据结构进行遍历的对象，不同语言对迭代器都有不同的实现
+
+在JavaScript中，迭代器是一个具体的对象，这个对象需要符合迭代器协议（literator protocol）
+
+- 迭代器协议产生了一系列值（无论是有限个还是无限个）的标准方式
+- 在JavaScript中这个标准就是一个特定的`next`方法
+
+这个`next()`方法有如下要求：
+
+- 一个没有参数或者一个参数的函数，返回一个对象，此对象拥有两个属性：
+  - `done` 布尔值 代表当前迭代是否完成
+    - 如果迭代器可以产生序列中下一个值，则`done = false`（等价于没有指定`done`这个属性）
+    - 如果迭代器已将序列迭代完毕，则`done = true`，这种情况下`value`是可选的，如果它依然存在，即为迭代结束之后的默认返回值
+  - `value`
+    - 迭代器返回的任何JavaScript值，其`done`值为`true`时可以省略
+
+案例：
+
+```js
+```
+
+
+
+### 异步处理
 
 假设有如下场景：请求3的数据依赖请求2，请求2的数据依赖请求1，这样会存在嵌套的问题
 
@@ -2529,6 +2559,8 @@ async function getData() {
 getData()
 ```
 
+
+
 ## let与const
 
 - `let`与`var`都用于声明变量
diff --git a/docs/note/SSR.md b/docs/note/SSR.md
index 8c9d21c2..682545cb 100644
--- a/docs/note/SSR.md
+++ b/docs/note/SSR.md
@@ -29,7 +29,7 @@
 
 => 浏览器加载JS文件 => 绑定DOM事件 客户端渲染接管界面 => 再次跳转路由就是客户端渲染 无需请求后台
 
-## SPA的优点与缺点
+### SPA的优点与缺点
 
 - SPA的优点
   - 只需要加载一次 更好的用户体验
@@ -40,7 +40,7 @@
   - 首屏加载资源过大，影响首屏渲染速度
   - 不利于复杂项目构建
 
-## SEO优化
+### SEO优化
 
 - 语义性HTML标记
   - 标题用 `h1`，一个页面只应当由一个 `h1` 标签，副标题用 `h2 - h6`
@@ -109,14 +109,14 @@
   - 只能生成偏静态的页面，不利于与用户的交互，所有用户获取到的页面都是相同的
 - 哪些应用场景：文档站、个人博客、新闻站点等
 
-## SSR与SSG的优势
+### SSR与SSG的优势
 
 - 更短的首屏时间
   - 只需要请求一个HTML文件就能展示出页面
   - 虽然在服务端仍然需要调取相关接口，但是服务器-服务器之间的通信远比客户端快，有时甚至是同一台服务器的本地接口
   - 不再需要大量的js文件请求，这就使得SSR/SSG可以拥有更短的首屏时间
 
-## 跨请求状态污染
+### 跨请求状态污染
 
 - 在SPA中，整个生命周期只有一个App对象实例/一个Router对象实例/一个Store对象实例
 
@@ -137,3 +137,64 @@
   - 在每个请求中，为整个应用创建一个**全新的实例**，包括后面的Router和Store等实例
   - 带来的缺点就是：需要消耗更多的服务器资源
 
+## Nuxt3 系统学习
+
+- 邂逅Nuxt3
+- Nuxt3 初体验
+- Nuxt3 全局配置
+- Nuxt3 内置组件
+- Nuxt3 样式和资源
+- Nuxt3 页面和导航
+- Nuxt3 动态路由
+
+### 认识Nuxt3
+
+- 支持数据双向绑定和组件化：Vue.js
+- 处理客户端导航：Vue Router
+- 支持开发中热模块替换、生产环境代码打包：Webpack5 Vite
+- 兼容旧版浏览器，支持ES6+语法转译：ESBuild
+- 支持开发环境服务器，支持服务端渲染/API接口转发
+- 使用`h3`实现部署**可移植性**（`h3`是一个极小的高性能http框架）
+  - 如：支持在Serverless、Worker、Node.js环境中运行
+
+### 搭建Nuxt3环境
+
+使用命令行工具 `Nuxi` 初始化Nuxt：
+
+- `npx nuxi init project-name`
+- `pnpm dlx nuxi init project-name`
+- `npm install -g nuxi && nuxi init project-name`
+
+解读脚手架创建的初始化项目的`package.json`中的脚本：
+
+```json
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "nuxt": "^3.2.0"
+  }
+}
+```
+
+- `build` 构建正式版本，将被输出到`.output`文件夹
+- `dev` 开发环境
+- `generate` 打包正式版本项目，但是会预渲染每个路由（`nuxt build --prerender`）
+- `preview` 对打包项目启动本地预览服务器
+- `postinstall` 该脚本为NPM的生命周期函数，将在`npm install`后执行
+
+针对`postinstall`中执行的`nuxi prepare`脚本，官方文档有如下解释：
+
+> The `prepare` command creates a `.nuxt` directory in your application and generates types. This can be useful in a CI environment or as a `postinstall` command in your `package.json`.
+
+执行该脚本后，将在项目根目录创建`.nuxt`文件夹
+
+- 这个文件夹将作为默认构建输出的文件夹
+- 其中的文件都以`.d.ts`结尾，是Nuxt的TS类型声明
+