Rspack Bundler Setup for Web Project

Rspack Bundler Configuration for Web Project

Rspack is a bundler by ByteDance (TikTok), written in Rust with webpack-compatible API. Main idea: take existing webpack config, change require('webpack') to require('@rspack/core'), get 5–10x faster build without rewriting configuration. In practice, compatibility isn't perfect, but for most projects it's workable path.

Why Rspack, not Vite

Vite is excellent for new project. Rspack is needed when:

• Already have large webpack config, hard to rewrite for Vite
• Use specific webpack plugins without Vite equivalents
• Need Module Federation support (Rspack supports MF v1 and v2)
• Project uses Rsbuild or Rsdoctor from ByteDance ecosystem

Installation

npm install --save-dev @rspack/core @rspack/cli

For React projects with TypeScript:

npm install --save-dev @rspack/core @rspack/cli typescript ts-loader
# or
npm install --save-dev @rspack/core @rspack/cli builtin:swc-loader  # built-in

rspack.config.ts

import { defineConfig } from '@rspack/cli';
import { rspack } from '@rspack/core';
import path from 'path';

export default defineConfig({
  entry: {
    main: './src/index.tsx',
  },
  output: {
    filename: '[name].[contenthash:8].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(tsx?|jsx?)$/,
        use: {
          loader: 'builtin:swc-loader',  // built-in SWC, faster than ts-loader
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                  development: process.env.NODE_ENV === 'development',
                  refresh: process.env.NODE_ENV === 'development',
                },
              },
            },
            env: {
              targets: 'Chrome >= 90',
            },
          },
        },
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(png|jpe?g|svg|gif|webp)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: { maxSize: 8 * 1024 },
        },
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: './public/index.html',
      filename: 'index.html',
    }),
    new rspack.CssExtractRspackPlugin({
      filename: '[name].[contenthash:8].css',
    }),
    new rspack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
        },
      },
    },
  },
  devServer: {
    port: 3000,
    historyApiFallback: true,
    hot: true,
  },
});

Migration from Webpack

Steps for typical webpack project:

# 1. Install Rspack
npm install --save-dev @rspack/core @rspack/cli

# 2. Change scripts in package.json

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

// webpack.config.js → rspack.config.js
// Change import:
// const webpack = require('webpack');
const { rspack } = require('@rspack/core');

// Most webpack plugins work, but replace built-ins:
// webpack.DefinePlugin         → rspack.DefinePlugin (compatible)
// webpack.HtmlWebpackPlugin    → rspack.HtmlRspackPlugin (built-in, faster)
// MiniCssExtractPlugin         → rspack.CssExtractRspackPlugin (built-in)

Module Federation

Rspack supports Module Federation v2 via @module-federation/enhanced:

import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';

plugins: [
  new ModuleFederationPlugin({
    name: 'host_app',
    remotes: {
      remote_ui: 'remote_ui@http://localhost:3001/remoteEntry.js',
    },
    shared: {
      react: { singleton: true, requiredVersion: '^18.0.0' },
      'react-dom': { singleton: true },
    },
  }),
]

Rsbuild — wrapper over Rspack

For new projects without legacy webpack config, better look at Rsbuild — webpack-compatible tool on top of Rspack with batteries:

npm create rsbuild@latest

// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSass } from '@rsbuild/plugin-sass';

export default defineConfig({
  plugins: [pluginReact(), pluginSass()],
  source: {
    entry: { index: './src/index.tsx' },
    alias: { '@': './src' },
  },
  output: {
    distPath: { root: 'dist' },
  },
  server: {
    port: 3000,
  },
});

Rsbuild = Rspack + ready config + Vite-level plugin system.

Plugin compatibility

Most webpack plugins work, but there are exceptions. Check verified plugins at rspack.dev/guide/compatibility/plugin. Incompatible: some plugins using low-level webpack compilation hooks (compiler.hooks.thisCompilation, custom tapable hooks).

Check specific plugin compatibility:

# Run build and look for warnings
rspack build 2>&1 | grep -i "unsupported\|warning\|deprecated"

Timeline

Replacing webpack with Rspack in project without Module Federation: 4–8 hours including testing. Setting up Rsbuild from scratch for new React/TypeScript project: 1–2 hours. Setting up Module Federation between multiple apps: 1–2 days.