HOW TO GUIDES March 10, 2026, 5:30 a.m.

Rspack: Webpack Replacement Written in Rust

If you’ve been wrestling with long build times in large JavaScript projects, you’re not alone. Webpack has been the go‑to bundler for years, but its JavaScript‑based core can become a bottleneck as codebases scale. Enter Rspack – a drop‑in Webpack replacement written in Rust that promises lightning‑fast builds without sacrificing the familiar configuration API.

What Is Rspack?

Rspack is an open‑source bundler that mirrors Webpack’s plugin and loader ecosystem while leveraging Rust’s performance characteristics. By compiling the core to native code, Rspack reduces CPU overhead, memory usage, and, most importantly, the time spent parsing and transforming modules.

Despite the language shift under the hood, developers interact with Rspack using the same webpack.config.js syntax they already know. This means you can adopt Rspack incrementally—swap out the CLI command, keep your existing plugins, and watch the speed gains immediately.

Key Design Goals

Compatibility: Full support for Webpack 5 configuration, plugins, and loaders.
Speed: Rust’s zero‑cost abstractions and parallelism cut build times by up to 70% in benchmark tests.
Developer Experience: Clear error messages, fast hot module replacement (HMR), and built‑in TypeScript support.

Why Rust Makes a Difference

Rust is known for its memory safety guarantees and ability to produce highly optimized binaries. When you compile a bundler to native code, you eliminate the overhead of the V8 engine that runs JavaScript‑based tools. The result is a tighter control over thread pools, file I/O, and CPU‑intensive tasks like module graph traversal.

Moreover, Rust’s ownership model prevents many classes of bugs that can cause flaky builds. Rspack can safely parallelize loader execution and cache invalidation without risking data races, something that’s trickier to achieve in pure JavaScript.

Performance Highlights

Cold start builds for a 1.2 GB React monorepo drop from ~45 s (Webpack) to ~15 s (Rspack).
Incremental rebuilds after a single file change shrink from ~2 s to <0.5 s.
Memory footprint during builds reduces by roughly 30%, freeing resources for other development tasks.

Pro tip: Pair Rspack with a solid SSD and enable Rust’s RUSTFLAGS="-C target-cpu=native" for the absolute fastest native execution.

Getting Started with Rspack

Installation is a one‑liner with npm or yarn. Rspack ships as a binary, so you don’t need a Rust toolchain on the target machine.

# Using npm
npm install -D @rspack/core @rspack/cli

# Using yarn
yarn add -D @rspack/core @rspack/cli

Once installed, replace the typical Webpack CLI call in your package.json scripts:

{
  "scripts": {
    "build": "rspack build",
    "dev": "rspack serve"
  }
}

If you already have a webpack.config.js, you can keep it unchanged. Rspack will read the file automatically. For new projects, you can scaffold a minimal config to get a feel for the workflow.

Minimal Configuration Example

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: './dist',
    hot: true
  }
};

This config works verbatim with Rspack. Run npm run dev and you’ll see a development server with HMR up and running in milliseconds.

Practical Example 1: Bundling a Simple React App

Let’s walk through a real‑world scenario: a small React application that uses JSX, CSS modules, and image assets. The goal is to demonstrate that Rspack handles the same loader chain as Webpack.

First, install the required loaders and React dependencies.

npm install react react-dom
npm install -D @babel/core @babel/preset-react babel-loader
npm install -D css-loader style-loader
npm install -D file-loader

Now, extend the configuration to include Babel, CSS, and file handling.

const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.jsx',
  output: {
    filename: 'app.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource' // Rspack supports Webpack 5 asset modules
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

Notice the use of type: 'asset/resource' – Rspack treats it exactly like Webpack 5. Run npm run build and you’ll see a dist folder with hashed JavaScript, CSS injected at runtime, and image files emitted to dist.

Pro tip: Enable cache: { type: 'filesystem' } in the config to let Rspack persist module cache between runs, shaving seconds off subsequent builds.

Practical Example 2: Advanced Asset Pipeline with TypeScript and SCSS

Large applications often combine TypeScript, SCSS, and custom plugins. Below is a more sophisticated setup that showcases Rspack’s ability to handle these assets while still delivering fast builds.

First, install the extra tooling.

npm install -D typescript ts-loader
npm install -D sass sass-loader css-loader style-loader
npm install -D mini-css-extract-plugin
npm install -D @rspack/plugin-html

Next, create a tsconfig.json for TypeScript compilation.

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

Now, the Rspack configuration:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlPlugin = require('@rspack/plugin-html');

module.exports = {
  mode: 'development',
  entry: './src/main.tsx',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'build')
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)$/,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    }),
    new HtmlPlugin({
      template: './public/index.html',
      inject: 'body'
    })
  ],
  devServer: {
    static: './build',
    hot: true,
    open: true
  }
};

