docs: update plugin configuration API examples (#3639)

website/docs/en/plugins/dev/hooks.mdx

@@ -380,9 +380,7 @@ import RspackChain from '@en/shared/rspackChain.mdx';
 
 <RspackChain />
 
-`modifyBundlerChain` is used to call the rspack-chain to modify the Rspack configuration.
-
-This hook only supports modifying the configuration of the non-differentiated parts of Rspack and webpack. For example, modifying the devtool configuration option (Rspack and webpack have the same devtool property value type), or adding an [Rspack-compatible](https://rspack.dev/guide/compatibility/plugin) webpack plugin.
+`modifyBundlerChain` is used to call `rspack-chain` to modify the Rspack configuration. Its usage is the same as [tools.bundlerChain](/config/tools/bundler-chain).
 
 - **Type:**
 

website/docs/en/plugins/dev/index.mdx

@@ -253,67 +253,30 @@ Therefore, the best way to use configuration options is to
 - **Modify the config** with `api.modifyRsbuildConfig(config => {})`
 - Read `api.getNormalizedConfig()` as the **actual config used by the plugin** in the further lifetime.
 
-## Modifying Rspack Configuration
+## Modify Rspack Configuration
 
-The Rsbuild plugin can modify the configuration of Rspack in various ways.
+Rsbuild plugin allows you to modify the built-in Rspack configuration, including:
 
-- `api.modifyRspackConfig(config => {})` modifies the final Rspack configuration.
-- `api.modifyBundlerChain(chain => {})` modifies the `rspack-chain`, usage is similar to [rspack-chain](https://github.com/rspack-contrib/rspack-chain).
-- `api.onAfterCreateCompiler({ compiler } => {})` directly operates on the Rspack compiler instance.
+- [api.modifyRspackConfig](/plugins/dev/hooks#modifyrspackconfig): Modify the Rspack configuration object.
+- [api.modifyBundlerChain](/plugins/dev/hooks#modifybundlerchain): Modify the Rspack configuration through [rspack-chain](https://github.com/rspack-contrib/rspack-chain).
 
-## Example References
+### Example
 
-### Modifying Loader
-
-Loaders can read and process different types of file modules, refer to [loaders](https://rspack.dev/api/loader-api).
-
-```ts
-import type { RsbuildPlugin } from '@rsbuild/core';
-
-export const pluginTypeScriptExt = (): RsbuildPlugin => ({
-  name: 'plugin-typescript-ext',
-  setup(api) {
-    api.modifyBundlerChain(async (chain) => {
-      // Set ts-loader to recognize more files as typescript modules
-      chain.module.rule(CHAIN_ID.RULE.TS).test(/\.(?:ts|mts|cts|tsx|tss|tsm)$/);
-    });
-  },
-});
-```
-
-### Adding Module Entry
+For example, register [eslint-rspack-plugin](https://github.com/rspack-contrib/eslint-rspack-plugin) via Rsbuild plugin:
 
 ```ts
 import type { RsbuildPlugin } from '@rsbuild/core';
-
-export const pluginAdminPanel = (): RsbuildPlugin => ({
-  name: 'plugin-admin-panel',
-  setup(api) {
-    api.modifyBundlerChain(async (chain) => {
-      config.entry('admin-panel').add('src/admin/panel.js');
-    });
-  },
-});
-```
-
-### Registering Rspack Plugin
-
-You can register Rspack plugins within Rsbuild plugins, such as registering `eslint-webpack-plugin`:
-
-```ts
-import type { RsbuildPlugin } from '@rsbuild/core';
-import ESLintPlugin from 'eslint-webpack-plugin';
+import ESLintRspackPlugin from 'eslint-rspack-plugin';
 
 export const pluginEslint = (options?: Options): RsbuildPlugin => ({
   name: 'plugin-eslint',
   setup(api) {
-    // Use rspack-chain to register a bundler plugin.
-    api.modifyBundlerChain(async (chain) => {
-      chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [
-        {
+    api.modifyRspackConfig((config) => {
+      config.plugins?.push(
+        new ESLintRspackPlugin({
           // plugins options
-        },
-      ]);
+        }),
+      );
     });
   },
 });

website/docs/en/shared/rspackChain.mdx

@@ -1 +1 @@
-`rspack-chain` is a utility library for configuring Rspack. It provides a chaining API, making the configuration of Rspack more flexible. By using `rspack-chain`, you can more easily modify and extend Rspack configurations without directly manipulating the complex configuration object.
+[rspack-chain](https://github.com/rspack-contrib/rspack-chain) is a utility library for configuring Rspack. It provides a chaining API, making the configuration of Rspack more flexible. By using `rspack-chain`, you can more easily modify and extend Rspack configurations without directly manipulating the complex configuration object.

website/docs/zh/plugins/dev/hooks.mdx

@@ -376,7 +376,7 @@ import RspackChain from '@zh/shared/rspackChain.mdx';
 
 <RspackChain />
 
-`modifyBundlerChain` 用于调用 rspack-chain 来修改 Rspack 的配置。
+`modifyBundlerChain` 用于调用 rspack-chain 来修改 Rspack 的配置，它的用法与 [tools.bundlerChain](/config/tools/bundler-chain) 相同。
 
 - **类型：**
 

website/docs/zh/plugins/dev/index.mdx

@@ -254,65 +254,28 @@ type NormalizedConfig = {
 
 ## 修改 Rspack 配置
 
-Rsbuild 插件可以通过多种方式修改 Rspack 的配置项。
+Rsbuild 插件允许你修改内置的 Rspack 配置，包括：
 
-- `api.modifyRspackConfig(config => {})` 修改最终的 Rspack 配置。
-- `api.modifyBundlerChain(chain => {})` 修改 `rspack-chain`，用法与 [rspack-chain](https://github.com/rspack-contrib/rspack-chain) 相同。
-- `api.onAfterCreateCompiler({ compiler } => {})` 直接操作 Rspack 的 compiler 实例。
+- [api.modifyRspackConfig](/plugins/dev/hooks#modifyrspackconfig)：修改 Rspack 配置对象。
+- [api.modifyBundlerChain](/plugins/dev/hooks#modifybundlerchain) 通过 [rspack-chain](https://github.com/rspack-contrib/rspack-chain) 来修改 Rspack 配置。
 
-## 参考范例
+### 示例
 
-### 修改 Loader
-
-Loader 可以读取和处理不同类型的文件模块，具体参考 [loaders](https://rspack.dev/zh/api/loader-api)。
-
-```ts
-import type { RsbuildPlugin } from '@rsbuild/core';
-
-export const pluginTypeScriptExt = (): RsbuildPlugin => ({
-  name: 'plugin-typescript-ext',
-  setup(api) {
-    api.modifyBundlerChain(async (chain) => {
-      // 设置 ts-loader 将更多的文件识别为 typescript 模块
-      chain.module.rule(CHAIN_ID.RULE.TS).test(/\.(?:ts|mts|cts|tsx|tss|tsm)$/);
-    });
-  },
-});
-```
-
-### 添加模块入口
+比如，通过 Rsbuild 插件来注册 [eslint-rspack-plugin](https://github.com/rspack-contrib/eslint-rspack-plugin)：
 
 ```ts
 import type { RsbuildPlugin } from '@rsbuild/core';
-
-export const pluginAdminPanel = (): RsbuildPlugin => ({
-  name: 'plugin-admin-panel',
-  setup(api) {
-    api.modifyBundlerChain(async (chain) => {
-      config.entry('admin-panel').add('src/admin/panel.js');
-    });
-  },
-});
-```
-
-### 注册 Rspack 插件
-
-你可以在 Rsbuild 插件中注册 Rspack 插件，比如注册 `eslint-webpack-plugin`：
-
-```ts
-import type { RsbuildPlugin } from '@rsbuild/core';
-import ESLintPlugin from 'eslint-webpack-plugin';
+import ESLintRspackPlugin from 'eslint-rspack-plugin';
 
 export const pluginEslint = (options?: Options): RsbuildPlugin => ({
   name: 'plugin-eslint',
   setup(api) {
-    // Use rspack-chain to register a bundler plugin.
-    api.modifyBundlerChain(async (chain) => {
-      chain.plugin('eslint-webpack-plugin').use(ESLintPlugin, [
-        {
+    api.modifyRspackConfig((config) => {
+      config.plugins?.push(
+        new ESLintRspackPlugin({
           // plugins options
-        },
-      ]);
+        }),
+      );
     });
   },
 });

website/docs/zh/shared/rspackChain.mdx

@@ -1 +1 @@
-`rspack-chain` 是一个用于配置 Rspack 的工具库。它提供了链式 API，使得配置 Rspack 变得更加灵活。通过使用 `rspack-chain`，你可以更方便地修改和扩展 Rspack 配置，而不需要直接操作复杂的配置对象。
+[rspack-chain](https://github.com/rspack-contrib/rspack-chain) 是一个用于配置 Rspack 的工具库。它提供了链式 API，使得配置 Rspack 变得更加灵活。通过使用 `rspack-chain`，你可以更方便地修改和扩展 Rspack 配置，而不需要直接操作复杂的配置对象。