rspack

What this skill does

# Rspack

## 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