docs: improve Rspack / Rsbuild plugin guide (#2808)

Author: chenjiahan

apps/website-new/docs/en/guide/basic/rspack.mdx

@@ -1,7 +1,7 @@
 # Rspack Plugin
 
 :::info Note
-Requires Rspack version 0.5.0 or above
+Requires Rspack version 0.5.0 or above.
 :::
 
 - Capable of building modules that meet the `Module Federation` loading specifications.
@@ -29,15 +29,17 @@ import { PackageManagerTabs } from '@theme';
 
 ### Register the Plugin
 
-In `Rspack`, you can add the plugin through the `plugins` configuration item in the `rspack.config.js` file:
+#### Rsbuild
 
-```ts title='rspack.config.js'
+In [Rsbuild](https://rsbuild.dev/), you can add the plugin in the `rsbuild.config.ts` file:
+
+```ts title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
 
 export default defineConfig({
-  // publicPath must be configured if using manifest
   dev: {
+    // assetPrefix must be configured if using manifest
     assetPrefix: 'http://localhost:2000/',
   },
   output: {
@@ -48,23 +50,54 @@ export default defineConfig({
     port: 2000,
   },
   tools: {
-    rspack: (config, { appendPlugins }) => {
-      // You need to set a unique value that is not equal to other applications
-      config.output!.uniqueName = 'federation_provider';
-      appendPlugins([
+    rspack: {
+      output: {
+        // You need to set a unique value that is not equal to other applications
+        uniqueName: 'federation_provider',
+      },
+      plugins: [
         new ModuleFederationPlugin({
           name: 'federation_provider',
           exposes: {
             './button': './src/button.tsx',
           },
           shared: ['react', 'react-dom'],
         }),
-      ]);
-    },
+      ],
+    }
   },
 });
 ```
 
+#### Rspack
+
+In [Rspack](https://rspack.dev/), you can add the plugin in the `rspack.config.js` file:
+
+```ts title="rspack.config.js"
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
+
+module.exports = {
+  devServer: {
+    port: 2000,
+  },
+  output: {
+    // You need to set a unique value that is not equal to other applications
+    uniqueName: 'federation_provider',
+    // publicPath must be configured if using manifest
+    publicPath: 'http://localhost:2000/',
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'federation_provider',
+      exposes: {
+        './button': './src/button.tsx',
+      },
+      shared: ['react', 'react-dom'],
+    }),
+  ],
+};
+```
+
 ## Configure the Build Plugin
 
 - Type: `ModuleFederationPlugin(options: ModuleFederationOptions)`

apps/website-new/docs/en/guide/start/quick-start.mdx

@@ -88,36 +88,37 @@ export default function Button() {
 
 > Export the Button component through Module Federation
 
-```typescript
-// rsbuild.config.ts
+```typescript title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
 
 export default defineConfig({
+  plugins: [pluginReact()],
   server: {
     port: 3000,
   },
   dev: {
     // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
-    assetPrefix: 'http://localhost:3000',
+    assetPrefix: true,
   },
   tools: {
-    rspack: (config, { appendPlugins }) => {
-      // You need to set a unique value that is not equal to other applications
-      config.output!.uniqueName = 'federation_provider';
-      appendPlugins([
+    rspack: {
+      output: {
+        // You need to set a unique value that is not equal to other applications
+        uniqueName: 'federation_provider'
+      },
+      plugins: [
         new ModuleFederationPlugin({
           name: 'federation_provider',
           exposes: {
             './button': './src/button.tsx',
           },
           shared: ['react', 'react-dom'],
         }),
-      ]);
+      ],
     },
   },
-  plugins: [pluginReact()],
 });
 ```
 
@@ -217,19 +218,19 @@ bun add @module-federation/enhanced
 
 > Add Module Federation plugin to consume remote modules
 
-```typescript
-// rsbuild.config.ts
+```typescript title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
 
 export default defineConfig({
+  plugins: [pluginReact()],
   server: {
     port: 2000,
   },
   tools: {
-    rspack: (config, { appendPlugins }) => {
-      appendPlugins([
+    rspack: {
+      plugins: [
         new ModuleFederationPlugin({
           name: 'federation_consumer',
           remotes: {
@@ -238,10 +239,9 @@ export default defineConfig({
           },
           shared: ['react', 'react-dom'],
         }),
-      ]);
+      ],
     },
   },
-  plugins: [pluginReact()],
 });
 ```
 

apps/website-new/docs/zh/guide/basic/rspack.mdx

@@ -1,7 +1,7 @@
 # Rspack Plugin
 
 :::info 注意
-需要 Rspack 0.5.0 及以上版本
+需要 Rspack 0.5.0 及以上版本。
 :::
 
 - 能够构建出满足 `Module Federation` 加载规范的模块
@@ -29,16 +29,18 @@ import { PackageManagerTabs } from '@theme';
 
 ### 注册插件
 
-在 `Rspack` 中，你可以通过 `rspack.config.js` 配置文件中的 `plugins` 配置项来添加插件：
+#### Rsbuild
 
-```ts title='rspack.config.js'
+在 [Rsbuild](https://rsbuild.dev/) 中，你可以通过 `rsbuild.config.ts` 配置文件来添加插件：
+
+```ts title='rsbuild.config.js'
 import { defineConfig } from '@rsbuild/core';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
 
 export default defineConfig({
-  // 使用 manifest 必须要配置 publicPath
   dev: {
-    assetPrefix: 'http://localhost:2000/',
+    // 使用 manifest 必须要配置 assetPrefix
+    assetPrefix: true,
   },
   output: {
     // 这将影响生产环境中使用的产物路径前缀
@@ -48,23 +50,54 @@ export default defineConfig({
     port: 2000,
   },
   tools: {
-    rspack: (config, { appendPlugins }) => {
-      // 需要设置一个唯一值不能和其他应用相等
-      config.output!.uniqueName = 'federation_provider';
-      appendPlugins([
+    rspack: {
+      output: {
+        // 需要设置一个唯一值，不能和其他应用相等
+        uniqueName: 'federation_provider',
+      },
+      plugins: [
         new ModuleFederationPlugin({
           name: 'federation_provider',
           exposes: {
             './button': './src/button.tsx',
           },
           shared: ['react', 'react-dom'],
         }),
-      ]);
-    },
+      ],
+    }
   },
 });
 ```
 
+#### Rspack
+
+在 [Rspack](https://rspack.dev/) 中，你可以通过 `rspack.config.js` 配置文件来添加插件：
+
+```ts title="rspack.config.js"
+const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');
+
+module.exports = {
+  devServer: {
+    port: 2000,
+  },
+  output: {
+    // 需要设置一个唯一值，不能和其他应用相等
+    uniqueName: 'federation_provider',
+    // 使用 manifest 必须要配置 publicPath
+    publicPath: 'http://localhost:2000/',
+  },
+  plugins: [
+    new ModuleFederationPlugin({
+      name: 'federation_provider',
+      exposes: {
+        './button': './src/button.tsx',
+      },
+      shared: ['react', 'react-dom'],
+    }),
+  ],
+};
+```
+
 ## 配置构建插件
 
 - Type: `ModuleFederationPlugin(options: ModuleFederationOptions)`

apps/website-new/docs/zh/guide/start/quick-start.mdx

@@ -85,36 +85,37 @@ export default function Button() {
 
 > 通过 Module Federation 导出 Button 组件
 
-```typescript
-//rsbuild.config.ts
+```typescript title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
 
 export default defineConfig({
+  plugins: [pluginReact()],
   server: {
     port: 3000,
   },
   dev: {
     // 必须要配置 assetPrefix，在生产环境需要配置 output.assetPrefix
-    assetPrefix: 'http://localhost:3000',
+    assetPrefix: true,
   },
   tools: {
-    rspack: (config, { appendPlugins }) => {
-      // 需要设置一个唯一值不能和其他应用相等
-      config.output!.uniqueName = 'federation_provider';
-      appendPlugins([
+    rspack: {
+      output: {
+      // 需要设置一个唯一值，不能和其他应用相等
+        uniqueName: 'federation_provider'
+      },
+      plugins: [
         new ModuleFederationPlugin({
           name: 'federation_provider',
           exposes: {
             './button': './src/button.tsx',
           },
           shared: ['react', 'react-dom'],
         }),
-      ]);
+      ],
     },
   },
-  plugins: [pluginReact()],
 });
 ```
 
@@ -199,19 +200,19 @@ bun add @module-federation/enhanced
 
 > 增加 Module Federation 插件消费远程模块
 
-```typescript
-// rsbuild.config.ts
+```typescript title="rsbuild.config.ts"
 import { defineConfig } from '@rsbuild/core';
 import { pluginReact } from '@rsbuild/plugin-react';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
 
 export default defineConfig({
+  plugins: [pluginReact()],
   server: {
     port: 2000,
   },
   tools: {
-    rspack: (config, { appendPlugins }) => {
-      appendPlugins([
+    rspack: {
+      plugins: [
         new ModuleFederationPlugin({
           name: 'federation_consumer',
           remotes: {
@@ -220,10 +221,9 @@ export default defineConfig({
           },
           shared: ['react', 'react-dom'],
         }),
-      ]);
+      ],
     },
   },
-  plugins: [pluginReact()],
 });
 ```