Rspack 构建工具中的 Vue 支持详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00861/article/details/148394340

Rspack 构建工具中的 Vue 支持详解

rspack web-infra-dev/rspack: 是一个用于管理和配置 Web 服务器（如 Apache，Nginx 等）的配置文件的工具，可以用于自动化部署和管理 Web 服务器。项目地址: https://gitcode.com/gh_mirrors/rs/rspack

前言

Rspack 作为一款现代化的前端构建工具，提供了对 Vue 框架的全面支持。本文将详细介绍如何在 Rspack 项目中配置和使用 Vue 2 和 Vue 3，包括单文件组件(SFC)、TypeScript 支持以及 JSX 语法等特性。

两种集成 Vue 的方式

Rspack 提供了两种集成 Vue 的方式：

使用 Rsbuild：Rsbuild 是基于 Rspack 的上层封装，提供了对 Vue 3 和 Vue 2 的开箱即用支持，适合快速创建 Vue 项目。
手动配置 Rspack：通过直接配置 Rspack 来支持 Vue，这种方式更加灵活，适合需要深度定制的项目。

Vue 3 支持详解

基础配置

要在 Rspack 中使用 Vue 3，需要确保 vue-loader 版本不低于 17.2.2。基础配置如下：

import { defineConfig } from '@rspack/cli';
import { VueLoaderPlugin } from 'vue-loader';

export default defineConfig({
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          experimentalInlineMatchResource: true,  // 确保设置为 true 以获得完整功能
        },
      },
    ],
  },
});

CSS 处理

Rspack 原生支持 CSS 模块编译，无需额外配置 CSS loader。当需要使用预处理器（如 Less）时：

module: {
  rules: [
    {
      test: /\.less$/,
      loader: "less-loader",
      type: "css"
    }
  ]
}

替代 CSS 处理方案

如果不希望生成 CSS 文件，可以使用传统 loader 组合：

module: {
  rules: [
    {
      test: /\.less$/,
      use: ['vue-style-loader', 'css-loader', 'less-loader'],
      type: 'javascript/auto',
    },
  ],
},
experiments: {
  css: false,  // 需要关闭 experiments.css
}

TypeScript 支持

Rspack 内置支持 TypeScript，可以直接在 Vue SFC 中使用：

<script lang="ts">
  export default {
    // TypeScript 代码
  };
</script>

Vue 2 支持详解

基础配置

对于 Vue 2 项目，需要使用 vue-loader@15 并关闭 experiments.css：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['vue-style-loader', 'css-loader'],
      type: 'javascript/auto',
    },
  ],
},
experiments: {
  css: false,
}

TypeScript 支持

通过 Rspack 内置的 builtin:swc-loader 支持 TypeScript：

{
  test: /\.ts$/,
  loader: 'builtin:swc-loader',
  options: {
    jsc: {
      parser: {
        syntax: 'typescript',
      },
    },
  },
  type: 'javascript/auto',
}

Vue 3 JSX 支持

安装依赖

需要安装以下依赖：

babel-loader
@babel/core
@vue/babel-plugin-jsx

配置方法

import { defineConfig } from '@rspack/cli';

export default defineConfig({
  entry: {
    main: './src/index.jsx',
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: ['@vue/babel-plugin-jsx'],
            },
          },
        ],
      },
    ],
  },
});