feat: add docs about rspack

Author: Mister-Hope

.vscode/settings.json

@@ -33,6 +33,7 @@
     "prefetch",
     "preload",
     "prismjs",
+    "rspack",
     "shiki",
     "shikiji",
     "slugify",

docs/.vuepress/config.ts

@@ -1,6 +1,7 @@
 import { createRequire } from 'node:module'
 import process from 'node:process'
 
+import { rspackBundler } from '@vuepress/bundler-rspack'
 import { viteBundler } from '@vuepress/bundler-vite'
 import { webpackBundler } from '@vuepress/bundler-webpack'
 import { docsearchPlugin } from '@vuepress/plugin-docsearch'
@@ -22,6 +23,9 @@ import {
 const __dirname = getDirname(import.meta.url)
 const require = createRequire(import.meta.url)
 const isProd = process.env.NODE_ENV === 'production'
+const isWebpackOrRspack =
+  process.env.DOCS_BUNDLER === 'webpack' ||
+  process.env.DOCS_BUNDLER === 'rspack'
 
 export default defineUserConfig({
   // set site base to default value
@@ -46,7 +50,11 @@ export default defineUserConfig({
 
   // specify bundler via environment variable
   bundler:
-    process.env.DOCS_BUNDLER === 'webpack' ? webpackBundler() : viteBundler(),
+    process.env.DOCS_BUNDLER === 'webpack'
+      ? webpackBundler()
+      : process.env.DOCS_BUNDLER === 'rspack'
+        ? rspackBundler()
+        : viteBundler(),
 
   // configure default theme
   theme: defaultTheme({
@@ -117,6 +125,13 @@ export default defineUserConfig({
 
   // configure markdown
   markdown: {
+    ...(isWebpackOrRspack
+      ? {
+          assets: {
+            absolutePathPrependBase: true,
+          },
+        }
+      : {}),
     importCode: {
       handleImportPath: (importPath) => {
         // handle @vuepress packages import path

docs/.vuepress/configs/navbar/en.ts

@@ -45,6 +45,7 @@ export const navbarEn: NavbarOptions = [
         children: [
           '/reference/bundler/vite.md',
           '/reference/bundler/webpack.md',
+          '/reference/bundler/rspack.md',
         ],
       },
       {

docs/.vuepress/configs/navbar/zh.ts

@@ -42,6 +42,7 @@ export const navbarZh: NavbarOptions = [
         children: [
           '/zh/reference/bundler/vite.md',
           '/zh/reference/bundler/webpack.md',
+          '/zh/reference/bundler/rspack.md',
         ],
       },
       {

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

@@ -60,7 +60,11 @@ export const sidebarEn: SidebarOptions = {
     },
     {
       text: 'Bundlers',
-      children: ['/reference/bundler/vite.md', '/reference/bundler/webpack.md'],
+      children: [
+        '/reference/bundler/vite.md',
+        '/reference/bundler/webpack.md',
+        '/reference/bundler/rspack.md',
+      ],
     },
     {
       text: 'Ecosystem',

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

@@ -63,6 +63,7 @@ export const sidebarZh: SidebarOptions = {
       children: [
         '/zh/reference/bundler/vite.md',
         '/zh/reference/bundler/webpack.md',
+        '/zh/reference/bundler/rspack.md',
       ],
     },
     {

docs/README.md

@@ -28,7 +28,7 @@ features:
     details: Flexible plugin API, allowing plugins to provide lots of plug-and-play features for your site.
 
   - title: Bundlers
-    details: Recommended bundler is Vite, while Webpack is also supported. Choose the one you like!
+    details: Recommended bundler is Vite, while Webpack and Rspack are also supported. Choose the one you like!
 
 footer: MIT Licensed | Copyright © 2018-present VuePress Community
 ---

docs/guide/assets.md

@@ -65,7 +65,7 @@ In most cases, you don't need to worry about the reference path of those public
 ```
 
 ::: tip
-When using [webpack bundler](../reference/bundler/webpack.md), you need to set [markdown.assets.absolutePathPrependBase](../reference/config.md#markdown-assets) to `true` to automatically prepend base to markdown images.
+When using [webpack bundler](../reference/bundler/webpack.md) or [rspack bundler](../reference/bundler/rspack.md), you need to set [markdown.assets.absolutePathPrependBase](../reference/config.md#markdown-assets) to `true` to automatically prepend base to markdown images.
 :::
 
 However, sometimes you may have some dynamical links referencing public files, especially when you are authoring a custom theme. In such case, the `base` could not be handled automatically. To help with that, VuePress provides a [withBase](../reference/client-api.md#withbase) helper to prepend `base` for you:

docs/guide/bundler.md

@@ -1,6 +1,6 @@
 # Bundler
 
-VuePress supports using [Webpack](https://webpack.js.org/) or [Vite](https://vite.dev/) to dev and build sites. You can choose which bundler to use according to your preference, and no extra configuration is required.
+VuePress supports using [Vite](https://vite.dev/), [Webpack](https://webpack.js.org/), or [Rspack](https://rspack.dev/) to dev and build sites. You can choose which bundler to use according to your preference, and no extra configuration is required.
 
 ## Install a Bundler
 
@@ -15,6 +15,8 @@ When installing the [vuepress](https://www.npmjs.com/package/vuepress) package,
 pnpm add -D vuepress@next @vuepress/bundler-vite@next
 # install webpack bundler
 pnpm add -D vuepress@next @vuepress/bundler-webpack@next
+# install rspack bundler
+pnpm add -D vuepress@next @vuepress/bundler-rspack@next
 ```
 
 @tab yarn
@@ -24,6 +26,8 @@ pnpm add -D vuepress@next @vuepress/bundler-webpack@next
 yarn add -D vuepress@next @vuepress/bundler-vite@next
 # install webpack bundler
 yarn add -D vuepress@next @vuepress/bundler-webpack@next
+# install rspack bundler
+yarn add -D vuepress@next @vuepress/bundler-rspack@next
 ```
 
 @tab npm
@@ -33,6 +37,8 @@ yarn add -D vuepress@next @vuepress/bundler-webpack@next
 npm install -D vuepress@next @vuepress/bundler-vite@next
 # install webpack bundler
 npm install -D vuepress@next @vuepress/bundler-webpack@next
+# install rspack bundler
+npm install -D vuepress@next @vuepress/bundler-rspack@next
 ```
 
 :::
@@ -46,14 +52,17 @@ You can use a bundler via the [bundler](../reference/config.md#bundler) option:
 ```ts
 import { viteBundler } from '@vuepress/bundler-vite'
 // import { webpackBundler } from '@vuepress/bundler-webpack'
+// import { rspackBundler } from '@vuepress/bundler-rspack'
 
 export default {
   bundler: viteBundler(),
   // bundler: webpackBundler(),
+  // bundler: rspackBundler(),
 }
 ```
 
 When you need to customize the bundler, you can set the corresponding options:
 
 - [Bundlers > Vite](../reference/bundler/vite.md)
 - [Bundlers > Webpack](../reference/bundler/webpack.md)
+- [Bundlers > Rspack](../reference/bundler/rspack.md)

docs/guide/introduction.md

@@ -18,8 +18,8 @@ During build, we create a server-rendered version of the VuePress site and rende
 
 VitePress can be seen as the younger sibling of VuePress. Both were originally created by Evan You, the author of Vue.js. Today, VitePress is maintained by the Vue.js team, while VuePress is maintained by the VuePress team.
 
-The history goes like this: VuePress v0 and v1 were built on top of Webpack. Later, when Evan created Vite, he started a new static site generator based on it — VitePress — reusing some ideas and code from VuePress. At the same time, the community forked the VuePress v2 branch, continued its development, and added support for both Webpack and Vite.
+The history goes like this: VuePress v0 and v1 were built on top of Webpack. Later, when Evan created Vite, he started a new static site generator based on it — VitePress — reusing some ideas and code from VuePress. At the same time, the community forked the VuePress v2 branch, continued its development, and added support for Webpack, Vite, and Rspack.
 
 At one point, we discussed merging the two projects under the VuePress brand. However, over time their goals and technical directions diverged. As a result, the Vue.js team chose to focus on VitePress, while the community — now the VuePress team — took over VuePress and continues to drive its development forward.
 
-As a user, you can choose either project depending on your needs. VitePress is tightly integrated with Vite. VuePress, on the other hand, is designed to support different bundlers: it supports Webpack and Vite today, and open to any other bundlers. In addition, VuePress has an official [ecosystem](https://ecosystem.vuejs.press/) project and provides a wide range of plugins, making it easier to build sites with features.
+As a user, you can choose either project depending on your needs. VitePress is tightly integrated with Vite. VuePress, on the other hand, is designed to support different bundlers: it supports Vite, Webpack and Rspack today, and open to any other bundlers. In addition, VuePress has an official [ecosystem](https://ecosystem.vuejs.press/) project and provides a wide range of plugins, making it easier to build sites with features.