Vue
使い方
Rspack は Vue をサポートするために2つのソリューションを提供します。
- Rsbuild を使用する: Rsbuild は Vue 3 および Vue 2 をすぐに使える状態でサポートしており、Vue プロジェクトをすばやく作成できます。詳しくは、「Rsbuild - Vue 3」または「Rsbuild - Vue 2」を参照してください。
- 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 の 例を提供しています。
