从 Webpack 到 RSBuild：前端构建工具的进化之路

前言

在前端开发的世界里，构建工具就像是我们的"魔法工厂"，它把我们写的源代码变成浏览器能理解的产物。从早期的 Grunt、Gulp，到后来的 Webpack、Rollup、Vite，构建工具一直在不断进化。

今天，我要带大家认识一个新的"魔法工厂"------RSBuild 。它是基于 Rspack 构建的新一代前端构建工具，由字节跳动 Modern.js 团队倾力打造。它的目标很简单：让前端构建更快、更简单、更强大。

RSBuild 是什么？

RSBuild 是一个基于 Rspack 的前端构建工具，它继承了 Rspack 的极致性能，同时提供了开箱即用的配置和丰富的插件生态。简单来说：

极速构建：基于 Rust 编写的 Rspack 内核，构建速度比 Webpack 快 5-10 倍
零配置起步：内置大量预设，无需复杂配置即可开始开发
多框架支持：React、Vue、Svelte、Solid、Angular 等一网打尽
高度可扩展：灵活的插件系统，支持深度定制

在本文中，我将带大家深入了解 RSBuild 的核心特性、架构设计、使用方法，以及它如何改变前端开发体验。

一、为什么需要 RSBuild？

在介绍 RSBuild 之前，我们先来回顾一下前端构建工具的发展历程，看看为什么我们需要一个新的构建工具。

1.1 构建工具的演进史

第一代：任务运行器时代（2012-2015）

早期的前端开发主要依赖 Grunt 和 Gulp 这样的任务运行器。它们的主要特点是：

基于 Node.js 流处理
通过插件组合完成任务
配置繁琐，需要手动编写大量任务

javascript 复制代码

// Gruntfile.js 示例
module.exports = function(grunt) {
  grunt.initConfig({
    concat: {
      js: {
        src: ['src/**/*.js'],
        dest: 'dist/app.js'
      }
    },
    uglify: {
      js: {
        files: {
          'dist/app.min.js': ['dist/app.js']
        }
      }
    },
    sass: {
      dist: {
        files: {
          'dist/style.css': 'src/style.scss'
        }
      }
    }
  });
  
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-sass');
  
  grunt.registerTask('default', ['concat', 'uglify', 'sass']);
};

第二代：模块打包器时代（2015-2020）

随着 ES6 模块化的普及，Webpack 横空出世，开启了模块打包器的时代。Webpack 的核心思想是"一切皆模块"：

支持 ES6 模块、CommonJS、AMD 等多种模块化方案
通过 Loader 处理不同类型的文件
通过 Plugin 扩展构建能力
内置代码分割、Tree Shaking 等优化

javascript 复制代码

// webpack.config.js 示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

第三代：原生 ESM 时代（2020-至今）

Vite 的出现打破了传统打包器的思维模式。它利用浏览器原生 ESM 支持，实现了：

无需打包的开发服务器
基于依赖预构建的优化策略
极速的冷启动和热更新

javascript 复制代码

// vite.config.js 示例
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
});

1.2 构建工具面临的挑战

尽管构建工具一直在进化，但在大型项目中仍然面临着一些挑战：

1. 构建速度瓶颈

随着项目规模的增长，Webpack 的构建时间会显著增加。即使是使用了缓存和各种优化手段，在大型项目中首次构建可能需要几十秒甚至几分钟。

2. 配置复杂度

Webpack 的配置非常灵活，但这也意味着配置文件可能变得非常复杂。一个大型项目的 webpack.config.js 可能有几百行甚至上千行。

3. 生态碎片化

不同的框架有不同的构建工具和配置方式，开发者需要学习多种工具链。

4. 构建产物优化

手动配置代码分割、缓存策略、资源优化等需要深厚的经验和持续的维护。

1.3 RSBuild 的解决方案

RSBuild 正是为了解决这些问题而生的。它的核心理念是：

