Vue
如何使用
Rspack 提供两种解决方案来支持 Vue
Vue 3
目前，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: {
// Note, for the majority of features to be available, make sure this option is `true`
experimentalInlineMatchResource: true,
},
},
],
},
};
module.exports = config;
由于 Rspack 原生支持 CSS 模块的编译，您不需要配置与 CSS 相关的加载器。此外，当您尝试使用 CSS 预处理器（例如：less）时，您只需要添加以下配置
const config = {
module: {
rules: [
+ {
+ test: /\.less$/,
+ loader: "less-loader",
+ type: "css",
+ }
],
},
};
module.exports = config;
此时，Rspack 将使用内置 CSS 处理器进行后处理。
如果您不想生成 CSS 文件，也可以使用 css-loader 和 vue-style-loader 的组合。
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: ['vue-style-loader', 'css-loader', 'less-loader'],
type: 'javascript/auto',
},
],
},
experiments: {
css: false, // At this point, you need to turn off `experiments.css` to adapt to the internal processing logic of `vue-loader`
},
};
此外，由于 Rspack 内置了 TS 支持，我们也默认支持 lang="ts" 配置
<script lang="ts">
export default {
// ...
};
</script>
您可以参考相关的示例 example-vue3。
Vue 2
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$/, // add this rule when you use TypeScript in Vue SFC
loader: 'builtin:swc-loader',
options: {
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 add babel-loader @babel/core @vue/babel-plugin-jsx -D
配置
然后在 .jsx 文件中添加以下配置以支持 Vue 3 JSX 语法
rspack.config.js
/**
* @type {import('@rspack/cli'). Configuration}
*/
module.exports = {
context: __dirname,
entry: {
main: './src/index.jsx',
},
module: {
rules: [
{
test: /\.jsx$/,
use: [
{
loader: 'babel-loader',
options: {
plugins: ['@vue/babel-plugin-jsx'],
},
},
],
},
],
},
};
Rspack 提供了 示例 用于参考 Vue JSX。
