Overview

Rspack is a Rust-based JavaScript bundler fully compatible with webpack — same config format, same loaders, same plugins, 5-10x faster builds. Created by ByteDance, it's a drop-in webpack replacement: rename your config file, install Rspack, and your existing webpack project builds in a fraction of the time. No config rewrite, no loader migration, no plugin hunting.

When to Use

Webpack builds taking too long (>30 seconds)
Want faster builds without rewriting config (unlike Vite migration)
Large enterprise projects with heavy webpack configs
Need webpack compatibility (loaders, plugins, config) with better performance
Migration from Create React App or webpack-based setups

Instructions

New Project

bash

npm create rspack@latest my-app
cd my-app
npm start

Migrate from Webpack

bash

# Install Rspack
npm install -D @rspack/core @rspack/cli

# Remove webpack
npm uninstall webpack webpack-cli webpack-dev-server

javascript

// rspack.config.js — Almost identical to webpack.config.js
const { defineConfig } = require("@rspack/cli");
const { HtmlRspackPlugin } = require("@rspack/core");

module.exports = defineConfig({
  entry: "./src/index.tsx",
  output: {
    path: "./dist",
    filename: "[name].[contenthash].js",
    clean: true,
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"],
    alias: { "@": "./src" },
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: {
          loader: "builtin:swc-loader",  // Built-in SWC — no babel needed
          options: {
            jsc: {
              parser: { syntax: "typescript", tsx: true },
              transform: { react: { runtime: "automatic" } },
            },
          },
        },
      },
      {
        test: /\.css$/,
        type: "css",  // Built-in CSS support
      },
      {
        test: /\.module\.css$/,
        type: "css/module",  // CSS Modules built-in
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        type: "asset",  // Built-in asset handling
      },
    ],
  },
  plugins: [
    new HtmlRspackPlugin({ template: "./index.html" }),
  ],
  devServer: {
    port: 3000,
    hot: true,
  },
});

Key Differences from Webpack

javascript

// What's built-in (no extra loaders/plugins needed):
// ✅ TypeScript/JSX via SWC — builtin:swc-loader
// ✅ CSS/CSS Modules — type: "css" / "css/module"
// ✅ Asset handling — type: "asset"
// ✅ HTML generation — HtmlRspackPlugin
// ✅ Code splitting — same as webpack
// ✅ Tree shaking — built-in
// ✅ Hot Module Replacement — built-in

// What still uses webpack loaders:
// ✅ sass-loader, less-loader — work as-is
// ✅ postcss-loader — works as-is
// ✅ Most webpack loaders — compatible

With React and Tailwind

javascript

// rspack.config.js — React + Tailwind CSS project
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: {
          loader: "builtin:swc-loader",
          options: {
            jsc: {
              parser: { syntax: "typescript", tsx: true },
              transform: { react: { runtime: "automatic" } },
            },
          },
        },
      },
      {
        test: /\.css$/,
        use: ["postcss-loader"],  // PostCSS processes Tailwind
        type: "css",
      },
    ],
  },
};

Examples

Example 1: Migrate a webpack project to Rspack

User prompt: "Our webpack build takes 60 seconds. Speed it up without rewriting the config."

The agent will install Rspack, adapt the existing webpack.config.js (minimal changes), replace babel-loader with builtin:swc-loader, and benchmark the improvement.

Example 2: Set up a new React project with Rspack

User prompt: "Create a new React + TypeScript project with fast builds."

The agent will scaffold an Rspack project with SWC for TypeScript/JSX, CSS Modules, asset handling, and dev server with HMR.

Guidelines

Drop-in webpack replacement — same config format, most loaders work
builtin:swc-loader — replaces babel-loader, 20x faster transpilation
type: "css" — no css-loader/style-loader needed
type: "asset" — no file-loader/url-loader needed
Most webpack plugins work — check @rspack/compat for compatibility layer
HMR is built-in — faster than webpack's HMR
Tree shaking built-in — no extra config needed
5-10x faster — Rust parallelism beats single-threaded JS
Production-ready — used by ByteDance at scale
@rspack/cli — provides rspack serve and rspack build commands

rspack

Usage

Getting Started

Example Prompts

Documentation

Overview

When to Use

Instructions

New Project

Migrate from Webpack

Key Differences from Webpack

With React and Tailwind

Examples

Example 1: Migrate a webpack project to Rspack

Example 2: Set up a new React project with Rspack

Guidelines

Information