Vue

Vue 是一个非常流行的前端框架,现在你可以配合 Rspack 使用 Vue 的相关功能。

如何使用

Rspack 提供两种方案来支持 Vue:

  • 使用 Rsbuild:Rsbuild 提供对 Vue 3 和 Vue 2 开箱即用的支持,能够快速创建一个 Vue 项目,详见 "Rsbuild - Vue 3""Rsbuild - Vue 2"
  • 手动配置:你可以参考当前文档,手动添加 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: {
          // 注意,为了绝大多数功能的可用性,请确保该选项为 `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-loadervue-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

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$/, // 如果需要在 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-vue2example-vue2-ts

Vue 3 JSX

由于 Rspack 支持使用 babel-loader 进行转换,因此你可以直接使用 @vue/babel-plugin-jsx 插件来支持 Vue 3 JSX 语法。

安装依赖

首先,你需要安装 babel-loader@babel/core@vue/babel-plugin-jsx

npm
yarn
pnpm
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 的示例可供参考。