Налаштування бандлера Rspack для веб-проекту

Налаштування бандлера Rspack для веб-проекту

Rspack — збирач від ByteDance (TikTok), написаний на Rust з webpack-сумісним API. Головна ідея: взяти існуючий webpack-конфіг, змінити require('webpack') на require('@rspack/core'), отримати побудову в 5–10 разів швидше без переписування конфіги. На практиці сумісність не стопроцентна, але для більшості проектів — цілком робочий шлях.

Чому Rspack, а не Vite

Vite — відмінний вибір для нового проекту. Rspack потрібен коли:

• Вже є великий webpack-конфіг, складно переписувати під Vite
• Використовуються специфічні webpack-плагіни без аналогів у Vite
• Потрібна підтримка Module Federation (Rspack підтримує MF v1 та v2)
• Проект використовує Rsbuild або Rsdoctor з екосистеми ByteDance

Встановлення

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

Для React-проектів з TypeScript:

npm install --save-dev @rspack/core @rspack/cli typescript ts-loader
# або
npm install --save-dev @rspack/core @rspack/cli builtin:swc-loader  # вбудований

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',  // вбудований SWC, швидше за 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,
  },
});

Міграція з Webpack

Кроки для типового webpack-проекту:

# 1. Встановлюємо Rspack
npm install --save-dev @rspack/core @rspack/cli

# 2. Міняємо скрипти в package.json

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

// webpack.config.js → rspack.config.js
// Міняємо імпорт:
// const webpack = require('webpack');
const { rspack } = require('@rspack/core');

// Більшість плагінів webpack працюють, але вбудовані замінюємо:
// webpack.DefinePlugin         → rspack.DefinePlugin (сумісний)
// webpack.HtmlWebpackPlugin    → rspack.HtmlRspackPlugin (вбудований, швидше)
// MiniCssExtractPlugin         → rspack.CssExtractRspackPlugin (вбудований)

Module Federation

Rspack підтримує Module Federation v2 через @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 — обгортка над Rspack

Для нових проектів без legacy webpack-конфіги краще дивитись на Rsbuild — webpack-сумісний інструмент поверх Rspack з батарейками:

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 + готова конфіга + плагін-система рівня Vite.

Сумісність плагінів

Більшість webpack-плагінів працюють, але є виключення. Список перевірених плагінів на rspack.dev/guide/compatibility/plugin. З несумісних: деякі плагіни використовуючи низькорівневі webpack compilation hooks (compiler.hooks.thisCompilation, кастомні tapable-хуки).

Перевірити сумісність конкретного плагіну:

# Запустити побудову та дивитись попередження
rspack build 2>&1 | grep -i "unsupported\|warning\|deprecated"

Терміни

Заміна webpack на Rspack в проекті без Module Federation: 4–8 годин включаючи тестування. Настройка Rsbuild з нуля для нового React/TypeScript проекту: 1–2 години. Настройка Module Federation між кількома програмами: 1–2 дні.