#@esmx/rspack-vue

@esmx/rspack-vue 提供了一套用于创建和配置基于 Vue 框架的 Rspack 应用的 API，支持 Vue 2.7+ 和 Vue 3 组件的开发、构建与 SSR。

#安装

使用包管理器安装 @esmx/rspack-vue 开发依赖：

npm install @esmx/rspack-vue vue -D

yarn add @esmx/rspack-vue vue -D

pnpm add @esmx/rspack-vue vue -D

bun add @esmx/rspack-vue vue -D

deno add npm:@esmx/rspack-vue npm:vue -D

#类型导出

#RspackVueAppOptions

interface RspackVueAppOptions extends RspackHtmlAppOptions {
  vueLoader?: Record<string, any>
}

Vue 应用配置选项接口，继承自 @esmx/rspack 的 RspackHtmlAppOptions：

• vueLoader: vue-loader 配置选项

关于基础类型的详细说明，请参阅 @esmx/rspack 文档。

#函数导出

#createRspackVue2App

function createRspackVue2App(esmx: Esmx, options?: RspackVueAppOptions): Promise<App>

创建 Vue 2.7+ 应用构建实例。自动配置 vue-loader-v15 和 Vue 2 相关的编译选项。

参数：

• esmx: Esmx 框架实例
• options: Vue 应用配置选项

返回值：

• 返回一个 Promise，解析为创建的应用实例

#createRspackVue3App

function createRspackVue3App(esmx: Esmx, options?: RspackVueAppOptions): Promise<App>

创建 Vue 3 应用构建实例。自动配置 vue-loader-v17 和 Vue 3 相关的编译选项。

参数：

• esmx: Esmx 框架实例
• options: Vue 应用配置选项

返回值：

• 返回一个 Promise，解析为创建的应用实例

#常量导出

#RSPACK_LOADER

const RSPACK_LOADER: Record<string, string> = {
  builtinSwcLoader: 'builtin:swc-loader',
  lightningcssLoader: 'builtin:lightningcss-loader',
  styleLoader: 'style-loader',
  cssLoader: 'css-loader',
  lessLoader: 'less-loader',
  styleResourcesLoader: 'style-resources-loader',
  workerRspackLoader: 'worker-rspack-loader'
}

Rspack 内置的 loader 标识符映射对象，提供了常用的 loader 名称常量：

• builtinSwcLoader: Rspack 内置的 SWC loader，用于处理 TypeScript/JavaScript 文件
• lightningcssLoader: Rspack 内置的 lightningcss loader，用于处理 CSS 文件的高性能编译器
• styleLoader: 用于将 CSS 注入到 DOM 中的 loader
• cssLoader: 用于解析 CSS 文件和处理 CSS 模块化的 loader
• lessLoader: 用于将 Less 文件编译为 CSS 的 loader
• styleResourcesLoader: 用于自动导入全局样式资源（如变量、mixins）的 loader
• workerRspackLoader: 用于处理 Web Worker 文件的 loader

使用这些常量可以在配置中引用内置的 loader，避免手动输入字符串：

import { RSPACK_LOADER } from '@esmx/rspack';

export default {
  async devApp(esmx) {
    return import('@esmx/rspack').then((m) =>
      m.createRspackHtmlApp(esmx, {
        loaders: {
          // 使用常量引用 loader
          styleLoader: RSPACK_LOADER.styleLoader,
          cssLoader: RSPACK_LOADER.cssLoader,
          lightningcssLoader: RSPACK_LOADER.lightningcssLoader
        }
      })
    );
  }
};

注意事项：

• 这些 loader 已经内置在 Rspack 中，无需额外安装
• 在自定义 loader 配置时，可以使用这些常量来替换默认的 loader 实现
• 某些 loader（如 builtinSwcLoader）有特定的配置选项，请参考相应的配置文档

#模块导出

#rspack

重导出 @rspack/core 包的所有内容，提供完整的 Rspack 核心功能。