docs: improve virtual-modules-plugin documentation (#11467)

Author: chenjiahan

website/components/i18n/en.json

@@ -16,7 +16,7 @@
   "moment-locales-webpack-plugin-desc": "Support for this plugin was implemented in v0.7.0, please upgrade the Rspack version to use it",
   "resolve-plugin-un-support-desc": "`resolve.plugins` option not supported",
   "progress-plugin-desc": "Use [webpackbar](https://www.npmjs.com/package/webpackbar) instead",
-  "webpack-virtual-modules-desc": "Use [rspack-plugin-virtual-module](https://github.com/rspack-contrib/rspack-plugins/tree/main/packages/plugin-virtual-module) instead",
+  "webpack-virtual-modules-desc": "Use [VirtualModulesPlugin](/plugins/rspack/virtual-modules-plugin) instead",
   "webpack-manifest-plugin-desc": "Use [rspack-manifest-plugin](https://github.com/rspack-contrib/rspack-manifest-plugin) instead",
   "workbox-webpack-plugin-desc": "Use [@aaroon/workbox-rspack-plugin](https://github.com/Clarkkkk/workbox-rspack-plugin) instead",
   "webpack-subresource-integrity-desc": "Use [SubresourceIntegrityPlugin](/plugins/rspack/subresource-integrity-plugin) instead",

website/components/i18n/zh.json

@@ -16,7 +16,7 @@
   "image-minimizer-webpack-plugin-desc": "仅支持 [loader](https://www.npmjs.com/package/image-minimizer-webpack-plugin#standalone-loader) 用法",
   "resolve-plugin-un-support-desc": "不支持 `resolve.plugins`",
   "progress-plugin-desc": "使用 [webpackbar](https://www.npmjs.com/package/webpackbar) 替代",
-  "webpack-virtual-modules-desc": "使用 [rspack-plugin-virtual-module](https://github.com/rspack-contrib/rspack-plugins/tree/main/packages/plugin-virtual-module) 替代",
+  "webpack-virtual-modules-desc": "使用 [VirtualModulesPlugin](/plugins/rspack/virtual-modules-plugin) 替代",
   "webpack-manifest-plugin-desc": "使用 [rspack-manifest-plugin](https://github.com/rspack-contrib/rspack-manifest-plugin) 替代",
   "workbox-webpack-plugin-desc": "使用 [@aaroon/workbox-rspack-plugin](https://github.com/Clarkkkk/workbox-rspack-plugin) 替代",
   "webpack-subresource-integrity-desc": "使用 [SubresourceIntegrityPlugin](/zh/plugins/rspack/subresource-integrity-plugin) 替代",

website/docs/en/plugins/index.mdx

@@ -16,12 +16,12 @@ Including:
 
 - [CircularDependencyRspackPlugin](/plugins/rspack/circular-dependency-rspack-plugin)
 - [CopyRspackPlugin](/plugins/rspack/copy-rspack-plugin)
+- [CssChunkingPlugin](/plugins/rspack/css-chunking-plugin)
 - [CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin)
 - [HtmlRspackPlugin](/plugins/rspack/html-rspack-plugin)
 - [LightningCssMinimizerRspackPlugin](/plugins/rspack/lightning-css-minimizer-rspack-plugin)
 - [SubresourceIntegrityPlugin](/plugins/rspack/subresource-integrity-plugin)
 - [SwcJsMinimizerRspackPlugin](/plugins/rspack/swc-js-minimizer-rspack-plugin)
-- [CssChunkingPlugin](/plugins/rspack/css-chunking-plugin)
 - [VirtualModulesPlugin](/plugins/rspack/virtual-modules-plugin)
 
 ## Compatible plugins from the webpack ecosystem

website/docs/en/plugins/rspack/virtual-modules-plugin.mdx

@@ -2,28 +2,33 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
 
 # VirtualModulesPlugin
 
-<ApiMeta specific={['Rspack']} />
+<ApiMeta specific={['Rspack']} addedVersion="1.5.0" />
 
-The `rspack.experiments.VirtualModulesPlugin` is a Rust port of the [`webpack-virtual-modules`](https://github.com/sysgears/webpack-virtual-modules) plugin. It's deeply integrated with Rspack to deliver the same functionality with enhanced performance.
+`VirtualModulesPlugin` allows you to create, modify, and delete files in memory, and Rspack treats these virtual files as if they were real files existing in the file system.
+
+This plugin is a Rust implementation of [webpack-virtual-modules](https://github.com/sysgears/webpack-virtual-modules), deeply integrated with Rspack to provide equivalent functionality with better performance.
 
 ## Usage
 
 ### Basic usage
 
-You can pass virtual modules to the constructor when creating a new VirtualModulesPlugin instance:
+When creating a `VirtualModulesPlugin` instance, you can directly configure virtual modules in the constructor:
 
 ```ts
-new rspack.experiments.VirtualModulesPlugin(modules?: Record<string, string>)
-```
+import { rspack } from '@rspack/core';
 
-**Parameters:**
+new rspack.experiments.VirtualModulesPlugin({
+  // ...modules
+});
+```
 
-- `modules` (optional): An object where keys are file paths and values are file contents.
+- **Parameters:**
+  - `modules` (optional): An object where keys are file paths and values are file contents.
 
-```js title="rspack.config.js"
-const rspack = require('@rspack/core');
+```js title="rspack.config.mjs"
+import { rspack } from '@rspack/core';
 
-module.exports = {
+export default {
   plugins: [
     new rspack.experiments.VirtualModulesPlugin({
       'src/generated/config.js': 'export default { version: "1.0.0" };',
@@ -40,27 +45,30 @@ module.exports = {
 
 You can dynamically create or modify virtual modules using the `writeModule` method:
 
+- **Type:**
+
 ```ts
-writeModule(filePath: string, contents: string): void
+function writeModule(filePath: string, contents: string): void;
 ```
 
-**Parameters:**
+- **Parameters:**
+  - `filePath`: The virtual file path relative to [compiler.context](/api/javascript-api/compiler#context)
+  - `contents`: The content of the virtual file
 
-- `filePath`: The virtual file path relative to `compiler.context`
-- `contents`: The content of the virtual file
+- **Example:**
 
-```js title="rspack.config.js"
-const rspack = require('@rspack/core');
+```js title="rspack.config.mjs"
+import { rspack } from '@rspack/core';
 
 const virtualModulesPlugin = new rspack.experiments.VirtualModulesPlugin();
 
-module.exports = {
+export default {
   plugins: [
     virtualModulesPlugin,
     {
       apply(compiler) {
         compiler.hooks.beforeCompile.tap('MyPlugin', () => {
-          // Dynamically create modules
+          // Dynamically create virtual modules
           const moduleContent = generateSomeContent();
           virtualModulesPlugin.writeModule('src/dynamic.js', moduleContent);
         });

website/docs/zh/plugins/index.mdx

@@ -16,12 +16,12 @@ Rspack 结合自身实现特点，提供了一些独有的插件，替代对应
 
 - [CircularDependencyRspackPlugin](/plugins/rspack/circular-dependency-rspack-plugin)
 - [CopyRspackPlugin](/plugins/rspack/copy-rspack-plugin)
+- [CssChunkingPlugin](/plugins/rspack/css-chunking-plugin)
 - [CssExtractRspackPlugin](/plugins/rspack/css-extract-rspack-plugin)
 - [HtmlRspackPlugin](/plugins/rspack/html-rspack-plugin)
 - [LightningCssMinimizerRspackPlugin](/plugins/rspack/lightning-css-minimizer-rspack-plugin)
 - [SubresourceIntegrityPlugin](/plugins/rspack/subresource-integrity-plugin)
 - [SwcJsMinimizerRspackPlugin](/plugins/rspack/swc-js-minimizer-rspack-plugin)
-- [CssChunkingPlugin](/plugins/rspack/css-chunking-plugin)
 - [VirtualModulesPlugin](/plugins/rspack/virtual-modules-plugin)
 
 ## 兼容的 webpack 生态插件

website/docs/zh/plugins/rspack/virtual-modules-plugin.mdx

@@ -2,28 +2,33 @@ import { ApiMeta } from '@components/ApiMeta.tsx';
 
 # VirtualModulesPlugin
 
-<ApiMeta specific={['Rspack']} />
+<ApiMeta specific={['Rspack']} addedVersion="1.5.0" />
 
-`rspack.experiments.VirtualModulesPlugin` 是 Rust 实现的 [`webpack-virtual-modules`](https://github.com/sysgears/webpack-virtual-modules) 插件，它与 Rspack 深度集成，在提供相同功能的同时拥有更好的性能。
+`VirtualModulesPlugin` 允许你在内存中创建、修改和删除文件，Rspack 会将这些虚拟文件视为真实存在于文件系统中的文件进行处理。
+
+该插件是 [webpack-virtual-modules](https://github.com/sysgears/webpack-virtual-modules) 的 Rust 实现版本，与 Rspack 深度集成，在提供相同功能的同时拥有更好的性能。
 
 ## 使用方法
 
 ### 基础用法
 
-创建一个新的 VirtualModulesPlugin 实例，可以在构造函数中传入虚拟模块：
+创建 `VirtualModulesPlugin` 实例时，可以在构造函数中直接配置虚拟模块：
 
 ```ts
-new rspack.experiments.VirtualModulesPlugin(modules?: Record<string, string>)
-```
+import { rspack } from '@rspack/core';
 
-**参数：**
+new rspack.experiments.VirtualModulesPlugin({
+  // ...modules
+});
+```
 
-- `modules`（可选）：一个对象，其中键是文件路径，值是文件内容。
+- **参数：**
+  - `modules`（可选）：一个对象，其中键是文件路径，值是文件内容。
 
-```js title="rspack.config.js"
-const rspack = require('@rspack/core');
+```js title="rspack.config.mjs"
+import { rspack } from '@rspack/core';
 
-module.exports = {
+export default {
   plugins: [
     new rspack.experiments.VirtualModulesPlugin({
       'src/generated/config.js': 'export default { version: "1.0.0" };',
@@ -40,21 +45,24 @@ module.exports = {
 
 你可以使用 `writeModule` 方法动态创建或修改虚拟模块：
 
+- **类型：**
+
 ```ts
-writeModule(filePath: string, contents: string): void
+function writeModule(filePath: string, contents: string): void;
 ```
 
-**参数：**
+- **参数：**
+  - `filePath`：相对于 [compiler.context](/api/javascript-api/compiler#context) 的虚拟文件路径
+  - `contents`：虚拟文件的内容
 
-- `filePath`：相对于 `compiler.context` 的虚拟文件路径
-- `contents`：虚拟文件的内容
+- **示例：**
 
-```js title="rspack.config.js"
-const rspack = require('@rspack/core');
+```js title="rspack.config.mjs"
+import { rspack } from '@rspack/core';
 
 const virtualModulesPlugin = new rspack.experiments.VirtualModulesPlugin();
 
-module.exports = {
+export default {
   plugins: [
     virtualModulesPlugin,
     {