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 相關的 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 的組合
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,
},
};
使用 Rspack 的原生 builtin:swc-loader 支援 TypeScript，詳情請參閱 此處。
您可以參考相關範例 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 範例供您參考。
