从Webpack迁移到Rsbuild的完整指南-CSDN博客

从Webpack迁移到Rsbuild的完整指南

前言

Rsbuild是一个基于Rspack的构建工具，旨在提供更快的构建速度和更简单的配置体验。对于长期使用Webpack的开发者来说，迁移到Rsbuild可以显著提升开发效率和构建性能。本文将详细介绍如何将现有Webpack项目平滑迁移到Rsbuild。

准备工作

依赖替换

首先需要移除Webpack相关依赖并安装Rsbuild核心包：

# 移除Webpack相关依赖
npm remove webpack webpack-cli webpack-dev-server

# 安装Rsbuild核心包
npm add @rsbuild/core -D

脚本更新

修改package.json中的scripts部分，将Webpack命令替换为Rsbuild命令：

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

配置文件迁移

创建Rsbuild配置文件

在项目根目录创建rsbuild.config.ts文件：

import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  plugins: [],
});

配置项对应关系

Rsbuild已经内置了许多Webpack的常见配置，下面是一些关键配置的迁移方式：

构建入口：
- Webpack: entry
- Rsbuild: source.entry

export default {
  source: {
    entry: {
      main: './src/index.ts',
    },
  },
};

自定义Webpack配置：可以通过tools.rspack来保留部分Webpack配置

export default {
  tools: {
    rspack: {
      plugins: [new CustomWebpackPlugin()],
    },
  },
};

插件系统

Rsbuild提供了一系列官方插件来替代Webpack生态中的常见loader和plugin：

| Webpack插件/loader | Rsbuild对应方案 | |-------------------------|-----------------------------| | babel-loader | 内置SWC，无需配置 | | css-loader | 内置支持 | | html-webpack-plugin | 内置支持 | | mini-css-extract-plugin | 内置支持 | | react-refresh | @rsbuild/plugin-react | | vue-loader | @rsbuild/plugin-vue |

以React项目为例，安装React插件：

npm add @rsbuild/plugin-react -D

然后在配置中使用：

import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
  plugins: [pluginReact()],
});

Babel迁移

Rsbuild默认使用SWC替代Babel，因此可以移除大部分Babel相关依赖：

@babel/preset-env：
- 由Rsbuild内置的browserslist支持替代
@babel/preset-typescript：
- 由SWC的TypeScript转换替代
babel-plugin-import：
- 使用source.transformImport配置替代

export default {
  source: {
    transformImport: [
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  },
};

开发服务器配置

Rsbuild的开发服务器配置与Webpack有所不同：

export default {
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
};

验证与调试

完成迁移后，可以执行以下命令验证：

npm run dev   # 启动开发服务器
npm run build # 执行生产构建

如果遇到问题，可以检查：

是否所有必要的Webpack配置都已迁移
是否正确使用了Rsbuild的插件系统
构建错误信息是否提供了足够线索

常见问题解决

Polyfill问题： Rsbuild默认不注入polyfill，需要显式配置：

export default {
  output: {
    polyfill: 'entry',
  },
};

特殊loader需求：对于Rsbuild尚未内置支持的loader，可以通过tools.rspack配置：

export default {
  tools: {
    rspack: (config) => {
      config.module.rules.push({
        test: /\.custom$/,
        use: ['custom-loader'],
      });
      return config;
    },
  },
};