@esmx/rspack-vue#

Rspack Vue 包提供了一套用于创建和配置基于 Vue 框架的 Rspack 应用的 API，支持 Vue 组件的开发、构建与服务端渲染。

安装#

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

1npm install @esmx/rspack-vue -D

类型导出#

BuildTarget#

1type BuildTarget = 'node' | 'client' | 'server'

构建目标环境类型，定义了应用程序的构建目标环境，用于配置构建过程中的特定优化和功能：

• node: 构建为 Node.js 环境运行的代码
• client: 构建为浏览器环境运行的代码
• server: 构建为服务端环境运行的代码

RspackAppConfigContext#

1interface RspackAppConfigContext {
2  esmx: Esmx
3  buildTarget: BuildTarget
4  config: RspackOptions
5  options: RspackAppOptions
6}

Rspack 应用配置上下文接口，提供了在配置钩子函数中可以访问的上下文信息：

• esmx: Esmx 框架实例
• buildTarget: 当前的构建目标（client/server/node）
• config: Rspack 配置对象
• options: 应用配置选项

RspackAppOptions#

1interface RspackAppOptions {
2  css?: 'css' | 'js' | false
3  loaders?: {
4    styleLoader?: string
5  }
6  styleLoader?: Record<string, any>
7  cssLoader?: Record<string, any>
8  target?: {
9    web?: string[]
10    node?: string[]
11  }
12  definePlugin?: Record<string, any>
13  config?: (context: RspackAppConfigContext) => void | Promise<void>
14}

Rspack 应用配置选项接口：

• css: CSS 输出方式，可选 'css'（独立文件）或 'js'（打包到JS中），默认根据环境自动选择：生产环境使用'css'以优化缓存和并行加载，开发环境使用'js'以支持热更新(HMR)
• loaders: 自定义 loader 配置
• styleLoader: style-loader 配置选项
• cssLoader: css-loader 配置选项
• target: 构建目标兼容性配置
• definePlugin: 全局常量定义
• config: 配置钩子函数

RspackHtmlAppOptions#

继承自 RspackAppOptions，用于配置 HTML 应用的特定选项。

函数导出#

createRspackApp#

1function createRspackApp(esmx: Esmx, options?: RspackAppOptions): Promise<App>

创建一个标准的 Rspack 应用实例。

参数：

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

返回值：

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

createRspackHtmlApp#

1function createRspackHtmlApp(esmx: Esmx, options?: RspackHtmlAppOptions): Promise<App>

创建一个 HTML 类型的 Rspack 应用实例。

参数：

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

返回值：

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

常量导出#

RSPACK_LOADER#

1const RSPACK_LOADER: Record<string, string> = {
2  builtinSwcLoader: 'builtin:swc-loader',
3  lightningcssLoader: 'builtin:lightningcss-loader',
4  styleLoader: 'style-loader',
5  cssLoader: 'css-loader',
6  lessLoader: 'less-loader',
7  styleResourcesLoader: 'style-resources-loader',
8  workerRspackLoader: 'worker-rspack-loader'
9}

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，避免手动输入字符串：

1import { RSPACK_LOADER } from '@esmx/rspack';
2
3export default {
4  async devApp(esmx) {
5    return import('@esmx/rspack').then((m) =>
6      m.createRspackHtmlApp(esmx, {
7        loaders: {
8          // 使用常量引用 loader
9          styleLoader: RSPACK_LOADER.styleLoader,
10          cssLoader: RSPACK_LOADER.cssLoader,
11          lightningcssLoader: RSPACK_LOADER.lightningcssLoader
12        }
13      })
14    );
15  }
16};

注意事项：

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

模块导出#

rspack#

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