性能优先：基于 Rspack 内核，编译速度提升 5-10 倍
零配置起步：内置智能默认配置，开箱即用
统一生态：一套工具链支持所有主流框架
生产级优化：内置最佳实践，自动完成各种优化

二、RSBuild 核心架构

要理解 RSBuild 的强大之处，我们需要先了解它的架构设计。RSBuild 采用了分层架构，从用户配置到最终输出，每一层都有明确的职责。

2.1 架构层次详解

第一层：用户配置层（User Config）

这是用户与 RSBuild 交互的入口。用户可以通过以下方式进行配置：

配置文件 ：rsbuild.config.ts 或 rsbuild.config.js
命令行参数：通过 CLI 命令传递参数
环境变量：通过环境变量覆盖配置

typescript 复制代码

// rsbuild.config.ts 示例
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  source: {
    entry: {
      index: './src/index.tsx'
    }
  },
  output: {
    distPath: 'dist',
    filename: '[name].[contenthash:8].js'
  },
  dev: {
    port: 3000,
    https: false
  }
});

第二层：预设层（Presets）

预设层提供了针对不同框架和场景的预配置。RSBuild 内置了多种预设：

@rsbuild/plugin-react：React 框架支持
@rsbuild/plugin-vue：Vue 框架支持
@rsbuild/plugin-solid：Solid 框架支持
@rsbuild/plugin-svelte：Svelte 框架支持
@rsbuild/plugin-angular：Angular 框架支持

使用预设非常简单，只需要在配置中添加对应的插件即可：

typescript 复制代码

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

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

第三层：插件层（Plugins）

插件层是 RSBuild 的核心扩展机制。RSBuild 内置了大量插件来处理各种任务：

HTML 处理：生成 HTML 文件，注入资源
CSS 处理：样式加载、CSS Modules、PostCSS
JS/TS 处理：编译、压缩、代码分割
资源处理：图片、字体、静态文件
Dev Server：开发服务器、热更新
优化插件：Tree Shaking、代码压缩、缓存

第四层：核心层（Core）

核心层是 RSBuild 的心脏，负责：

配置合并：将用户配置、预设、插件配置合并
任务调度：协调各个插件的执行顺序
Rspack 集成：调用 Rspack 进行编译
文件系统操作：读写文件、管理缓存

第五层：输出层（Output）

输出层是构建的最终产物，包括：

HTML 文件
JavaScript 文件（包含代码分割后的 chunk）
CSS 文件
静态资源（图片、字体、图标等）
Source Map 文件

2.2 RSBuild 与 Rspack 的关系

很多人可能会混淆 RSBuild 和 Rspack。简单来说：

Rspack 是一个底层的编译工具，类似于 Webpack 的 Compiler
RSBuild 是基于 Rspack 的上层构建工具，类似于 Next.js、Nuxt 等框架的构建层

RSBuild 在 Rspack 的基础上提供了：

预设配置：针对不同框架的最佳实践配置
插件系统：丰富的插件生态
开发体验：Dev Server、热更新、代码规范检查等
工程化能力：环境变量、CI/CD 集成等

三、RSBuild 构建工作流

了解了架构之后，让我们看看 RSBuild 在实际工作中的流程。

3.1 开发模式工作流

当你运行 rsbuild dev 命令时，RSBuild 会执行以下步骤：

第一步：配置解析

RSBuild 会读取 rsbuild.config.ts 文件，并合并预设和插件的配置。

typescript 复制代码

// 配置合并流程
const finalConfig = merge(
  defaultConfig,           // 默认配置
  presetConfig,            // 预设配置
  pluginConfig,            // 插件配置
  userConfig               // 用户配置
);

第二步：依赖扫描

RSBuild 会扫描项目的依赖关系，分析模块之间的引用关系。这一步是为了：

确定需要编译的文件
进行依赖预构建（类似于 Vite 的依赖预构建）
优化模块解析路径

第三步：编译转换

