diff --git a/.vscode/settings.json b/.vscode/settings.json
index b748e75a..aa5f1ae0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -33,6 +33,7 @@
"prefetch",
"preload",
"prismjs",
+ "rspack",
"shiki",
"shikiji",
"slugify",
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index bcaca32d..38d94404 100644
--- a/docs/.vuepress/config.ts
+++ b/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
diff --git a/docs/.vuepress/configs/navbar/en.ts b/docs/.vuepress/configs/navbar/en.ts
index 53365097..9fd41d6b 100644
--- a/docs/.vuepress/configs/navbar/en.ts
+++ b/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',
],
},
{
diff --git a/docs/.vuepress/configs/navbar/zh.ts b/docs/.vuepress/configs/navbar/zh.ts
index ed3fef43..45ab9511 100644
--- a/docs/.vuepress/configs/navbar/zh.ts
+++ b/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',
],
},
{
diff --git a/docs/.vuepress/configs/sidebar/en.ts b/docs/.vuepress/configs/sidebar/en.ts
index 387003b7..2d97bc2d 100644
--- a/docs/.vuepress/configs/sidebar/en.ts
+++ b/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',
diff --git a/docs/.vuepress/configs/sidebar/zh.ts b/docs/.vuepress/configs/sidebar/zh.ts
index 3955f70c..a69b8e71 100644
--- a/docs/.vuepress/configs/sidebar/zh.ts
+++ b/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',
],
},
{
diff --git a/docs/README.md b/docs/README.md
index 4b49d110..90f150b4 100644
--- a/docs/README.md
+++ b/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
---
diff --git a/docs/guide/assets.md b/docs/guide/assets.md
index 93618ad1..4acb3e1f 100644
--- a/docs/guide/assets.md
+++ b/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:
diff --git a/docs/guide/bundler.md b/docs/guide/bundler.md
index 443e46a0..90632cb7 100644
--- a/docs/guide/bundler.md
+++ b/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,10 +52,12 @@ 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(),
}
```
@@ -57,3 +65,4 @@ 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)
diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md
index 9157eb6f..96de5475 100644
--- a/docs/guide/introduction.md
+++ b/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.
diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index 1109888d..f92a9f8e 100644
--- a/docs/guide/markdown.md
+++ b/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
diff --git a/docs/guide/migration.md b/docs/guide/migration.md
index 48434049..0bf28969 100644
--- a/docs/guide/migration.md
+++ b/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
diff --git a/docs/guide/troubleshooting.md b/docs/guide/troubleshooting.md
index 160afa12..ada61832 100644
--- a/docs/guide/troubleshooting.md
+++ b/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:
diff --git a/docs/reference/bundler/rspack.md b/docs/reference/bundler/rspack.md
new file mode 100644
index 00000000..d301aa43
--- /dev/null
+++ b/docs/reference/bundler/rspack.md
@@ -0,0 +1,156 @@
+# 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/).
diff --git a/docs/reference/config.md b/docs/reference/config.md
index 43b7dec8..1179f519 100644
--- a/docs/reference/config.md
+++ b/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
diff --git a/docs/reference/plugin-api.md b/docs/reference/plugin-api.md
index e43144dc..d0f9a461 100644
--- a/docs/reference/plugin-api.md
+++ b/docs/reference/plugin-api.md
@@ -189,6 +189,17 @@ export default {
if (tag === 'my-custom-element') return true
}
}
+
+ // extends options of @vuepress/bundler-rspack
+ if (app.options.bundler.name === '@vuepress/bundler-rspack') {
+ bundlerOptions.vue ??= {}
+ bundlerOptions.vue.compilerOptions ??= {}
+ const isCustomElement = bundlerOptions.vue.compilerOptions.isCustomElement
+ bundlerOptions.vue.compilerOptions.isCustomElement = (tag) => {
+ if (isCustomElement?.(tag)) return true
+ if (tag === 'my-custom-element') return true
+ }
+ }
},
}
```
@@ -196,6 +207,7 @@ export default {
- Also see:
- [Bundlers > Vite](./bundler/vite.md)
- [Bundlers > Webpack](./bundler/webpack.md)
+ - [Bundlers > Rspack](./bundler/rspack.md)
### extendsMarkdownOptions
diff --git a/docs/zh/README.md b/docs/zh/README.md
index f54edcac..8504d3cf 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -28,7 +28,7 @@ features:
details: 灵活的插件API,使得插件可以为你的站点提供许多即插即用的功能。
- title: 打包工具
- details: 推荐的打包工具是 Vite ,但也同样支持使用 Webpack 。选一个你喜欢的来使用吧!
+ details: 推荐的打包工具是 Vite ,但也同样支持使用 Webpack 和 Rspack 。选一个你喜欢的来使用吧!
footer: MIT 协议 | 版权所有 © 2018-至今 VuePress 社区
---
diff --git a/docs/zh/guide/assets.md b/docs/zh/guide/assets.md
index 611cda86..df0bbc80 100644
--- a/docs/zh/guide/assets.md
+++ b/docs/zh/guide/assets.md
@@ -65,7 +65,7 @@
```
::: tip
-在使用 [Webpack 打包工具](../reference/bundler/webpack.md) 时,你需要将 [markdown.assets.absolutePathPrependBase](../reference/config.md#markdown-assets) 设置为 `true` 来给 Markdown 图片自动添加 `base` 前缀。
+在使用 [Webpack 打包工具](../reference/bundler/webpack.md) 或 [Rspack 打包工具](../reference/bundler/rspack.md) 时,你需要将 [markdown.assets.absolutePathPrependBase](../reference/config.md#markdown-assets) 设置为 `true` 来给 Markdown 图片自动添加 `base` 前缀。
:::
然而,有些情况下,你可能会有一些指向 Public 文件的动态路径,尤其是在你开发一个自定义主题的时候。在这种情况下, `base` 无法被自动处理。为了解决这个问题,VuePress 提供了 [withBase](../reference/client-api.md#withbase) 工具函数,它可以帮助你添加 `base` 前缀:
diff --git a/docs/zh/guide/bundler.md b/docs/zh/guide/bundler.md
index 4291d8a3..062ee99c 100644
--- a/docs/zh/guide/bundler.md
+++ b/docs/zh/guide/bundler.md
@@ -1,6 +1,6 @@
# 打包工具
-VuePress 支持使用 [Vite](https://vite.dev/) 或 [Webpack](https://webpack.js.org/) 作为打包工具来进行网站的开发和构建。你可以根据自己的喜好来选择使用哪个打包工具,并且不需要进行额外的配置。
+VuePress 支持使用 [Vite](https://vite.dev/)、[Webpack](https://webpack.js.org/) 或 [Rspack](https://rspack.dev/zh/) 作为打包工具来进行网站的开发和构建。你可以根据自己的喜好来选择使用哪个打包工具,并且不需要进行额外的配置。
## 安装打包工具
@@ -15,6 +15,8 @@ VuePress 支持使用 [Vite](https://vite.dev/) 或 [Webpack](https://webpack.js
pnpm add -D vuepress@next @vuepress/bundler-vite@next
# 安装 webpack 打包工具
pnpm add -D vuepress@next @vuepress/bundler-webpack@next
+# 安装 rspack 打包工具
+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
# 安装 webpack 打包工具
yarn add -D vuepress@next @vuepress/bundler-webpack@next
+# 安装 rspack 打包工具
+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
# 安装 webpack 打包工具
npm install -D vuepress@next @vuepress/bundler-webpack@next
+# 安装 rspack 打包工具
+npm install -D vuepress@next @vuepress/bundler-rspack@next
```
:::
@@ -46,10 +52,12 @@ npm install -D vuepress@next @vuepress/bundler-webpack@next
```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(),
}
```
@@ -57,3 +65,4 @@ export default {
- [打包工具 > Vite](../reference/bundler/vite.md)
- [打包工具 > Webpack](../reference/bundler/webpack.md)
+- [打包工具 > Rspack](../reference/bundler/rspack.md)
diff --git a/docs/zh/guide/introduction.md b/docs/zh/guide/introduction.md
index 74058c7c..401cd8b0 100644
--- a/docs/zh/guide/introduction.md
+++ b/docs/zh/guide/introduction.md
@@ -18,8 +18,8 @@ VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求,
VitePress 可以看作是 VuePress 的孪生兄弟。它们最初都是由 Vue.js 的作者 Evan You 创建。如今,VitePress 由 Vue.js 团队维护,而 VuePress 则由 VuePress 团队维护。
-两个项目的大致历史是这样的:VuePress v0 和 v1 是基于 Webpack 构建的。后来 Evan 创建了 Vite ,他基于 Vite 开发了一个新的静态站点生成器 —— VitePress —— 复用了 VuePress 的一些理念和代码。与此同时,社区 Fork 了 VuePress v2 分支,继续推动其发展,并为其增加了对 Webpack 和 Vite 的支持。
+两个项目的大致历史是这样的:VuePress v0 和 v1 是基于 Webpack 构建的。后来 Evan 创建了 Vite ,他基于 Vite 开发了一个新的静态站点生成器 —— VitePress —— 复用了 VuePress 的一些理念和代码。与此同时,社区 Fork 了 VuePress v2 分支,继续推动其发展,并为其增加了对 Webpack、Vite 和 Rspack 的支持。
我们曾经考虑过将这两个项目合并到 VuePress 这一名称下。然而,随着时间的推移,它们的目标和技术路线逐渐分化。因此,Vue.js 团队选择专注于 VitePress,而社区 —— 也就是现在的 VuePress 团队 —— 接手了 VuePress,并持续推动其发展。
-作为用户,你可以根据需求自由选择使用哪个项目。VitePress 与 Vite 深度集成。而 VuePress 则更开放,可以支持不同的打包工具:目前支持 Webpack 和 Vite,并且同样可以支持其他打包工具。此外,VuePress 拥有官方的 [生态系统](https://ecosystem.vuejs.press/) 项目,提供了大量的插件,为你构建功能丰富的网站提供了便利。
+作为用户,你可以根据需求自由选择使用哪个项目。VitePress 与 Vite 深度集成。而 VuePress 则更开放,可以支持不同的打包工具:目前支持 Vite、Webpack 和 Rspack,并且同样可以支持其他打包工具。此外,VuePress 拥有官方的 [生态系统](https://ecosystem.vuejs.press/) 项目,提供了大量的插件,为你构建功能丰富的网站提供了便利。
diff --git a/docs/zh/guide/markdown.md b/docs/zh/guide/markdown.md
index f0a1e09b..e57a29b7 100644
--- a/docs/zh/guide/markdown.md
+++ b/docs/zh/guide/markdown.md
@@ -506,6 +506,7 @@ export default {
- 设置 [compilerOptions.isCustomElement](https://v3.vuejs.org/api/application-config.html#compileroptions) 来告诉 Vue 模板编译器不要尝试作为组件来解析它们。
- 对于 `@vuepress/bundler-webpack` ,设置 [vue.compilerOptions](../reference/bundler/webpack.md#vue)
- 对于 `@vuepress/bundler-vite` ,设置 [vuePluginOptions.template.compilerOptions](../reference/bundler/vite.md#vuepluginoptions)
+ - 对于 `@vuepress/bundler-rspack` ,设置 [vue.compilerOptions](../reference/bundler/rspack.md#vue)
[prismjs]: https://ecosystem.vuejs.press/zh/plugins/markdown/prismjs.html
[shiki]: https://ecosystem.vuejs.press/zh/plugins/markdown/shiki.html
diff --git a/docs/zh/guide/migration.md b/docs/zh/guide/migration.md
index af1647c1..838e0486 100644
--- a/docs/zh/guide/migration.md
+++ b/docs/zh/guide/migration.md
@@ -8,7 +8,7 @@ VuePress v2 的一些主要改动和优化:
- VuePress v2 现在使用 Vue 3 ,因此你要保证你的组件和其他客户端文件是适用于 Vue 3 的。
- VuePress v2 是使用 TypeScript 开发的,因此它现在提供了更好的类型支持。我们强烈推荐你使用 TypeScript 来开发插件和主题。 VuePress 配置文件也同样支持 TypeScript ,你可以直接使用 `.vuepress/config.ts` 。
-- VuePress v2 支持使用 Webpack 和 Vite 作为打包工具。你可以在配置文件中选择你喜欢的打包工具来使用。
+- VuePress v2 支持使用 Webpack 、Vite 和 Rspack 作为打包工具。你可以在配置文件中选择你喜欢的打包工具来使用。
- VuePress v2 现在是纯 ESM 包, CommonJS 格式的配置文件不再被支持。
VuePress v2 的核心思想和流程是和 v1 一致的,但 v2 API 经过了重新设计,更加标准化。因此在将现有的 v1 项目迁移至 v2 时,你很可能会遇到一些 Breaking Changes 。本指南将帮助你将 v1 的站点 / 插件 / 主题迁移至 v2 。
@@ -69,6 +69,21 @@ export default defineUserConfig({
})
```
+或者使用 Rspack 打包工具:
+
+```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
不再支持通过字符串使用主题,默认主题也不再集成到 vuepress 包中。
@@ -209,6 +224,8 @@ npm i -D @vuepress/theme-default@next
请参考 [指南 > Bundler](./bundler.md) 。
+同样的方法也适用于 `@vuepress/bundler-rspack` ,它支持相同的配置项,对应使用 `configureRspack` 和 `chainRspack`。由于 Rspack 几乎完全兼容 Webpack 且提供了显著更好的性能,我们建议在迁移过程中优先切换到 Rspack 而非继续使用 Webpack。
+
### Frontmatter 变更
#### meta
diff --git a/docs/zh/guide/troubleshooting.md b/docs/zh/guide/troubleshooting.md
index 739fb30e..09f659a3 100644
--- a/docs/zh/guide/troubleshooting.md
+++ b/docs/zh/guide/troubleshooting.md
@@ -8,6 +8,7 @@
- [打包工具 > Vite](../reference/bundler/vite.md)
- [打包工具 > Webpack](../reference/bundler/webpack.md)
+- [打包工具 > Rspack](../reference/bundler/rspack.md)
请参阅默认主题参考,了解如何正确配置默认主题:
diff --git a/docs/zh/reference/bundler/rspack.md b/docs/zh/reference/bundler/rspack.md
new file mode 100644
index 00000000..0f79c910
--- /dev/null
+++ b/docs/zh/reference/bundler/rspack.md
@@ -0,0 +1,156 @@
+# Rspack
+
+
+
+Rspack 打包工具是由 [@vuepress/bundler-rspack](https://www.npmjs.com/package/@vuepress/bundler-rspack) 包提供的。
+
+[Rspack](https://rspack.dev/zh/) 是一个基于 Rust 编写的高性能 JavaScript 打包工具,几乎完全兼容 Webpack。它在支持大部分 Webpack 配置和 Loader 的同时,提供了显著更快的构建速度。
+
+## 使用方法
+
+安装打包工具:
+
+```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({
+ postcss: {},
+ vue: {},
+ }),
+})
+```
+
+## 配置项
+
+由于 Rspack 旨在高度兼容 Webpack,其配置项与 [Webpack](./webpack.md) 非常相似。以下是可用的配置项:
+
+### configureRspack
+
+- 类型: `(config: RspackConfiguration, isServer: boolean, isBuild: boolean) => RspackConfiguration | void`
+
+- 详情:
+
+ 用于修改内部的 Rspack 配置。
+
+ 该配置项接收一个函数,该函数的第一个参数是 Rspack 配置对象,第二个参数是 `isServer` 标志位,第三个参数是 `isBuild` 标志位。你可以直接修改配置对象,或者返回一个对象通过 [rspack-merge](https://github.com/rstackjs/rspack-merge) 进行合并。
+
+### chainRspack
+
+- 类型: `(config: RspackChain, isServer: boolean, isBuild: boolean) => void`
+
+- 详情:
+
+ 通过 [rspack-chain](https://github.com/rstackjs/rspack-chain) 来修改内部的 Rspack 配置。
+
+ 该配置项接收一个函数,该函数的第一个参数是 `RspackChain` 实例,第二个参数是 `isServer` 标志位,第三个参数是 `isBuild` 标志位。
+
+### devServerSetupMiddlewares
+
+- 类型: `(middlewares: Middleware[], devServer: Server) => Middleware[]`
+
+- 详情:
+
+ 在 Rspack 的 `devServer.setupMiddlewares` 中调用的 Hook 。
+
+ 函数的参数即是 `devServer.setupMiddlewares` 的参数。
+
+- 参考:
+ - [Rspack > Configuration > DevServer > devServer.setupMiddlewares](https://rspack.dev/zh/guide/dev-server)
+
+### vue
+
+- 类型: `VueLoaderOptions`
+
+- 详情:
+
+ `vue-loader` 的配置项。
+
+- 参考:
+ - [vue-loader > 选项参考](https://vue-loader.vuejs.org/zh/options.html)
+
+### postcss
+
+- 类型: `PostcssLoaderOptions`
+
+- 详情:
+
+ `postcss-loader` 的配置项。
+
+- 参考:
+ - [postcss-loader > Options](https://github.com/webpack-contrib/postcss-loader#options)
+
+### stylus
+
+- 类型: `StylusLoaderOptions`
+
+- 详情:
+
+ `stylus-loader` 的配置项。
+
+- 参考:
+ - [stylus-loader > Options](https://github.com/webpack-contrib/stylus-loader#options)
+
+### scss
+
+- 类型: `SassLoaderOptions`
+
+- 详情:
+
+ 针对 `.scss` 文件的 `sass-loader` 的配置项。
+
+- 参考:
+ - [sass-loader > Options](https://github.com/webpack-contrib/sass-loader#options)
+
+### sass
+
+- 类型: `SassLoaderOptions`
+
+- 详情:
+
+ 针对 `.sass` 文件的 `sass-loader` 的配置项。
+
+- 参考:
+ - [sass-loader > Options](https://github.com/webpack-contrib/sass-loader#options)
+
+### less
+
+- 类型: `LessLoaderOptions`
+
+- 详情:
+
+ `less-loader` 的配置项。
+
+- 参考:
+ - [less-loader > Options](https://github.com/webpack-contrib/less-loader#options)
+
+### evergreen
+
+- 类型: `boolean`
+
+- 默认值: `true`
+
+- 详情:
+
+ 如果你的对象只有那些 "常青树" 浏览器,你可以将其设置成 `true` 。这将会禁用一些转译过程和 Polyfills ,带来更快的构建速度和更小的文件体积。
+
+## 常见问题
+
+### 为什么选择 Rspack ?
+
+Rspack 几乎完全兼容 Webpack,同时由于其基于 Rust 的实现,构建速度显著更快。如果你当前正在使用 Webpack 但希望在不重写现有 Webpack 配置的情况下获得更好的性能,Rspack 是一个绝佳的选择。
+
+### 在修改 `base` 后引用 Public 文件
+
+与 Webpack 一样, Rspack 不会为 Public 文件自动处理 `base`。因此如果你修改了网站的 `base`,建议你在引用 Public 图片文件时使用 [Base Helper](../../guide/assets.md#base-helper)。
+
+### 使用默认主题
+
+默认主题使用 [SASS](https://sass-lang.com/) 作为 CSS 预处理器,因此你在使用 Rspack 时(特别是在使用 [pnpm](https://pnpm.io/) 时)可能需要手动安装 [sass-loader](https://www.npmjs.com/package/sass-loader) 来确保其正常工作。
diff --git a/docs/zh/reference/config.md b/docs/zh/reference/config.md
index 4aa3fded..f2fa00a8 100644
--- a/docs/zh/reference/config.md
+++ b/docs/zh/reference/config.md
@@ -165,6 +165,7 @@ export default {
- [指南 > 打包工具](../guide/bundler.md)
- [打包工具 > Vite](./bundler/vite.md)
- [打包工具 > Webpack](./bundler/webpack.md)
+ - [打包工具 > Rspack](./bundler/rspack.md)
## 通用配置项
diff --git a/docs/zh/reference/plugin-api.md b/docs/zh/reference/plugin-api.md
index f15ee569..1dd22bea 100644
--- a/docs/zh/reference/plugin-api.md
+++ b/docs/zh/reference/plugin-api.md
@@ -189,6 +189,17 @@ export default {
if (tag === 'my-custom-element') return true
}
}
+
+ // 修改 @vuepress/bundler-rspack 的配置项
+ if (app.options.bundler.name === '@vuepress/bundler-rspack') {
+ bundlerOptions.vue ??= {}
+ bundlerOptions.vue.compilerOptions ??= {}
+ const isCustomElement = bundlerOptions.vue.compilerOptions.isCustomElement
+ bundlerOptions.vue.compilerOptions.isCustomElement = (tag) => {
+ if (isCustomElement?.(tag)) return true
+ if (tag === 'my-custom-element') return true
+ }
+ }
},
}
```
@@ -196,6 +207,7 @@ export default {
- 参考:
- [打包工具 > Vite](./bundler/vite.md)
- [打包工具 > Webpack](./bundler/webpack.md)
+ - [打包工具 > Rspack](./bundler/rspack.md)
### extendsMarkdownOptions