Rspack Bundler

TypeScript Config

// rspack.config.ts
import { Configuration } from '@rspack/core';

const config: Configuration = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'builtin:swc-loader'
      }
    ]
  }
};

export default config;

React Integration

// rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: { syntax: 'typescript', tsx: true },
              transform: {
                react: {
                  runtime: 'automatic',
                  development: process.env.NODE_ENV === 'development',
                  refresh: process.env.NODE_ENV === 'development'
                }
              }
            }
          }
        }
      }
    ]
  },
  plugins: [
    process.env.NODE_ENV === 'development' && 
      new rspack.ReactRefreshPlugin()
  ].filter(Boolean)
};

Vue Integration

const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  module: {
    rules: [
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }
    ]
  },
  plugins: [new VueLoaderPlugin()]
};

Webpack Plugin Compatibility

// Most webpack plugins work unchanged
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].css' }),
    new CopyPlugin({ patterns: [{ from: 'public', to: 'static' }] })
  ],
  optimization: {
    minimizer: [new TerserPlugin()]
  }
};

Performance Optimization

module.exports = {
  // Parallel builds (auto-detected cores)
  parallelism: require('os').cpus().length,
  
  // Persistent caching
  cache: {
    type: 'filesystem',
    buildDependencies: { config: [__filename] }
  },
  
  // Faster source maps for dev
  devtool: process.env.NODE_ENV === 'development' ? 'eval-cheap-source-map' : 'source-map',
  
  // Tree shaking
  optimization: {
    usedExports: true,
    sideEffects: false,
    providedExports: true,
    innerGraph: true
  },
  
  // Module federation
  experiments: {
    outputModule: true
  }
};

SWC Configuration

// .swcrc or inline
{
  "jsc": {
    "target": "es2022",
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": { "runtime": "automatic" },
      "legacyDecorator": true,
      "decoratorMetadata": true
    },
    "experimental": {
      "plugins": [["@swc/plugin-styled-components", {}]]
    }
  },
  "module": { "type": "es6" },
  "minify": true
}

Module Federation

const { ModuleFederationPlugin } = require('@rspack/core').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, eager: true },
        'react-dom': { singleton: true }
      }
    })
  ]
};

CSS/SCSS Setup

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { modules: true } },
          'sass-loader'
        ]
      },
      {
        test: /\.css$/,
        use: [
          rspack.CssExtractRspackPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new rspack.CssExtractRspackPlugin({ filename: '[name].css' })
  ]
};

Environment Variables

const rspack = require('@rspack/core');

module.exports = {
  plugins: [
    new rspack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
      'process.env.DEBUG': JSON.stringify(process.env.NODE_ENV === 'development')
    }),
    new rspack.EnvironmentPlugin(['NODE_ENV', 'API_KEY'])
  ]
};

Build Analysis

# Bundle analyzer
npm install @rspack/cli --save-dev
npx rspack build --analyze

# Stats output
npx rspack build --json > stats.json

Common Patterns

Lazy Loading

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

Dynamic Imports with Preload

import(/* webpackPreload: true */ './chunk.js');

Worker Threads

const worker = new Worker(new URL('./worker.js', import.meta.url));

Migration from Webpack

# 1. Replace webpack dependencies
npm uninstall webpack webpack-cli webpack-dev-server
npm install @rspack/core @rspack/cli

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

# 3. Replace babel-loader with builtin:swc-loader
# 4. Replace HtmlWebpackPlugin with HtmlRspackPlugin
# 5. Test build: npx rspack build

CLI Commands

npx rspack build              # Production build
npx rspack serve              # Dev server with HMR
npx rspack build --watch      # Watch mode
npx rspack build --mode=none  # No optimization
npx rspack build --profile    # Performance profile

Troubleshooting

Key Differences from Webpack

• builtin:swc-loader replaces babel-loader
• HtmlRspackPlugin replaces HtmlWebpackPlugin
• CssExtractRspackPlugin replaces MiniCssExtractPlugin
• Built-in LightningCssMinimizerRspackPlugin (faster than cssnano)
• No webpack-dev-middleware - use @rspack/dev-server