Vue
Vue 是一个非常流行的前端框架，现在你可以配合 Rspack 使用 Vue 的相关功能。
TIP
Rsbuild 提供了开箱即用的 Vue3 和 Vue2 体验，用法可以参考 Vue3 或 Vue2。
对于 Rspack 版本的要求
为了保证生成产物的稳定性，请尽快升级 @rspack/cli 或 @rspack/core 到 v0.3.3，详情
Vue3
目前，Rspack 已经完成了对 Vue3 的支持，请确保你的 vue-loader 版本 >= 17.2.2，并进行如下配置：
rspack.config.js
const { VueLoaderPlugin } = require('vue-loader');
/** @type {import('@rspack/cli').Configuration} */
const config = {
// ...
plugins: [new VueLoaderPlugin()],
module: {
rules: [
// ...
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
// 注意，为了绝大多数功能的可用性，请确保该选项为 `true`
experimentalInlineMatchResource: true,
},
},
],
},
};
module.exports = config;
由于 Rspack 原生支持了 CSS 模块的编译，因此你无需配置与 CSS 相关的 loader。另外，当你尝试使用 CSS 预处理器（如：less）时，你只需要添加如下配置即可：
const config = {
module: {
rules: [
+ {
+ test: /\.less$/,
+ loader: "less-loader"
+ type: "css"
+ }
]
}
}
module.exports = config;
此时，Rspack 将会使用内置的 CSS 处理器进行后处理。
如果你不希望生成 CSS 文件，也可以直接配合 css-loader 和 vue-style-loader 组合使用：
const config = {
module: {
rules: [
{
test: /\.less$/,
use: ['vue-style-loader', 'css-loader', 'less-loader'],
type: 'javascript/auto',
},
],
},
experiments: {
css: false, // 此时需要关闭 `experiments.css` 以适配 `vue-loader` 内部处理逻辑
},
};
module.exports = config;
除此之外，由于 Rspack 内置了 TS 的支持，因此我们也默认支持了 lang="ts" 的配置：
<script lang="ts">
export default {
// ...
};
</script>
相关示例可以参考 example-vue3。
Vue2
Rspack 已经完成对 Vue2（使用 vue-loader@15）的兼容。
请确保在配置 Vue2 项目时关闭 experiments.css 或在 CSS 相关的规则中使用 Rule.type = "javascript/auto"：
rspack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader'],
type: 'javascript/auto',
},
{
test: /\.ts$/, // 如果需要在 Vue SFC 里使用 Typescript, 请添加该规则
loader: 'builtin:swc-loader',
options: {
sourceMap: true,
jsc: {
parser: {
syntax: 'typescript',
},
},
},
type: 'javascript/auto',
},
],
},
experiments: {
css: false,
},
};
TypeScript 语法是通过 Rspack 内置的 builtin:swc-loader 进行支持的，点击这里查看更多信息。
相关示例可以参考：example-vue2 和 example-vue2-ts。
Vue 3 JSX
由于 Rspack 支持使用 babel-loader 进行转换，因此你可以直接使用 @vue/babel-plugin-jsx 插件来支持 Vue 3 JSX 语法。
安装依赖
首先，你需要安装 babel-loader、@babel/core 和 @vue/babel-plugin-jsx：
npm install -D babel-loader @babel/core @vue/babel-plugin-jsx
添加配置
然后添加以下配置，即可在 .jsx 文件中使用 Vue 3 JSX 语法：
rspack.config.js
/** @type {import('@rspack/cli').Configuration} */
const config = {
context: __dirname,
entry: {
main: './src/index.jsx',
},
module: {
rules: [
{
test: /\.jsx$/,
use: [
{
loader: 'babel-loader',
options: {
plugins: ['@vue/babel-plugin-jsx'],
},
},
],
},
],
},
builtins: {
html: [
{
template: './index.html',
},
],
},
};
module.exports = config;
Rspack 提供了一个 Vue JSX 的示例可供参考。
