website·Indexed 34 days ago
https://v1.rsbuild.rsA high-performance build tool powered by Rspack. It provides out-of-the-box support for TypeScript, CSS, HTML, and WebAssembly, with dedicated integration for frameworks like React, Vue, Preact, Svelte, and Solid. Rsbuild includes a built-in dev server, support for Module Federation, Server-Side Rendering (SSR), and advanced optimization features such as code splitting and Hot Module Replacement (HMR).
dev for development, build for production, preview for local testing of production builds, and inspect for debugging configurations.# View all available commands
npx rsbuild -hrsbuild dev or rsbuild preview. It provides essential development features including page preview, routing, and Hot Module Replacement (HMR).Rsbuild provides a variety of plugin hooks categorized by their execution context. These hooks allow developers to modify configurations, intercept the build process, and manage server lifecycles.
Common Hooks: Used for general configuration and lifecycle events (e.g., modifyRsbuildConfig, modifyRspackConfig, onExit).
Dev Hooks: Triggered during rsbuild dev or rsbuild.startDevServer() (e.g., onBeforeStartDevServer, onAfterDevCompile).
Build Hooks: Triggered during rsbuild build or rsbuild.build() (e.g., onBeforeBuild, onAfterBuild).
Preview Hooks: Triggered during rsbuild preview or rsbuild.preview() (e.g., onBeforeStartProdServer).
lightningcss-loader by default to transform CSS. It automatically reads the project's browserslist configuration to provide vendor prefixing (e.g., -webkit-, -moz-) and downgrades modern CSS syntax (like nesting and custom media queries) for browser compatibility. Customization is available via the tools.lightningcssLoader option.To capture a performance profile of the Rspack core, set the RSPACK_PROFILE environment variable to OVERVIEW.
After the process finishes, Rsbuild creates a folder named .rspack-profile-${timestamp}-${pid} containing a rspack.pftrace file (or trace.json in versions < 1.4.0). This file can be uploaded and viewed at ui.perfetto.dev.
{
"scripts": {
"dev:profile": "cross-env RSPACK_PROFILE=OVERVIEW rsbuild dev",
"build:profile": "cross-env RSPACK_PROFILE=OVERVIEW rsbuild build"
},
"devDependencies": {
"cross-env": "^7.0.0"
}
}tools.cssExtract.pluginOptions to pass configuration to the CssExtractRspackPlugin. Common options include ignoreOrder to disable warnings about conflicting CSS order, and filename/chunkFilename to define the output paths for CSS files. By default, Rsbuild sets ignoreOrder: true and derives filenames from output.distPath and output.filename.export default {
tools: {
cssExtract: {
pluginOptions: {
ignoreOrder: false,
filename: 'static/css/[name].css',
chunkFilename: 'static/css/async/[name].css',
},
},
},
};Rsbuild uses Lightning CSS by default to downgrade CSS syntax. It supports several styling workflows:
*.module.* are compiled as CSS Modules by default. Type definitions can be generated using rsbuild-plugin-typed-css-modules.output.injectStyles.tools.postcss.EnvironmentContext is a read-only object providing metadata about a specific build environment. It can be accessed via Rsbuild Plugin hooks (through the environment or environments parameters) or via the Environment API using environments.context.type EnvironmentContext = {
name: string; // Unique name of the environment (corresponds to config key)
browserslist: string[]; // Browserslist configuration for this environment
config: NormalizedEnvironmentConfig; // Normalized Rsbuild config for this environment
distPath: string; // Absolute path of the output directory
entry: RsbuildEntry; // Entry object from source.entry
htmlPaths: Record<string, string>; // Map of entry names to relative HTML paths in dist
tsconfigPath?: string; // Absolute path to tsconfig.json, if it exists
manifest?: Record<string, unknown> | ManifestData; // Manifest data (requires output.manifest enabled)
webSocketToken: string; // WebSocket auth token (dev mode only, empty in production)
};