@esmx/rspack#

The Rspack package provides a set of APIs for creating and configuring Rspack applications, supporting the building and development of both standard applications and HTML applications.

Installation#

Install @esmx/rspack as a development dependency using your package manager:

1npm install @esmx/rspack -D

Type Exports#

BuildTarget#

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

The build target environment type defines the target environment for application building, used to configure specific optimizations and features during the build process:

• node: Builds code to run in Node.js environments
• client: Builds code to run in browser environments
• server: Builds code to run in server environments

RspackAppConfigContext#

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

The Rspack application configuration context interface provides contextual information accessible within configuration hook functions:

• esmx: Esmx framework instance
• buildTarget: Current build target (client/server/node)
• config: Rspack configuration object
• options: Application configuration 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 application configuration options interface:

• css: CSS output method, either 'css' (standalone files) or 'js' (bundled into JS). Defaults to automatic selection based on environment: production uses 'css' for cache optimization and parallel loading, development uses 'js' to support HMR
• loaders: Custom loader configurations
• styleLoader: style-loader configuration options
• cssLoader: css-loader configuration options
• target: Build target compatibility configurations
• definePlugin: Global constant definitions
• config: Configuration hook function

RspackHtmlAppOptions#

Extends RspackAppOptions, used to configure HTML application-specific options.

Function Exports#

createRspackApp#

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

Creates a standard Rspack application instance.

Parameters:

• esmx: Esmx framework instance
• options: Rspack application configuration options

Returns:

• A Promise that resolves to the created application instance

createRspackHtmlApp#

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

Creates an HTML-type Rspack application instance.

Parameters:

• esmx: Esmx framework instance
• options: HTML application configuration options

Returns:

• A Promise that resolves to the created HTML application instance

Constant Exports#

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}

A mapping object of Rspack's built-in loader identifiers, providing commonly used loader name constants:

• builtinSwcLoader: Rspack's built-in SWC loader for processing TypeScript/JavaScript files
• lightningcssLoader: Rspack's built-in lightningcss loader, a high-performance compiler for CSS files
• styleLoader: Loader for injecting CSS into the DOM
• cssLoader: Loader for parsing CSS files and handling CSS modularization
• lessLoader: Loader for compiling Less files into CSS
• styleResourcesLoader: Loader for automatically importing global style resources (e.g., variables, mixins)
• workerRspackLoader: Loader for processing Web Worker files

Using these constants allows referencing built-in loaders in configurations, avoiding manual string input:

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          // Use constants to reference loaders
9          styleLoader: RSPACK_LOADER.styleLoader,
10          cssLoader: RSPACK_LOADER.cssLoader,
11          lightningcssLoader: RSPACK_LOADER.lightningcssLoader
12        }
13      })
14    );
15  }
16};

Notes:

• These loaders are already built into Rspack and require no additional installation
• When customizing loader configurations, these constants can be used to replace default loader implementations
• Certain loaders (e.g., builtinSwcLoader) have specific configuration options - refer to their respective documentation

Module Exports#

rspack#

Re-exports all contents from the @rspack/core package, providing complete Rspack core functionality.