This config does a few things:

Compiles TypeScript with ts-loader (which Rspack runs in parallel threads).
Extracts SCSS into separate CSS files for production, while still supporting HMR in development.
Generates an HTML entry point via @rspack/plugin-html, mirroring Webpack’s HtmlWebpackPlugin.

Run npm run dev and notice the near‑instant rebuilds when editing a .tsx or .scss file. The compiled bundle updates without a full page reload, thanks to Rspack’s optimized HMR pipeline.

Pro tip: For monorepos, set cacheDirectory: path.resolve(__dirname, '.rspack-cache') to share cache across packages and avoid duplicate work.

Real‑World Use Cases

Many companies have already migrated parts of their build pipelines to Rspack. Below are three common scenarios where the switch yields measurable benefits.

1. Large‑Scale Enterprise Dashboards

Enterprise dashboards often bundle hundreds of micro‑frontends, each with its own dependencies. Rspack’s parallel loader execution reduces the total build time from minutes to seconds, allowing developers to iterate faster during sprint cycles.

2. CI/CD Pipelines with Limited Resources

Continuous integration environments typically allocate modest CPU and memory. By cutting memory usage, Rspack enables more concurrent builds on the same runner, decreasing overall pipeline duration and cost.

3. Edge‑Optimized Deployments

When deploying to edge networks (e.g., Cloudflare Workers), bundle size and initialization speed are critical. Rspack’s aggressive tree‑shaking and deterministic hashing produce smaller, cache‑friendly assets that load faster at the edge.

Performance Benchmarks

Below is a distilled comparison from the official Rspack benchmark suite, measured on a 12‑core Intel i7 machine with an NVMe SSD.

Project	Webpack (s)	Rspack (s)	Speed‑up
React SPA (150 k LOC)	38.2	12.4	3.1×
Vue SSR (200 k LOC)	45.7	15.9	2.9×
Angular Enterprise (300 k LOC)	62.1	21.8	2.8×

Note that incremental rebuilds after a single file change show an even larger gap—Webpack averages 2.3 s while Rspack stays under 0.6 s. These numbers translate directly into developer productivity gains.

Pro Tips for Mastering Rspack

🔧 Leverage Rust’s Parallelism – Rspack automatically distributes loader work across all CPU cores. To maximize this, avoid synchronous plugins that block the event loop; prefer async hooks whenever possible.

🗂️ Modularize Configurations – Split large configs into environment‑specific files (e.g., webpack.dev.js, webpack.prod.js) and merge them with webpack-merge. Rspack respects the same merging strategy, keeping your codebase clean.

🔄 Enable Persistent Caching – Add the following snippet to your config to store cache on disk, dramatically speeding up cold starts:

module.exports = {
  // ...other config
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  }
};

⚡ Profile Build Steps – Use the built‑in --profile flag (rspack build --profile) to generate a stats.json file. Visualize it with tools like webpack-bundle-analyzer to pinpoint slow loaders or oversized chunks.

Migration Checklist

Switching an existing project from Webpack to Rspack is straightforward, but a systematic approach avoids surprises.

Backup Config: Commit your current webpack.config.js and lock the Webpack version.
Install Rspack Packages: Run the npm install command shown earlier.
Replace CLI Calls: Update package.json scripts from webpack to rspack.
Run a Dry Build: Execute npm run build and compare the output directory.
Validate Plugins: Ensure any custom plugins implement the same hooks; most official plugins work out‑of‑the‑box.
Enable Caching & Profiling: Turn on filesystem cache and generate a profile report for fine‑tuning.
Update CI Scripts: Replace any global webpack installations with rspack in CI pipelines.

After completing these steps, you should see a noticeable reduction in both local development build times and CI build durations.

Future Roadmap

The Rspack team is actively extending compatibility with emerging Webpack features. Upcoming milestones include native support for Module Federation, improved tree‑shaking for ESM‑only packages, and first‑class integration with Vite’s dev server protocol.

Community contributions are encouraged—especially for plugins that need Rust bindings. The project’s GitHub repository provides a clear CONTRIBUTING guide, and the maintainers are responsive to pull requests that enhance performance or add missing Webpack features.

Conclusion

Rspack offers a compelling path forward for developers stuck with sluggish Webpack builds. By delivering a familiar configuration surface while harnessing Rust’s speed, it bridges the gap between developer ergonomics and production‑grade performance.

Whether you’re optimizing a monolithic enterprise dashboard, shaving seconds off CI pipelines, or simply craving a snappier local dev experience, Rspack’s drop‑in compatibility makes adoption low‑risk and high‑reward. Give it a try on a small module, measure the gains, and then roll it out incrementally—your future self (and your CI server) will thank you.

Share this article