Imported from terminalskills/skills (skills/rspack/SKILL.md). Install upstream with npx skills add terminalskills/skills --skill rspack. Copyright stays with the author (Apache-2.0).

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

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