这是最核心的步骤，RSBuild 会调用 Rspack 进行编译：

将 TypeScript/JSX/Vue SFC 等转换为标准 JavaScript
处理 CSS 和其他资源文件
应用各种优化（Tree Shaking、代码分割等）

第四步：资源处理

处理项目中的静态资源：

图片压缩和优化
字体文件处理
其他静态资源的复制

第五步：Dev Server 启动

启动开发服务器，提供以下能力：

HMR（Hot Module Replacement）：模块热替换，无需刷新页面
Fast Refresh：React 组件的快速刷新
静态资源服务：提供静态文件访问
代理配置：支持 API 请求代理

3.2 生产模式工作流

当你运行 rsbuild build 命令时，RSBuild 会执行类似的步骤，但会进行更多的优化：

额外的优化步骤

代码压缩：使用 Terser 压缩 JavaScript，使用 CSSMinimizer 压缩 CSS
代码分割：自动拆分公共依赖和业务代码
资源优化：图片优化、字体子集化
缓存策略：生成带有 hash 的文件名，配置缓存头
Source Map：生成生产环境的 Source Map（可选）

输出产物示例

css 复制代码

dist/
├── index.html
├── static/
│   ├── js/
│   │   ├── main.abc12345.js
│   │   ├── main.abc12345.js.map
│   │   ├── vendor.def67890.js
│   │   └── vendor.def67890.js.map
│   ├── css/
│   │   ├── main.abc12345.css
│   │   └── main.abc12345.css.map
│   └── assets/
│       ├── logo.abc12345.png
│       └── font.abc12345.woff2

四、RSBuild 性能优势

性能是 RSBuild 最大的卖点。让我们来看看它到底有多快。

4.1 为什么 RSBuild 这么快？

RSBuild 的性能优势主要来自以下几个方面：

1. Rspack 内核

Rspack 是用 Rust 编写的，相比 Webpack 的 JavaScript 实现，有以下优势：

编译速度：Rust 的执行速度比 JavaScript 快几十倍
内存管理：Rust 的所有权系统避免了 GC 开销
并行处理：Rust 原生支持多线程并行编译

2. 增量编译

RSBuild 实现了高效的增量编译：

文件变化时只重新编译受影响的模块
利用缓存避免重复编译
智能依赖分析，最小化重新编译范围

3. 依赖预构建

类似于 Vite，RSBuild 会预先构建第三方依赖：

将 CommonJS 依赖转换为 ESM
缓存预构建结果
减少开发时的模块解析开销

4. 优化的打包策略

RSBuild 内置了多种打包优化：

代码分割：自动拆分公共依赖
Tree Shaking：移除未使用的代码
Scope Hoisting：合并模块作用域，减少运行时代码

4.2 性能对比数据

根据官方测试数据，RSBuild 在大型项目中的表现：

场景	Webpack	RSBuild	提升
首次构建	~12s	~2s	6x
热更新	~1s	~50ms	20x
生产构建	~30s	~8s	4x

这些数据可能会因项目规模和配置而有所不同，但核心结论是一致的：RSBuild 比 Webpack 快得多。

五、RSBuild 核心特性

RSBuild 提供了丰富的特性，让前端开发更加高效。

5.1 多框架支持

RSBuild 支持多种主流前端框架，通过插件实现一键切换：

React 项目配置

typescript 复制代码

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

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

Vue 项目配置

typescript 复制代码

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

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

Svelte 项目配置

typescript 复制代码

import { defineConfig } from '@rsbuild/core';
import { pluginSvelte } from '@rsbuild/plugin-svelte';

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

5.2 现代 Web 能力

RSBuild 内置了对现代 Web 技术的支持：

ESM 支持

typescript 复制代码

// RSBuild 自动处理 ESM 模块
import { useState } from 'react';
import './styles.css';

CSS Modules

css 复制代码

/* styles.module.css */
.container {
  padding: 20px;
}

.title {
  font-size: 24px;
  color: #667eea;
}

