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
npm create rspack@latest my-app
cd my-app
npm start
Migrate from Webpack
# Install Rspack
npm install -D @rspack/core @rspack/cli
# Remove webpack
npm uninstall webpack webpack-cli webpack-dev-server
// 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
// 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
// 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 transpilationtype: "css"— no css-loader/style-loader neededtype: "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— providesrspack serveandrspack buildcommands