docs: 更新rspack适配文档

renzp94 · renzp94 · commit 158dcd915140 · 2024-05-30T10:57:36.000+08:00
diff --git a/docs/pages/configs.md b/docs/pages/configs.md
@@ -79,7 +79,7 @@ export interface RzpackAssets {
 }
 ```
 
-配置资源文件处理方式
+配置资源文件处理方式。
 
 ### jsxTools
 
@@ -95,6 +95,8 @@ export enum JSX_TOOLS {
 
 `jsx`文件编译处理器。
 
+> 注意：如果使用`rspack`打包，则`jsxTools`将默认为`JSX_TOOLS.SWC`且无法更改。
+
 ### imageMini
 
 - 类型：`boolean`
@@ -114,7 +116,9 @@ export enum JSX_TOOLS {
 - 类型：`boolean`
 - 默认 ：`true`
 
-是否使用webpack5缓存。
+是否使用持久化缓存。
+
+> 注意：rspack目前不支持本地缓存，所以使用rspack打包时cache仅支持开发环境。
 
 ## entry 入口
 
@@ -136,6 +140,8 @@ export enum JSX_TOOLS {
 
 htmlPlugin插件设置。配置参考: [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)。
 
+`rspack`参考: [html-rspack-plugin](https://www.rspack.dev/zh/plugins/rspack/html-rspack-plugin)。
+
 ## output 输出
 
 - 类型：`Output`
@@ -154,7 +160,10 @@ htmlPlugin插件设置。配置参考: [html-webpack-plugin](https://github.com/
 
 - 类型：`WebpackDevServerConfiguration`
 
-开发服务器配置，当开启可视化配置时此处配置的接口代理无效。配置参考：[dev-server](https://webpack.js.org/configuration/dev-server/)
+开发服务器配置，当开启可视化配置时此处配置的接口代理无效。配置参考：[dev-server](https://webpack.js.org/configuration/dev-server/)。
+
+`rspack`参考: [dev-server](https://www.rspack.dev/zh/config/dev-server)。
+
 
 ## lazyCompilation 懒编译
 
@@ -185,23 +194,25 @@ export interface ModuleFederationPluginOptions {
   // 要共享的依赖
   shared?: ModuleFederationShared[] | ModuleFederationSharedAuto
   // 模块暴露的内容
-  exposes?: boolean | Record<string, string>
+  exposes?: Exposes
   // 模块引入的内容
-  remotes?: Record<string, string>
+  remotes?: Remotes
 }
 ```
 
 模块联邦。
 
-## webpackChain 自定义配置
+## rzpackChain 自定义配置
 
-- 类型：`RzpackWebpackChain`
+- 类型：`RzpackChain`
 
 ```ts
-export type RzpackWebpackChain = (w: WebpackChain) => WebpackChain
+export type RzpackChain = (w: WebpackChain) => WebpackChain
 ```
 