typescript 复制代码

import styles from './styles.module.css';

function App() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello RSBuild</h1>
    </div>
  );
}

WebAssembly 支持

typescript 复制代码

// 自动处理 WASM 文件
import init from './wasm-module.wasm';

async function run() {
  const wasm = await init();
  wasm.doSomething();
}

5.3 开发体验优化

RSBuild 提供了出色的开发体验：

极速热更新

typescript 复制代码

// 编辑文件后，RSBuild 会自动更新
// 无需刷新页面，保持组件状态
function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}

错误提示

RSBuild 提供了友好的错误提示，帮助快速定位问题：

vbnet 复制代码

Error: Cannot find module './missing-file'
  at App.tsx:3:1
  at Module._compile (internal/modules/cjs/loader.js:1085:14)
  
┌─────────────────────────────────────────────────────────────┐
│  RSBuild Error                                              │
│  ─────────────────────────────────────────────────────────  │
│  Module not found: ./missing-file                           │
│                                                             │
│  Did you mean:                                              │
│    - ./existing-file.tsx                                    │
│    - ./another-file.ts                                      │
│                                                             │
│  Location: src/App.tsx:3                                    │
└─────────────────────────────────────────────────────────────┘

开发服务器配置

typescript 复制代码

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

export default defineConfig({
  dev: {
    port: 3000,
    https: false,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
});

5.4 生产级优化

RSBuild 内置了多种生产级优化：

代码分割

typescript 复制代码

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

export default defineConfig({
  output: {
    sourceMap: true,
    chunkFilename: '[name].[contenthash:8].js'
  },
  performance: {
    chunkSplit: {
      strategy: 'all-in-one',
      custom: {
        vendor: ['react', 'react-dom'],
        utils: ['lodash', 'dayjs']
      }
    }
  }
});

资源优化

typescript 复制代码

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

export default defineConfig({
  output: {
    assetPrefix: 'https://cdn.example.com/',
    minify: true
  }
});

环境变量

typescript 复制代码

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

export default defineConfig({
  source: {
    define: {
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.API_URL': JSON.stringify(process.env.API_URL)
    }
  }
});

六、RSBuild 实践指南

理论讲了这么多，现在让我们来实际操作一下，看看如何从零开始创建一个 RSBuild 项目。

6.1 快速开始

步骤一：初始化项目

bash 复制代码

# 使用官方脚手架初始化
npx create-rsbuild@latest my-app

# 进入项目目录
cd my-app

# 安装依赖
npm install

步骤二：启动开发服务器

bash 复制代码

npm run dev

打开浏览器访问 http://localhost:3000，你就可以看到一个默认的 RSBuild 项目了。

步骤三：构建生产版本

bash 复制代码

npm run build

构建完成后，产物会输出到 dist 目录。

6.2 项目结构

一个典型的 RSBuild 项目结构如下：

css 复制代码

my-app/
├── src/
│   ├── components/
│   │   └── Header.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── index.css
├── public/
│   └── favicon.ico
├── rsbuild.config.ts
├── package.json
└── tsconfig.json

6.3 配置详解

基础配置

typescript 复制代码

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

export default defineConfig({
  plugins: [pluginReact()],
  
  source: {
    entry: {
      index: './src/main.tsx'
    }
  },
  
  output: {
    distPath: 'dist',
    filename: '[name].[contenthash:8].js',
    cssFilename: '[name].[contenthash:8].css',
    assetFilename: 'assets/[name].[contenthash:8].[ext]',
    sourceMap: true
  }
});

开发服务器配置

typescript 复制代码

export default defineConfig({
  dev: {
    port: 3000,
    https: false,
    open: true,
    host: '0.0.0.0',
    
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    },
    
    allowedHosts: ['localhost', 'example.com']
  }
});

性能优化配置

typescript 复制代码

