Rspack Has a Free API — Webpack-Compatible Bundler Written in Rust

#javascript #webpack #webdev #tutorial

Rspack is a drop-in webpack replacement written in Rust. It's 5-10x faster than webpack while keeping full compatibility with webpack plugins and loaders.

Why Rspack?

5-10x faster than webpack
Webpack-compatible — use existing webpack.config.js, plugins, loaders
Built-in — CSS, TypeScript, JSX, asset processing — no extra loaders needed
HMR — instant hot module replacement

Quick Start

npm create rspack@latest myapp
cd myapp
npm install
npm run dev

Configuration (webpack-compatible)

// rspack.config.js
module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: '[name].[contenthash].js',
    path: './dist',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: { syntax: 'typescript', tsx: true },
            transform: { react: { runtime: 'automatic' } },
          },
        },
      },
      {
        test: /\.css$/,
        type: 'css', // Built-in CSS support!
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset',
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({ template: './index.html' }),
  ],
  devServer: {
    port: 3000,
    hot: true,
  },
};

Migrating from webpack

# 1. Install
npm install -D @rspack/core @rspack/cli

# 2. Rename (optional — rspack reads webpack.config.js too)
mv webpack.config.js rspack.config.js

# 3. Replace built-in features
# Remove: ts-loader, css-loader, style-loader, file-loader, url-loader
# Use: builtin:swc-loader, type: 'css', type: 'asset'

# 4. Run
npx rspack build
npx rspack serve

Built-in Features (No Loaders Needed)

module.exports = {
  module: {
    rules: [
      // TypeScript + JSX — built-in SWC
      { test: /\.tsx?$/, use: 'builtin:swc-loader' },

      // CSS — built-in
      { test: /\.css$/, type: 'css' },

      // CSS Modules — built-in
      { test: /\.module\.css$/, type: 'css/module' },

      // Assets — built-in
      { test: /\.(png|jpg|svg)$/, type: 'asset' },

      // JSON — built-in
      { test: /\.json$/, type: 'json' },
    ],
  },
};

Performance Comparison

Task	Rspack	webpack 5	Vite (Rollup)
Cold build (1000 modules)	0.8s	8s	3s
HMR	<50ms	200-500ms	<50ms
Production build	2s	20s	10s

Optimizing your build pipeline? Check out my Apify actors for web scraping automation, or email spinov001@gmail.com for custom build solutions.

Rspack, Vite, or Turbopack — which bundler do you use? Share below!

DEV Community