-使用webpackChain重写webpack配置。webpackChain用法参考：[webpackChain](https://github.com/neutrinojs/webpack-chain?tab=readme-ov-file)
+使用webpackChain重写webpack/rspack配置。webpackChain用法参考：[webpackChain](https://github.com/neutrinojs/webpack-chain?tab=readme-ov-file)。
+
+> 注意：因为webpackChain是webpack相关的包，rspack和webpack有细微差距，如果链式调用上属性报错，可直接使用`.set`设置。
 
 ## proxyFile
 
diff --git a/docs/pages/features.md b/docs/pages/features.md
@@ -2,11 +2,20 @@
 
 ## 模块热更新
 
-Rzpack使用的Webpack，所以使用的是`webpack-dev-server`的热更新。React的热更新使用的是`@pmmmwh/react-refresh-webpack-plugin`插件实现的。React的热更新默认是不开启的，如果需要开启可指定`reactRefresh: true`开启。
+
+### webpack
+
+使用的是`webpack-dev-server`的热更新。React的热更新使用的是`@pmmmwh/react-refresh-webpack-plugin`插件实现的。React的热更新默认是不开启的，如果需要开启可指定`reactRefresh: true`开启。
+
+### rspack
+
+使用的是`@rspack/dev-server`的热更新。具体参考配置[dev-server](https://www.rspack.dev/zh/config/dev-server#devserverhot)。
 
 ## Typescript
 
-Rzpack默认支持`.ts`和`.tsx`文件。默认使用的打包工具是`esbuild`，也可通过`assets.jsxTools`指定使用`swc`或者`esbuild`。
+### webpack
+
+Rzpack默认支持`.ts`和`.tsx`文件。`webpack`默认使用的打包工具是`esbuild`，也可通过`assets.jsxTools`指定使用`swc`或者`esbuild`。
 
 ```ts
 export enum JSX_TOOLS {
@@ -15,6 +24,10 @@ export enum JSX_TOOLS {
 }
 ```
 
+### rspack
+
+使用内置的`swc`打包工具。
+
 ## Css
 
 导入`.css`文件将会把内容开发环境插入到`<style>`标签中生产环境打包成文件，同时也带有`HMR`支持。
@@ -48,7 +61,7 @@ document.getElementById('btn-primary').className = classes.buttonPrimary
 
 ### Css预处理器
 
-默认支持`less`。如果需要使用其他预处理器，可以通过`webpackChain`属性自行配置webpack配置。
+默认支持`less`。如果需要使用其他预处理器，可以通过`rzpackChain`属性自行配置`webpack`/`rspack`配置。
 
 ### Css Scoped
 
@@ -81,11 +94,16 @@ JSON 可以被直接导入 —— 同样支持具名导入
 
 可通过设置`cache`开启webpack5的缓存，以及通过`lazyCompilation`开启懒编译。
 
+> 注意：cache目前因为`rspack`进支持内存缓存，暂无法支持本地缓存，等`rspack`支持了，会第一时间支持。
+
 ## 性能优化
 
 可设置`gzip`开启GZIP压缩，以及`moduleFederation`配置模块联邦，`million`使用Million.js进行React性能优化。
 
 ## 接口代理
 
-可通过`server`配置`webpack-dev-server`的接口代理。也可通过`proxyFile`配置可视化管理接口代理的json文件。注意：当开启可视化配置时，不再需要在`server`中指定接口代理。
+
+### webpack
+
+可通过`server`配置`webpack-dev-server`或`@rspack/dev-server`的接口代理。也可通过`proxyFile`配置可视化管理接口代理的json文件。注意：当开启可视化配置时，不再需要在`server`中指定接口代理。
 
diff --git a/docs/pages/guide/cli.md b/docs/pages/guide/cli.md
@@ -14,17 +14,12 @@ rzpack [root]
 
 #### 选项
 
-| 属性           | 说明                | 类型                | 默认                 |
-| -------------- | ------------------- | ------------------- | -------------------- |
-| --c            | 指定配置文件        | `string`            | `./vigour.config.ts` |
-| --config       | 指定配置文件        | `string`            | `./vigour.config.ts` |
-| --m            | 指定webpack启动模式 | `string`            | `development`        |
-| --mode         | 指定webpack启动模式 | `string`            | `development`        |
-| --host [host]  | 指定主机名称        | `string`            | -                    |
-| --host [host]  | 指定主机名称        | `string`            | -                    |
-| --port [port]  | 指定端口            | `string`            | -                    |
-| --open [path]  | 启动时打开浏览器    | `boolean \| string` | -                    |
-| --ui [boolean] | 是否启动可视化配置  | `boolean`           | `true`               |
+| 属性   | 说明               | 类型                | 默认   |
+| ------ | ------------------ | ------------------- | ------ |
+| --host | 指定主机名称       | `string`            | -      |
+| --port | 指定端口           | `string`            | -      |
+| --open | 启动时打开浏览器   | `boolean \| string` | -      |
+| --ui   | 是否启动可视化配置 | `boolean`           | `true` |
 
 ## 构建
 
@@ -40,16 +35,12 @@ rzpack build [root]
 
 #### 选项
 
-| 属性                    | 说明                       | 类型      | 默认                 | 版本  |
-| ----------------------- | -------------------------- | --------- | -------------------- | ----- |
-| --c                     | 指定配置文件               | `string`  | `./vigour.config.ts` | 0.2.x |
-| --config                | 指定配置文件               | `string`  | `./vigour.config.ts` | 0.2.x |
-| --m                     | 指定webpack启动模式        | `string`  | `development`        | 0.2.x |
-| --mode                  | 指定webpack启动模式        | `string`  | `development`        | 0.2.x |
-| --outDir [dir]          | 输出目录                   | `string`  | `dist`               | 0.2.x |
-| --bundle-size [boolean] | 分析打包资源大小           | `boolean` | -                    | 0.2.x |
-| --bundle-time [boolean] | 分析打包时长(rspack不支持) | `boolean` | -                    | 0.2.x |
-| --doctor [boolean]      | 可视化构建分析工具         | `boolean` | -                    | 0.3   |
+| 属性          | 说明                       | 类型      | 默认   | 版本  |
+| ------------- | -------------------------- | --------- | ------ | ----- |
+| --outDir      | 输出目录                   | `string`  | `dist` | 0.2.x |
+| --bundle-size | 分析打包资源大小           | `boolean` | -      | 0.2.x |
+| --bundle-time | 分析打包时长(rspack不支持) | `boolean` | -      | 0.2.x |
+| --doctor      | 可视化构建分析工具         | `boolean` | -      | 0.3   |
 
 ## 预览
 
@@ -63,10 +54,20 @@ rzpack preview
 
 #### 选项
 
-| 属性           | 说明                | 类型     | 默认                 |
-| -------------- | ------------------- | -------- | -------------------- |
-| --c            | 指定配置文件        | `string` | `./vigour.config.ts` |
-| --config       | 指定配置文件        | `string` | `./vigour.config.ts` |
-| --m            | 指定webpack启动模式 | `string` | `development`        |
-| --mode         | 指定webpack启动模式 | `string` | `development`        |
-| --outDir [dir] | 输出目录            | `string` | `dist`               |
+| 属性           | 说明     | 类型     | 默认   |
+| -------------- | -------- | -------- | ------ |
+| --outDir [dir] | 输出目录 | `string` | `dist` |
+
+
+## dev/build/preview共同选项
+
+| 属性      | 说明                | 类型     | 默认                 |
+| --------- | ------------------- | -------- | -------------------- |
+| --h       | 帮助文档            |          |                      |
+| --help    | 帮助文档            |          |                      |
+| --v       | 版本号              |          |                      |
+| --version | 版本号              |          |                      |
+| --c       | 指定配置文件        | `string` | `./vigour.config.ts` |
+| --config  | 指定配置文件        | `string` | `./vigour.config.ts` |
+| --m       | 指定webpack启动模式 | `string` | `development`        |
+| --mode    | 指定webpack启动模式 | `string` | `development`        |
diff --git a/docs/pages/guide/getting-started.md b/docs/pages/guide/getting-started.md
@@ -31,7 +31,7 @@ $ bun create rzpack
 ## 模板
 
 你还可以通过附加的命令行选项直接指定项目名称和模板，例如：创建一个基础的Ts模板：
-```shell
+```sh
 # npm
 npm create rzpack rzpack-app --template react-ts
 
diff --git a/docs/pages/problems.md b/docs/pages/problems.md
@@ -100,9 +100,9 @@ App run at:
  To create a production build, run yarn build.
 ```
 
-## webpack配置
+### webpack配置
 
-如果想通过webpack参数配置，可通过配置文件的`server`属性配置，配置方法参考[devServer.proxy](https://webpack.docschina.org/configuration/dev-server/#devserverproxy)
+如果想通过webpack/rspack参数配置，可通过配置文件的`server`属性配置，配置方法参考[server](/configs.html#server-开发服务)
 
 ```ts
 import { defineConfig } from 'rzpack'
@@ -118,6 +118,10 @@ export default defineConfig({
 
 > Tips: 注意，可视化的优先级高于webpack配置，即：如果开启可视化配置，则webpack配置的代理无效
 
+## 自定义配置
+
+如果想通过webpack/rspack配置，可通过配置文件的`rzpackChain`属性配置，配置方法参考[rzpackChain](/configs.html#rzpackchain-自定义配置)
+
 ## 提速开发环境
 
 默认使用`esbuild`打包，同时默认开启了`Webpack5`的`cache`功能。如果还不满意的话，可以开启`webpack5`的`lazyCompilation(懒编译)`：`lazyCompilation: { imports: true, entries: false }`。懒编译参考文档: [experiments.lazyCompilation](https://webpack.docschina.org/configuration/experiments/#experimentslazycompilation)，特别注意：懒编译只能在开发环境中启用，生产环境即使配置了也是禁用的。