export default defineConfig({
  performance: {
    chunkSplit: {
      strategy: 'split-by-experience',
      minSize: 30000,
      maxSize: 244000,
      custom: {
        react: ['react', 'react-dom', 'react-router-dom'],
        vendor: ['lodash', 'axios', 'dayjs']
      }
    },
    
    treeShaking: true,
    
    minify: {
      js: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
      css: true
    }
  }
});

路径别名配置

typescript 复制代码

export default defineConfig({
  source: {
    alias: {
      '@': './src',
      '@components': './src/components',
      '@utils': './src/utils'
    }
  }
});

然后在 tsconfig.json 中添加对应的路径配置：

json 复制代码

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

6.4 常用命令

bash 复制代码

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

# 查看构建分析
npm run build -- --analyze

# 清理构建缓存
npm run build -- --clean

七、RSBuild 插件开发

RSBuild 的强大之处在于它的插件系统。如果你需要扩展 RSBuild 的功能，可以开发自定义插件。

7.1 插件基础

一个 RSBuild 插件是一个函数，返回一个插件对象：

typescript 复制代码

import type { RsbuildPlugin } from '@rsbuild/core';

export function myPlugin(): RsbuildPlugin {
  return {
    name: 'my-plugin',
    
    setup(api) {
      // 在配置阶段执行
      api.onBeforeLoadConfig(() => {
        console.log('配置加载前');
      });
      
      // 修改配置
      api.modifyConfig((config) => {
        config.output.filename = '[name].[hash].js';
        return config;
      });
      
      // 添加 Rspack 插件
      api.onAfterCreateCompiler((compiler) => {
        compiler.hooks.compilation.tap('MyPlugin', () => {
          console.log('编译开始');
        });
      });
    }
  };
}

7.2 插件钩子

RSBuild 提供了丰富的钩子来扩展构建流程：

配置阶段钩子

onBeforeLoadConfig：配置加载前
onAfterLoadConfig：配置加载后
modifyConfig：修改配置

编译阶段钩子

onBeforeCreateCompiler：创建编译器前
onAfterCreateCompiler：创建编译器后
modifyRspackConfig：修改 Rspack 配置

构建阶段钩子

onBeforeBuild：构建前
onAfterBuild：构建后
onBuildComplete：构建完成

开发服务器钩子

onBeforeStartDevServer：开发服务器启动前
onAfterStartDevServer：开发服务器启动后

7.3 插件示例：添加版权信息

typescript 复制代码

import type { RsbuildPlugin } from '@rsbuild/core';

export function copyrightPlugin(author: string): RsbuildPlugin {
  return {
    name: 'copyright-plugin',
    
    setup(api) {
      api.modifyRspackConfig((rspackConfig) => {
        rspackConfig.plugins = rspackConfig.plugins || [];
        
        rspackConfig.plugins.push({
          apply: (compiler) => {
            compiler.hooks.emit.tap('CopyrightPlugin', (compilation) => {
              compilation.assets['COPYRIGHT'] = {
                source: () => `Copyright ${new Date().getFullYear()} ${author}`,
                size: () => Buffer.byteLength(`Copyright ${new Date().getFullYear()} ${author}`)
              };
            });
          }
        });
        
        return rspackConfig;
      });
    }
  };
}

使用这个插件：

typescript 复制代码

import { defineConfig } from '@rsbuild/core';
import { copyrightPlugin } from './copyright-plugin';

export default defineConfig({
  plugins: [copyrightPlugin('My Company')]
});

八、RSBuild 与其他构建工具对比

在选择构建工具时，我们需要考虑多个因素。让我们来对比一下 RSBuild 与其他主流构建工具。

8.1 RSBuild vs Webpack

特性	Webpack	RSBuild
编译速度	较慢（JavaScript）	极快（Rust）
配置复杂度	高，需要手动配置	低，开箱即用
热更新	较慢	极速
生态系统	成熟，插件丰富	新兴，快速增长
学习曲线	陡峭	平缓

8.2 RSBuild vs Vite

