Migrate To Rsbuild

Migrate to Rsbuild

Goal

Migrate webpack, Vite, create-react-app (CRA/CRACO), or Vue CLI projects to Rsbuild with minimal behavior changes and clear verification.

Supported source frameworks

• webpack
• Vite
• CRA / CRACO
• Vue CLI

Migration principles (must follow)

1. Official guide first: treat Rsbuild migration docs as source of truth. 2. Smallest-change-first: complete baseline migration first, then migrate custom behavior. 3. Do not change business logic: avoid touching app runtime code unless user explicitly asks. 4. Validate before cleanup: keep old tool dependencies/config temporarily if needed; remove only after Rsbuild is green.

Workflow

1. Detect source framework

• Check package.json dependencies/scripts and config files:
• webpack: webpack.config.*
• Vite: vite.config.*
• CRA/CRACO: react-scripts, @craco/craco, craco.config.*
• Vue CLI: @vue/cli-service, vue.config.*

2. Apply framework-specific deltas

• webpack: references/webpack.md
• Vite: references/vite.md
• CRA/CRACO: references/cra.md
• Vue CLI: references/vue-cli.md

3. Validate behavior

• Run dev server to verify the project starts without errors.
• Run build command to verify the project builds successfully.
• If issues remain, compare the old project configuration with the migration guide and complete any missing mappings.

4. Cleanup and summarize

• Remove obsolete dependencies/config only after validation passes.
• Summarize changed files and any remaining manual follow-ups.

CRA / CRACO -> Rsbuild Migration Checklist

Use this reference when the source project is Create React App (react-scripts) or CRACO.

Checklist

Copy this checklist and check off items as you complete them:

• [ ] Step 0: Read official guide (https://rsbuild.rs/guide/migration/cra) ⛔ BLOCKING
• [ ] Step 1: Inventory CRA/CRACO-specific behavior
• [ ] Step 2: Execute migration by official guide
• [ ] Apply guide steps with minimal scope
• [ ] Map CRA/CRACO custom behavior
• [ ] Step 3: Apply CRACO-specific follow-up (conditional)
• [ ] If CRACO is used, verify overrides are preserved or intentionally removed
• [ ] Step 4: Verify behavior
• [ ] Dev pass without errors
• [ ] Build pass without errors
• [ ] Run type check if required
• [ ] Step 5: Cleanup and summarize
• [ ] Remove CRA/CRACO-only deps/config after verification
• [ ] Summarize remaining manual follow-ups

Vite -> Rsbuild Migration Checklist

Use this reference when the source project is Vite.

Checklist

Copy this checklist and check off items as you complete them:

• [ ] Step 0: Read official guide (https://rsbuild.rs/guide/migration/vite) ⛔ BLOCKING
• [ ] Step 1: Inventory Vite-specific behavior
• [ ] Record plugins + non-default config
• [ ] Record env/base-path/HTML-transform assumptions
• [ ] Step 2: Execute migration by official guide
• [ ] Apply guide steps with minimal scope
• [ ] Map plugin-dependent behavior
• [ ] Step 3: Verify behavior
• [ ] Dev pass without errors
• [ ] Build pass without errors
• [ ] Run type check if required
• [ ] Step 4: Cleanup and summarize
• [ ] Remove Vite-only deps/config after verification
• [ ] Summarize remaining manual follow-ups

Vue CLI -> Rsbuild Migration Checklist

Use this reference when the source project is Vue CLI (@vue/cli-service).

Checklist

Copy this checklist and check off items as you complete them:

• [ ] Step 0: Read official guide (https://rsbuild.rs/guide/migration/vue-cli) ⛔ BLOCKING
• [ ] Step 1: Inventory Vue CLI-specific behavior
• [ ] Record vue.config.* customizations (configureWebpack, chainWebpack, devServer, css.loaderOptions, publicPath)
• [ ] Record Vue CLI plugins (@vue/cli-plugin-*) and any plugin-dependent behavior
• [ ] Step 2: Execute migration by official guide
• [ ] Apply guide steps with minimal scope
• [ ] Map Vue CLI config/plugin behavior
• [ ] Step 3: Verify behavior
• [ ] Dev pass without errors
• [ ] Build pass without errors
• [ ] Run type check if required
• [ ] Step 4: Cleanup and summarize
• [ ] Remove Vue CLI-only deps/config after verification
• [ ] Summarize remaining manual follow-ups

webpack -> Rsbuild Migration Checklist

Use this reference when the source project is webpack.

Checklist

Copy this checklist and check off items as you complete them:

• [ ] Step 0: Read official guide (https://rsbuild.rs/guide/migration/webpack) ⛔ BLOCKING
• [ ] Step 1: Inventory webpack-specific customizations
• [ ] Record config entry points + custom loaders/plugins
• [ ] Record dev-server + output/base-path assumptions
• [ ] Step 2: Execute migration by official guide
• [ ] Apply guide steps with minimal scope
• [ ] Map required customizations
• [ ] Step 3: Verify behavior
• [ ] Dev pass without errors
• [ ] Build pass without errors
• [ ] Run type check if required
• [ ] Step 4: Cleanup and summarize
• [ ] Remove webpack-only deps/config after verification
• [ ] Summarize remaining manual follow-ups