docs: 进一步优化文档

docs/.vuepress/configs/sidebar/en.ts

@@ -15,6 +15,7 @@ export const en: SidebarConfig = {
       text: '基础',
       children: [
         '/guide/directory-structure.md',
+        '/guide/builder.md',
         '/guide/config.md',
         '/guide/runtime-config.md',
         '/guide/env.md',

docs/.vuepress/configs/sidebar/zh.ts

@@ -15,6 +15,7 @@ export const zh: SidebarConfig = {
       text: '基础',
       children: [
         '/zh/guide/directory-structure.md',
+        '/zh/guide/builder.md',
         '/zh/guide/config.md',
         '/zh/guide/runtime-config.md',
         '/zh/guide/env.md',

docs/zh/guide/builder.md

@@ -0,0 +1,22 @@
+# 支持 Vite 和 Webpack 双构建
+
+`[email protected]` 版本支持 Vite 和 Webpack 两种构建方式，不再内置构建方式，需要开发者自行选择:
+
+-   选用 Vite 构建，安装 `npm i @fesjs/build-vite` 依赖即可。
+-   选用 Webpack 构建，安装 `npm i @fesjs/build-webpack` 依赖即可。
+
+## 使用差异
+
+由于 Fes.js 在 Vite 和 Webpack 上做了一层封装，开发者关心的构建配置不会太多。从使用上来说，主要存在以下几个差异点：
+
+### 配置
+
+Webpack 和 Vite 构建在配置方面有一些差异，具体可以查阅[配置](../reference/config)。
+
+### 静态文件处理
+
+由于 Vite 的限制，不支持 `require` 语法，具体 Vite 的用法可以查看[官网](https://cn.vitejs.dev/guide/assets.html)
+
+### html 模版
+
+Webpack 对于 html 模版是没有什么限制的，而 Vite 推荐模版文件就放在项目根目录下。Webpack 有个非常强大的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)，Fes.js 引入了[vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 进行能力的对齐，如果开发者想要个性化定制模版，那么在配置上还是存在差异的。

docs/zh/guide/config.md

@@ -1,96 +1,113 @@
-# 配置
+# 编译时配置
 
-Fes.js 约定 `.fes.js` 文件为项目编译需要配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。
+Fes.js 约定 `.fes.js` 文件为项目编译需要编译时配置文件，可以引入 node 端依赖项，不要引入浏览器端依赖项。
 
-
-一份常见的配置示例如下：
+一份常见的配置示例如下（更多配置项请查阅[配置](../reference/config))：
 
 ```js
-export default {
+import { defineBuildConfig } from '@fesjs/fes';
+
+export default defineBuildConfig({
     base: '/foo/',
     publicPath: '/',
     devServer: {
-        port: 8080
+        port: 8080,
     },
     mock: {
-        prefix: '/v2'
+        prefix: '/v2',
     },
     proxy: {
         '/v2': {
-            'target': 'https://api.douban.com/',
-            'changeOrigin': true, 
+            target: 'https://api.douban.com/',
+            changeOrigin: true,
         },
     },
     layout: {
-        title: "Fes.js",
+        title: 'Fes.js',
         footer: 'Created by MumbelFe',
         multiTabs: false,
-        menus: [{
-            name: 'index'
-        }, {
-            name: 'onepiece'
-        }, {
-            name: 'store'
-        }, {
-            name: 'simpleList'
-        }]
-    }
-}
+        menus: [
+            {
+                name: 'index',
+            },
+            {
+                name: 'onepiece',
+            },
+            {
+                name: 'store',
+            },
+            {
+                name: 'simpleList',
+            },
+        ],
+    },
+});
 ```
 
 ## 本地临时配置文件
+
 可以新建 `.fes.local.js` 作为本地临时配置文件。这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配置。
+
 ```js
 // .fes.js
 export default { mock: false };
 
 // .fes.local.js
-export default { 
+export default {
     mock: true,
     devServer: { port: 8080 }
 };
 ```
+
 最终的配置是：
+
 ```js
-{ 
+{
     mock: true,
     devServer: { port: 8080 }
 };
 ```
+
 ::: warning
-`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，务必不要提交到 `git` 仓库中。
+`.fes.local.js` 是本地验证使用的临时配置，仅在 `fes dev` 时有效，请将其添加到 `.gitignore`，不要提交到 `git` 仓库中。
 :::
 
 ## 多环境多份配置
+
 可以通过环境变量 `FES_ENV` 区分不同环境，来指定当前环境的配置文件，这份配置会和 `.fes.js` 做 `deep merge` 后形成最终配。
 
 比如配置如下：
+
 ```js
 // .fes.js
 export default { mock: false };
 
 // .fes.uat.js
-export default { 
+export default {
     mock: true,
     devServer: { port: 8080 }
 };
 ```
+
 当我们运行：
+
 ```bash
 FES_ENV=uat fes dev
 ```
+
 这时候会命中 `.fes.uat.js` 这份环境配置，最终配置是：
+
 ```js
-{ 
+{
     mock: true,
     devServer: { port: 8080 }
 };
 ```
 
 ## 优先级
 
-本地临时配置  >  环境配置  >  基础配置
+本地临时配置 > 环境配置 > 基础配置
 
 ::: tip
 如果多份配置中存在相同的配置项，**则优先级高的会覆盖优先级低的**。
-::: 
+:::