特性	Vite	RSBuild
开发模式	原生 ESM，无需打包	Rspack 编译
生产构建	Rollup	Rspack
热更新	快	更快
配置复杂度	低	低
框架支持	主要 Vue/React	多框架支持
大型项目	依赖预构建可能较慢	Rspack 性能更好

8.3 RSBuild vs Turbopack

特性	Turbopack	RSBuild
内核语言	Rust	Rust
开发模式	原生 ESM	Rspack 编译
生产构建	Webpack	Rspack
框架支持	主要 React	多框架支持
生态系统	有限	快速增长
配置灵活性	较低	高

8.4 如何选择？

根据你的项目需求，选择合适的构建工具：

新项目：推荐使用 RSBuild，体验极速构建和开箱即用的配置
大型现有项目：如果使用 Webpack，可以考虑逐步迁移到 RSBuild
Vue 为主的项目：Vite 仍然是很好的选择
追求极致性能：RSBuild 和 Turbopack 都是不错的选择

九、RSBuild 迁移指南

如果你已经有一个使用 Webpack 的项目，想迁移到 RSBuild，可以按照以下步骤进行。

9.1 迁移步骤

第一步：安装依赖

bash 复制代码

npm install @rsbuild/core @rsbuild/plugin-react --save-dev

第二步：创建配置文件

typescript 复制代码

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

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

第三步：更新 package.json

json 复制代码

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

第四步：处理 Webpack 配置

将 Webpack 配置迁移到 RSBuild 配置：

Webpack 配置	RSBuild 配置
`entry`	`source.entry`
`output`	`output`
`module.rules`	通过插件处理
`plugins`	`plugins`
`devServer`	`dev`
`optimization`	`performance`

第五步：测试构建

bash 复制代码

npm run build

检查构建是否成功，如果有错误，根据提示进行修复。

9.2 常见迁移问题

问题一：Loader 配置

Webpack 的 Loader 配置需要转换为 RSBuild 的方式：

typescript 复制代码

// Webpack
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

// RSBuild - 内置支持，无需配置
// 如果需要自定义，可以使用 modifyRspackConfig
export default defineConfig({
  tools: {
    cssLoader: {
      modules: {
        localIdentName: '[local]-[hash:base64:5]'
      }
    }
  }
});

问题二：Plugin 迁移

部分 Webpack 插件可能需要替换为 RSBuild 插件或自定义插件。

问题三：路径别名

typescript 复制代码

// Webpack
resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

// RSBuild
export default defineConfig({
  source: {
    alias: {
      '@': './src'
    }
  }
});

十、总结

RSBuild 是一个令人兴奋的前端构建工具，它带来了以下核心价值：

10.1 核心优势

极速性能：基于 Rspack 内核，构建速度提升 5-10 倍
开箱即用：内置智能配置，无需复杂设置即可开始开发
多框架支持：一套工具链支持 React、Vue、Svelte 等多种框架
高度可扩展：灵活的插件系统，支持深度定制
生产级优化：内置最佳实践，自动完成各种优化

10.2 适用场景

新项目启动：从零开始的项目，推荐使用 RSBuild
大型项目优化：现有项目构建速度慢，需要优化
多框架项目：同时使用多种框架的项目
追求开发体验：重视开发效率和体验的团队

10.3 未来展望

RSBuild 作为一个新兴的构建工具，正在快速发展。随着社区的不断壮大和功能的不断完善，它有望成为前端构建工具的新标杆。

如果你还没有尝试过 RSBuild，我强烈建议你在你的下一个项目中使用它，体验一下极速构建带来的快感！

参考资料：

三峋视频去水印 - 一键提取无水印短视频，支持抖音、快手、小红书等平台，免费下载，批量处理，本地保存。

使用步骤：

复制视频分享链接

打开小程序「三峋视频去水印」

粘贴链接，一键提取

搜索方式： 在微信小程序中搜索「三峋视频去水印」即可找到。