DOCSEARCHbyAlgolia
Submit Docs

Rsbuild Documentation

repository·main·Indexed 25 days ago

https://github.com/web-infra-dev/rsbuild

A high-performance, extensible build tool for web applications powered by Rspack. It provides a fast development experience with minimal configuration and supports various frameworks and tools through plugins such as @rsbuild/plugin-react, @rsbuild/plugin-vue, @rsbuild/plugin-svelte, @rsbuild/plugin-solid, @rsbuild/plugin-preact, @rsbuild/plugin-babel, @rsbuild/plugin-sass, @rsbuild/plugin-less, @rsbuild/plugin-tailwindcss, and @rsbuild/plugin-svgr.

Tokens
237.1K
Snippets
1.1K
Records
1.4K
Agent score
83%

What's inside Rsbuild

  2. Overview of Rsbuild

    main
    Rsbuild is an Rspack-based build tool designed as an enhanced CLI that provides a more user-friendly and out-of-the-box experience compared to raw Rspack. It is intended as a high-performance alternative for developers migrating from webpack to Rspack, offering significantly reduced configuration overhead and faster build speeds.

  4. Overview of Rsbuild Plugin Hooks

    main
    Rsbuild plugins can tap into various stages of the build lifecycle using hooks. Hooks are categorized into Common hooks (available across different contexts), Dev hooks (specific to rsbuild dev or rsbuild.startDevServer()), Build hooks (specific to rsbuild build or rsbuild.build()), and Preview hooks (specific to rsbuild preview or rsbuild.preview()).

  6. Overview of Rsbuild

    main

    Rsbuild is a modern Web application build tool powered by Rspack. It provides a fast build experience and highly optimized build artifacts while maintaining simple, consistent configuration.

    Key features include:

    • Easy Configuration: Provides out-of-the-box build capabilities for Rspack users with semantic configuration to reduce learning costs.
    • Performance First: Integrates high-performance Rust-based tools like Rspack, SWC, and Lightning CSS.
    • Plugin Ecosystem: Features a lightweight plugin system with official plugins and compatibility with most webpack and all Rspack plugins.
    • Stable Artifacts: Ensures consistency between development and production builds, with automatic syntax downgrading and polyfill injection.
    • Framework Agnostic: Supports various UI frameworks (React, Vue, Svelte, Solid, Preact, etc.) via plugins.

  7. Key Features of Rsbuild

    main

    Rsbuild provides several core capabilities for modern web development:

    • Easy Configuration: Offers out-of-the-box build capabilities with zero configuration and a semantic build configuration API to simplify the Rspack learning curve.
    • Performance-focused: Integrates high-performance Rust-based tools including Rspack, SWC, and Lightning CSS.
    • Plugin Ecosystem: Features a lightweight plugin system. It is compatible with most webpack plugins and all Rspack plugins.
    • Stable Artifacts: Ensures consistent artifacts between development and production. It handles syntax downgrading and polyfill injection automatically and provides plugins for type checking and syntax validation.
    • Framework Agnostic: Supports various UI frameworks (React, Vue, Svelte, Solid, Preact) through a plugin system.

  8. HTML features in Rsbuild

    main

    Rsbuild allows for extensive customization of the generated HTML:

    Default Configuration Options:

    • Set title: Configure the HTML <title> tag via html.title.
    • Set meta: Configure HTML <meta> tags via html.meta.
    • Set favicon: Set the page icon via html.favicon.
    • Set app icon: Set web application icons via html.appIcon.

    Optional Features & Plugins:

    • Template Engines: Use EJS (built-in) or Pug (via rsbuild-plugin-pug) as template engines.
    • Inlining: Inline JS files into HTML via output.inlineScripts or inline CSS files via output.inlineStyles.

  12. JavaScript features in Rsbuild

    main

    Rsbuild provides a comprehensive set of JavaScript and TypeScript features out of the box or via plugins:

    Default Features:

    • Rspack: Uses Rspack as the bundler by default.
    • SWC compilation: Transforms and minifies JavaScript and TypeScript code using SWC.
    • TypeScript compilation: TypeScript files are compiled using SWC.
    • Code minification: Enabled by default in production mode (output.minify).
    • SourceMap generation: Generated in development mode by default (output.sourceMap).
    • JSON import: JSON files can be imported by default.

    Optional Features & Plugins:

    • Polyfills: Inject core-js and other polyfills via output.polyfill.
    • Alias: Set import aliases using resolve.alias.
    • Babel: Use Babel for transformations via @rsbuild/plugin-babel.
    • Node.js targets: Build bundles for Node.js using output.target.nodeTarget.
    • Web Workers: Support for Web Workers.
    • Glob import: Support for import.meta.glob.
    • Browserslist: Specify target browsers via Browserslist.
    • Compatibility check: Scan outputs for unsupported syntax using @rsbuild/plugin-check-syntax.
    • Environment variables: Inject variables or expressions into code.
    • Node polyfills: Inject Node core module polyfills for browsers via rsbuild-plugin-node-polyfill.
    • Type checking: Run type checkers for code issues.
    • Module Federation: Dynamically load modules and share dependencies.