Rspack

Rspack is a high-performance JavaScript bundler written in Rust, designed as a drop-in replacement for webpack. It is compatible with the vast majority of the webpack ecosystem — loaders, plugins, and configuration — while being 5–10× faster thanks to its Rust core and parallel compilation architecture.

It was built by ByteDance (the company behind TikTok) to solve real-world build performance problems in massive JavaScript codebases, and is now open source and widely used beyond its origins.

Features

• webpack compatible — reads webpack.config.js files and supports the most commonly used loaders (babel-loader, css-loader, sass-loader, etc.) and plugins (HtmlWebpackPlugin, MiniCssExtractPlugin, etc.) without modification
• 5–10× faster than webpack — Rust-native parallel compilation dramatically reduces cold build times; incremental rebuilds are near-instant
• Built-in support for common patterns — TypeScript, JSX, CSS Modules, asset handling, and tree shaking all work out of the box with zero configuration
• Module Federation — first-class support for Module Federation 1.x and 2.0 for micro-frontend architectures
• Dev server — built-in dev server with Hot Module Replacement (HMR)
• Rsbuild — a higher-level build tool built on top of Rspack, providing a batteries-included experience similar to Vite

Installation

# npm
npm install --save-dev @rspack/cli @rspack/core

# pnpm
pnpm add -D @rspack/cli @rspack/core

# yarn
yarn add -D @rspack/cli @rspack/core

# Debian / Ubuntu / Fedora
# Rspack is distributed as an npm package and works on all Linux distributions.
# Install Node.js via your package manager, then run:
npm install --save-dev @rspack/cli @rspack/core

Quick Start

# Create a new project with Rsbuild (recommended for new projects)
npx create-rsbuild@latest

# Or use Rspack directly
npx create-rspack@latest

Usage

# Build for production
npx rspack build

# Start the dev server
npx rspack serve

# Build with a specific config file
npx rspack build --config rspack.prod.config.js

# Watch mode
npx rspack build --watch

Configuration

Rspack uses the same configuration format as webpack. A minimal rspack.config.js:

const { defineConfig } = require("@rspack/cli");

module.exports = defineConfig({
  entry: {
    main: "./src/index.js",
  },
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "builtin:swc-loader", // Rspack's built-in SWC loader — no babel needed
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: "./index.html",
    }),
  ],
});

Migrating from webpack

For most projects, migration from webpack to Rspack is straightforward:

1. Replace webpack and webpack-cli with @rspack/core and @rspack/cli
2. Rename webpack.config.js to rspack.config.js (optional — Rspack also reads webpack.config.js)
3. Replace webpack imports in config with @rspack/core
4. Use builtin:swc-loader instead of babel-loader for TypeScript/JSX for maximum speed

The official migration guide covers the handful of incompatibilities in detail.

Rspack vs Vite

Rspack and Vite solve different problems. Vite uses native ES modules in development (no bundling, very fast dev server startup) but still uses Rollup for production builds. Rspack bundles everything in both dev and production, which means slightly slower dev startup but more consistent behaviour between environments and better compatibility with large CommonJS codebases that don't work well with Vite's ESM-first approach.