#@esmx/rspack

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

#Installation

Use package manager to install @esmx/rspack as a development dependency:

npm install @esmx/rspack -D

yarn add @esmx/rspack -D

pnpm add @esmx/rspack -D

bun add @esmx/rspack -D

deno add npm:@esmx/rspack -D

#Type Exports

#BuildTarget

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

Build target environment type that defines the application's build target environment:

• node: Build code to run in Node.js environment
• client: Build code to run in browser environment
• server: Build code to run in server environment

#RspackAppConfigContext

interface RspackAppConfigContext {
  esmx: Esmx
  buildTarget: BuildTarget
  config: RspackOptions
  options: RspackAppOptions
}

Rspack application configuration context interface provides context information accessible in configuration hook functions:

• esmx: Esmx framework instance
• buildTarget: Current build target (client/server/node)
• config: Rspack configuration object
• options: Application configuration options

#RspackAppChainContext

interface RspackAppChainContext {
  esmx: Esmx
  buildTarget: BuildTarget
  chain: import('rspack-chain').RspackChain
  options: RspackAppOptions
}

Rspack application chain configuration context interface for the chain hook function:

• esmx: Esmx framework instance
• buildTarget: Current build target (client/server/node)
• chain: rspack-chain configuration object for chained configuration
• options: Application configuration options

#RspackAppOptions

interface RspackAppOptions {
  minimize?: boolean
  config?: (context: RspackAppConfigContext) => void
  chain?: (context: RspackAppChainContext) => void
}

Rspack application configuration options interface:

• minimize: Whether to enable code minification, true to enable, false to disable, undefined to automatically decide based on environment (enabled in production, disabled in development)
• config: Configuration hook function called before build starts for modifying Rspack compilation configuration
• chain: Chain configuration hook function using rspack-chain for flexible configuration modification

#RspackHtmlAppOptions

Inherits from RspackAppOptions, used to configure specific options for HTML applications:

interface RspackHtmlAppOptions extends RspackAppOptions {
  css?: 'css' | 'js' | false
  loaders?: Partial<Record<keyof typeof RSPACK_LOADER, string>>
  styleLoader?: Record<string, any>
  cssLoader?: Record<string, any>
  lessLoader?: Record<string, any>
  styleResourcesLoader?: Record<string, any>
  swcLoader?: SwcLoaderOptions
  definePlugin?: Record<string, string | Partial<Record<BuildTarget, string>>>
  target?: TargetSetting
}

• css: CSS output method, optional 'css' (separate file) or 'js' (bundled into JS), defaults to automatic selection based on environment
• loaders: Custom loader configuration for replacing default loader implementations
• styleLoader: style-loader configuration options
• cssLoader: css-loader configuration options
• lessLoader: less-loader configuration options
• styleResourcesLoader: Global style resources auto-injection configuration
• swcLoader: SWC loader configuration options
• definePlugin: Global constant definitions
• target: Build target compatibility configuration

#Function Exports

#createRspackApp

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

Create a standard Rspack application instance.

Parameters:

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

Returns:

• Returns a Promise that resolves to the created application instance

#createRspackHtmlApp

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

Create an HTML-type Rspack application instance.

Parameters:

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

Returns:

• Returns a Promise that resolves to the created HTML application instance

#Constant Exports

#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 built-in loader identifier mapping object that provides commonly used loader name constants:

• builtinSwcLoader: Rspack built-in SWC loader, for processing TypeScript/JavaScript files
• lightningcssLoader: Rspack built-in LightningCSS loader, a high-performance compiler for processing 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 to CSS
• styleResourcesLoader: Loader for automatically importing global style resources (variables, mixins, etc.)
• workerRspackLoader: Loader for processing Web Worker files

Using these constants can reference built-in loaders in configuration, avoiding manual string input:

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

export default {
  async devApp(esmx) {
    return import('@esmx/rspack').then((m) =>
      m.createRspackHtmlApp(esmx, {
        loaders: {
          // Use constants to reference loaders
          styleLoader: RSPACK_LOADER.styleLoader,
          cssLoader: RSPACK_LOADER.cssLoader,
          lightningcssLoader: RSPACK_LOADER.lightningcssLoader
        }
      })
    );
  }
};

Notes:

• These loaders are already built into Rspack, no additional installation needed
• When customizing loader configuration, you can use these constants to replace default loader implementations
• Some loaders (like builtinSwcLoader) have specific configuration options, please refer to the corresponding configuration documentation

#Module Exports

#rspack

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