DOCSEARCHbyAlgolia
Submit Docs

Rsbuild Documentation

website·Indexed 34 days ago

https://rsbuild.rs

A modern build tool for web applications powered by Rspack. Rsbuild provides fast builds and optimized production bundles with native support for TypeScript, WebAssembly, and various UI frameworks including React, Vue, Preact, Svelte, and Solid. It features a built-in dev server, Hot Module Replacement (HMR), and integration with CSS tools like Tailwind CSS v3/v4 and UnoCSS.

Tokens
123K
Snippets
832
Records
982
Agent score
71%

What's inside Rsbuild

  1. Overview of Rspress and Modern.js

    Rspress is a fast static site generator based on Rsbuild. Modern.js is an open-source web engineering system from ByteDance providing various solutions for different development scenarios.

  3. Overview of Rspack

    Rspack is a high-performance JavaScript bundler written in Rust. It is designed to be a seamless, faster replacement for webpack by maintaining strong compatibility with the webpack ecosystem.

  4. Overview of Rsbuild build tool

    Rsbuild is an Rspack-based build tool designed as an enhanced CLI for Rspack. It aims to simplify the migration from webpack to Rspack by reducing configuration by approximately 90% while providing significantly faster build speeds. It is framework-agnostic and supports React, Vue, Svelte, Solid, and Preact via plugins. Key technical integrations include Rspack, SWC, and Lightning CSS for high-performance builds.

  5. Overview of Module Federation in Rsbuild

    Module Federation is an architectural pattern that allows multiple JavaScript applications (micro-frontends) to share code and resources at runtime without recompiling the entire application. It is used to reduce code duplication, improve maintainability, and optimize application performance by enabling independent teams to work on different parts of a large-scale application.

  6. Overview of Rsbuild plugin hooks

    Rsbuild provides a variety of hooks to customize the build process. These are categorized by their execution context:

    Common Hooks (General purpose):

    • modifyRsbuildConfig: Modify the base Rsbuild configuration.
    • modifyEnvironmentConfig: Modify configuration for a specific environment.
    • modifyRspackConfig: Modify the Rspack configuration.
    • modifyBundlerChain: Modify Rspack config via the Chain API.
    • modifyHTMLTags: Modify injected HTML tags.
    • modifyHTML: Modify final HTML content.
    • onBeforeCreateCompiler / onAfterCreateCompiler: Hooks around compiler instance creation.
    • onBeforeEnvironmentCompile / onAfterEnvironmentCompile: Hooks around a single environment's compilation.
    • onRestart: Triggered on dev server or watch build restart.
    • onExit: Triggered before the process exits.

    Dev Hooks (Triggered by rsbuild dev or rsbuild.startDevServer()):

    • onBeforeStartDevServer / onAfterStartDevServer: Hooks around dev server startup.
    • onBeforeDevCompile / onAfterDevCompile: Hooks around each development build.
    • onCloseDevServer: Triggered when the dev server closes.

    Build Hooks (Triggered by rsbuild build or rsbuild.build()):

    • onBeforeBuild / onAfterBuild: Hooks around the production build.
    • onCloseBuild: Triggered when the build closes.

    Preview Hooks (Triggered by rsbuild preview or rsbuild.preview()):

    • onBeforeStartPreviewServer / onAfterStartPreviewServer: Hooks around the preview server startup.

  7. Overview of Rsbuild

    Rsbuild is a high-performance build tool powered by Rspack. It is designed to provide a "batteries-included" experience with out-of-the-box integration of common build features. It is framework-agnostic, supporting React, Vue, Svelte, and others, and focuses on deep static asset optimization for production performance. It features a lightweight plugin system and supports a zero-config start while remaining fully configurable.

  8. Overview of Rsbuild

    Rsbuild is a modern, TypeScript-friendly build tool built on top of Rspack. It is designed to provide the ease of use found in tools like Create React App (CRA) and Vue CLI while leveraging Rspack's Rust-based performance. It is primarily targeted at Client-Side Rendering (CSR) applications and serves two main roles: as a lightweight build tool for quick application setup and as a shared infrastructure for other frameworks via its JavaScript and Plugin APIs.

  9. Overview of the Rstack toolchain

    Rstack is a fast, unified JavaScript toolchain designed for developers and agents. It consists of several specialized tools:

    • Rspack: A fast Rust-based bundler for the web with a modernized webpack API.
    • Rsbuild: A fast, extensible build tool for modern web development, powered by Rspack.
    • Rslib: An Rsbuild-based library development tool for creating libraries and UI components.
    • Rspress: An Rsbuild-based static site generator for creating documentation sites.
    • Rsdoctor: An AI-friendly build analyzer that makes the build process transparent.
    • Rstest: A JavaScript testing framework powered by Rspack with a Jest-compatible API.
    • Rslint: A high-performance, ESLint-compatible linter for JavaScript and TypeScript.

  10. Overview of Rsbuild CLI commands

    Rsbuild provides a lightweight CLI for development, production building, and configuration inspection. To view all available commands in your project directory, run npx rsbuild -h.
    # Start the dev server
rsbuild dev

# Build the app for production
rsbuild build

# Preview the production build locally
rsbuild preview

# Inspect Rspack and Rsbuild configurations
rsbuild inspect

  11. Overview of Rsbuild

    Rsbuild is a modern, framework-agnostic build tool for web applications powered by Rspack. It is designed to provide fast builds and optimized production output with a simple, consistent, and extensible configuration system. It integrates Rust-based tools including Rspack, SWC, and Lightning CSS to maximize performance.

  12. Access and use the Environment Context

    The 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 parameter) or via the Environment API using environments[name].context.
    type EnvironmentContext = {
  index: number; // Zero-based index of the environment
  name: string; // Unique name (corresponds to key in environments config)
  browserslist: string[]; // Browserslist configuration
  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
  manifest?: Record<string, unknown> | ManifestData; // Manifest data (if output.manifest is enabled)
  webSocketToken: string; // WebSocket auth token for dev server (empty in non-dev actions)
};