feat: add docs about rspack

.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 @@
 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 @@
 
   // 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 @@
 
   // 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.

docs/guide/markdown.md

@@ -503,6 +503,7 @@ If you want to use those tags anyway, try either of the following workarounds:
 - Using [compilerOptions.isCustomElement](https://vuejs.org/api/application.html#app-config-compileroptions) to tell Vue template compiler not try to resolve them as components.
   - For `@vuepress/bundler-webpack`, set [vue.compilerOptions](../reference/bundler/webpack.md#vue)
   - For `@vuepress/bundler-vite`, set [vuePluginOptions.template.compilerOptions](../reference/bundler/vite.md#vuepluginoptions)
+  - For `@vuepress/bundler-rspack`, set [vue.compilerOptions](../reference/bundler/rspack.md#vue)
 
 [prismjs]: https://ecosystem.vuejs.press/plugins/markdown/prismjs.html
 [shiki]: https://ecosystem.vuejs.press/plugins/markdown/shiki.html

docs/guide/migration.md

@@ -8,7 +8,7 @@ Some major changes and enhancements of VuePress v2:
 
 - VuePress v2 is now using Vue 3, so make sure your components and other client files are compatible with Vue 3.
 - VuePress v2 is developed with TypeScript, so it provides better TS support now. It's highly recommended to use TypeScript to develop plugins and themes. VuePress config file also supports TypeScript, and you can use `.vuepress/config.ts` directly.
-- VuePress v2 supports both Webpack and Vite as bundler. You can choose the bundler you like in your config file.
+- VuePress v2 supports Webpack, Vite and Rspack as bundler. You can choose the bundler you like in your config file.
 - VuePress v2 is now released as pure ESM packages, and CommonJS config files are no longer supported.
 
 Core ideas and processes of VuePress v2 are the same with v1, while v2 API has been re-designed and becomes more normalized. So you might encounter breaking changes when migrating an existing v1 project to v2. This guide is here to help you migrating v1 sites / plugins / themes to v2.
@@ -69,6 +69,21 @@ export default defineUserConfig({
 })
 ```
 
+Or using the rspack bundler:
+
+```bash
+npm i -D @vuepress/bundler-rspack@next
+```
+
+```ts title=".vuepress/config.ts"
+import { rspackBundler } from '@vuepress/bundler-rspack'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+  bundler: rspackBundler(),
+})
+```
+
 #### theme
 
 Using a theme via string is not supported, and the default theme is not integrated into vuepress package by default.
@@ -209,6 +224,8 @@ All webpack related configs are moved to options of `@vuepress/bundler-webpack`,
 
 Please refer to [Guide > Bundler](./bundler.md).
 
+The same approach also applies to `@vuepress/bundler-rspack`, which supports identical options with `configureRspack` and `chainRspack`. Since Rspack is almost fully compatible with Webpack while offering significantly better performance, we recommend switching to Rspack during migration instead of staying on Webpack.
+
 ### Frontmatter Change
 
 #### meta

docs/guide/troubleshooting.md

@@ -8,6 +8,7 @@ See the bundler reference for how to configure bundlers properly:
 
 - [Bundlers > Vite](../reference/bundler/vite.md)
 - [Bundlers > Webpack](../reference/bundler/webpack.md)
+- [Bundlers > Rspack](../reference/bundler/rspack.md)
 
 See the default theme reference for how to configure the default theme properly:
 

docs/reference/bundler/rspack.md

@@ -0,0 +1,156 @@
+# Rspack
+
+<NpmBadge package="@vuepress/bundler-rspack" />
+
+Rspack bundler is provided by [@vuepress/bundler-rspack](https://www.npmjs.com/package/@vuepress/bundler-rspack) package.
+
+[Rspack](https://rspack.dev/) is a high-performance JavaScript bundler written in Rust, with almost full compatibility with Webpack. It offers a significantly faster build speed while supporting most Webpack configurations and loaders out of the box.
+
+## Usage
+
+Install the bundler package:
+
+```bash
+npm i -D @vuepress/bundler-rspack@next
+```
+
+Specify the bundler option in your config file:
+
+```ts title=".vuepress/config.ts"
+import { rspackBundler } from '@vuepress/bundler-rspack'
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+  bundler: rspackBundler({
+    postcss: {},
+    vue: {},
+  }),
+})
+```
+
+## Options
+
+Since Rspack is designed to be highly compatible with Webpack, the bundler options are very similar to [Webpack](./webpack.md). The following options are available:
+
+### configureRspack
+
+- Type: `(config: RspackConfiguration, isServer: boolean, isBuild: boolean) => RspackConfiguration | void`
+
+- Details:
+
+  Edit the internal rspack config.
+
+  This option accepts a function that will receive a rspack config object as the 1st argument, an `isServer` flag as the 2nd argument and an `isBuild` flag as the 3rd argument. You can either mutate the config directly, or return an object to be merged by [rspack-merge](https://github.com/rstackjs/rspack-merge).
+
+### chainRspack
+
+- Type: `(config: RspackChain, isServer: boolean, isBuild: boolean) => void`
+
+- Details:
+
+  Edit the internal rspack config with [rspack-chain](https://github.com/rstackjs/rspack-chain).
+
+  This option accepts a function that will receive a `RspackChain` instance as the 1st argument, an `isServer` flag as the 2nd argument and an `isBuild` flag as the 3rd argument.
+
+### devServerSetupMiddlewares
+
+- Type: `(middlewares: Middleware[], devServer: Server) => Middleware[]`
+
+- Details:
+
+  A hook to be called in `devServer.setupMiddlewares` of rspack.
+
+  The arguments of the function are those of `devServer.setupMiddlewares`.
+
+- Also see:
+  - [Rspack > Configuration > DevServer > devServer.setupMiddlewares](https://rspack.dev/guide/dev-server)
+
+### vue
+
+- Type: `VueLoaderOptions`
+
+- Details:
+
+  Options for `vue-loader`.
+
+- Also see:
+  - [vue-loader > Options Reference](https://vue-loader.vuejs.org/options.html)
+
+### postcss
+
+- Type: `PostcssLoaderOptions`
+
+- Details:
+
+  Options for `postcss-loader`.
+
+- Also see:
+  - [postcss-loader > Options](https://github.com/webpack-contrib/postcss-loader#options)
+
+### stylus
+
+- Type: `StylusLoaderOptions`
+
+- Details:
+
+  Options for `stylus-loader`.
+
+- Also see:
+  - [stylus-loader > Options](https://github.com/webpack-contrib/stylus-loader#options)
+
+### scss
+
+- Type: `SassLoaderOptions`
+
+- Details:
+
+  Options for `sass-loader` for `.scss` files.
+
+- Also see:
+  - [sass-loader > Options](https://github.com/webpack-contrib/sass-loader#options)
+
+### sass
+
+- Type: `SassLoaderOptions`
+
+- Details:
+
+  Options for `sass-loader` for `.sass` files.
+
+- Also see:
+  - [sass-loader > Options](https://github.com/webpack-contrib/sass-loader#options)
+
+### less
+
+- Type: `LessLoaderOptions`
+
+- Details:
+
+  Options for `less-loader`.
+
+- Also see:
+  - [less-loader > Options](https://github.com/webpack-contrib/less-loader#options)
+
+### evergreen
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Set to `true` if you are only targeting evergreen browsers. This will disable some transpilation and polyfills, and result in faster builds and smaller files.
+
+## FAQ
+
+### Why Rspack?
+
+Rspack offers almost full compatibility with Webpack while being significantly faster due to its Rust-based implementation. If you are currently using Webpack but want better performance without rewriting your existing Webpack configurations, Rspack is an excellent choice.
+
+### Referencing Public Files after Changing `base`
+
+Like Webpack, Rspack won't handle `base` for public files automatically. So if you change the `base` of your site, you'd better to use [Base Helper](../../guide/assets.md#base-helper) when referencing an public image file.
+
+### Using with Default Theme
+
+Default theme is using [SASS](https://sass-lang.com/) as CSS pre-processor, so you might need to install [sass-loader](https://www.npmjs.com/package/sass-loader) as a peer dependency to make it work with Rspack, especially when you are using [pnpm](https://pnpm.io/).

docs/reference/config.md

@@ -166,6 +166,7 @@ Rendered as：
   - [Guide > Bundler](../guide/bundler.md)
   - [Bundlers > Vite](./bundler/vite.md)
   - [Bundlers > Webpack](./bundler/webpack.md)
+  - [Bundlers > Rspack](./bundler/rspack.md)
 
 ## Common Config