# Rspack — A Fast Rust-Based Webpack-Compatible Bundler

> Rspack is a Rust-powered drop-in replacement for webpack. It implements the webpack loader and plugin API natively, giving webpack shops 5–10x faster builds without rewriting configuration or tooling.

## Install

Save in your project root:

# Rspack — Rust-Based Webpack-Compatible Bundler

## Quick Use
```bash
npm create rspack@latest myapp
cd myapp
npm run dev
```

```js
// rspack.config.js  (same shape as webpack.config.js)
module.exports = {
  entry: "./src/index.ts",
  output: { path: __dirname + "/dist", filename: "bundle.js" },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "builtin:swc-loader", options: { jsc: { parser: { syntax: "typescript" } } } },
    ],
  },
};
```

## Introduction
Rspack, built by ByteDance's Web Infrastructure team, rewrites webpack in Rust while preserving its API surface. Existing webpack configs, loaders, and plugins mostly run unchanged — just faster. For teams with large webpack codebases, Rspack is the path to modern speed without rewriting build pipelines.

With over 13,000 GitHub stars, Rspack powers TikTok's web, internal ByteDance tools, and a growing number of Modern.js and Rsbuild projects. Production-proven at massive scale.

## What Rspack Does
Rspack implements webpack's module federation, splitChunks, HMR, loaders, and plugin hooks natively in Rust. It uses SWC for JS transformation (or now Oxc integration) and Oxc-based resolvers. Your webpack.config.js becomes rspack.config.js with minimal changes.

## Architecture Overview
```
rspack.config.js  (webpack-compatible)
    |
[Rspack Core (Rust)]
  Module Graph builder
  Loader runner (runs JS loaders)
  Plugin system (runs JS and Rust plugins)
  Chunk graph + code splitting
  Module Federation
  HMR runtime
    |
[Built-in Rust loaders/plugins]
  builtin:swc-loader, builtin:lightningcss-loader,
  CopyRspackPlugin, HtmlRspackPlugin, ...
    |
Output: webpack-shaped bundles (same asset graph)
```

## Self-Hosting & Configuration
```js
// Incrementally migrate from webpack
const { CopyRspackPlugin, HtmlRspackPlugin } = require("@rspack/core");

module.exports = {
  entry: "./src/index.tsx",
  resolve: { extensions: [".ts", ".tsx", ".js"] },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "builtin:swc-loader", options: {
          jsc: { parser: { syntax: "typescript", tsx: true }, transform: { react: { runtime: "automatic" } } },
      } },
      { test: /\.css$/, type: "css" },    // built-in CSS support
    ],
  },
  plugins: [
    new HtmlRspackPlugin({ template: "./public/index.html" }),
    new CopyRspackPlugin({ patterns: [{ from: "public", to: "." }] }),
  ],
  optimization: { splitChunks: { chunks: "all" } },
};
```

## Key Features
- **webpack API compatibility** — config, loaders, plugins mostly drop in
- **Rust-native speed** — 5–10x faster build, fast HMR (<100ms updates)
- **Module Federation** — first-class support, compatible with webpack MF
- **Built-in loaders** — swc-loader, lightningcss-loader, asset modules
- **Rust plugins** — performance-critical plugins run without JS overhead
- **Incremental adoption** — migrate one project at a time
- **Rsbuild** — opinionated build tool on top of Rspack for quick starts
- **Used in production** — TikTok, Lark, and major ByteDance products

## Comparison with Similar Tools
| Feature | Rspack | webpack | Turbopack | Vite (Rolldown) | Parcel |
|---|---|---|---|---|---|
| Language | Rust | JS | Rust | Rust (upcoming) | Rust (parser) + JS |
| Plugin API | webpack-compat | webpack | Custom (Next) | Rollup | Parcel |
| Speed | Very fast | Slow | Very fast | Very fast | Fast |
| Module Federation | Yes | Yes | Partial | No | No |
| HMR | Very fast | Slow | Very fast | Very fast | Fast |
| Best For | Migrating from webpack | Legacy | Next.js | Modern Vue/React | Zero-config |

## FAQ
**Q: Rspack vs Vite — when should I pick Rspack?**
A: Choose Rspack if you already have a large webpack config and want near-drop-in migration. Choose Vite for new projects or when you value Vite's simpler DX.

**Q: Will my webpack plugin work?**
A: Most popular plugins (CopyPlugin, HtmlPlugin, MiniCssExtract) have Rspack equivalents or native Rust replacements. Custom plugins using stable webpack hooks usually work unchanged.

**Q: What is Rsbuild?**
A: Rsbuild is an opinionated build tool on top of Rspack — similar to how Vue CLI wraps webpack. It provides zero-config defaults for React, Vue, and vanilla JS.

**Q: Is Rspack production ready?**
A: Yes. v1.0 shipped in 2024 and it's in daily use at ByteDance and many other companies.

## Sources
- GitHub: https://github.com/web-infra-dev/rspack
- Docs: https://rspack.dev
- Company: ByteDance
- License: MIT

---
Source: https://tokrepo.com/en/workflows/dcc11c87-37be-11f1-9bc6-00163e2b0d79
Author: AI Open Source