Frontend Tooling 2026: Vite, Rsbuild & Bun Cheat Sheet

As of April 28, 2026, replacing Webpack 5 no longer means choosing between raw speed and a workable developer experience. Vite 8, Rsbuild 1.6, and Bun 1.3 each cover a different migration shape: mainstream app tooling, Webpack-adjacent enterprise builds, and single-binary full-stack workflows. This cheat sheet focuses on commands, config, defaults, and the practical cut lines that matter when you are standardizing a frontend stack.

Replacement Matrix

• Vite 8 is the biggest strategic shift here because production builds now run on Rolldown, not the older Rollup-based path Vite used for years.
• Rsbuild remains the most comfortable option for teams that still think in terms like asset prefixes, generated config, and bundler internals.
• Bun is not just a bundler swap. It changes how you install packages, run scripts, bundle code, and sometimes how you structure frontend entrypoints.
• Webpack is still viable, but it is no longer the default answer for greenfield browser apps.

When To Choose Each Tool

Choose Vite when:

• You want the safest default for React, Vue, Svelte, Solid, or vanilla frontend work.
• You want a mature plugin ecosystem and mainstream docs coverage.
• You want fast local iteration without preserving a Webpack-shaped mental model.
• You are standardizing across multiple frontend repos and want the lowest training cost.

Choose Rsbuild when:

• You are migrating a large Webpack codebase and want fewer conceptual jumps.
• You want Rspack performance with a higher-level app config surface.
• You need a built-in way to inspect generated config through rsbuild inspect.
• You want migration headroom without dropping into raw bundler configuration on day one.

Choose Bun when:

• You want one binary for install, run, test, and build.
• You are comfortable with Bun-native workflows and lighter plugin expectations.
• You are building full-stack or static HTML-driven apps where Bun’s HTML imports fit naturally.
• You care more about operational simplicity than preserving existing Webpack conventions.

Commands By Purpose

Use the live filter to narrow commands by tool, purpose, or flag. Press / to focus the filter and Esc to clear it.

Scaffold

npm create vite@latest
npm create vite@latest my-app -- --template react-ts

npm create rsbuild@latest

bun create vite my-app
bun create ./MyComponent.tsx

Run Dev Servers

npx vite
npx vite --port 3000 --open
npx vite --strictPort

npx rsbuild
npx rsbuild dev --open
npx rsbuild dev --port 8080 --host 0.0.0.0

bunx --bun vite
bun run dev
bun ./index.html

Build Production Output

npx vite build
npx vite build --outDir dist-app --sourcemap hidden
npx vite build --target modules

npx rsbuild build
npx rsbuild build --watch
npx rsbuild build --mode production

bun build ./src/index.tsx --outdir ./dist
bun build ./src/index.tsx --outdir ./dist --target browser --splitting
bun build ./index.html --outdir=dist --env=PUBLIC_* --sourcemap --minify

Preview And Inspect

npx vite preview
npx vite preview --port 4173 --open

npx rsbuild preview
npx rsbuild inspect --mode production
npx rsbuild inspect --verbose

bun build ./src/index.tsx --outdir ./dist --watch
bun build ./src/index.ts --outfile app --compile

Configuration Patterns

Vite: base path, alias, ports, preview

import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  base: '/docs/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  server: {
    port: 5173,
    strictPort: true,
    open: true,
  },
  preview: {
    port: 4173,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
})

• Use server.port when you want a fixed dev port and preview.port when local production previews need a separate port.
• Use base when deploying under a subpath like /docs/.
• Use define only for constant replacement, not general runtime env access.

Rsbuild: React plugin, aliases, base path, asset prefix

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

export default defineConfig({
  plugins: [pluginReact()],
  resolve: {
    alias: {
      '@': './src',
    },
  },
  server: {
    base: '/app',
    port: 3000,
  },
  output: {
    assetPrefix: 'https://cdn.example.com/assets/',
    distPath: {
      root: 'dist',
    },
  },
  html: {
    title: 'Rsbuild App',
  },
});

• Rsbuild looks for config files like rsbuild.config.mjs, rsbuild.config.ts, and rsbuild.config.js at the project root.
• Use server.base for route prefixing and output.assetPrefix for production asset URLs such as CDN paths.
• Public env vars use the PUBLIC_ prefix and are available through import.meta.env and process.env.

Bun: bundle browser code directly

await Bun.build({
  entrypoints: ['./src/index.tsx'],
  outdir: './dist',
  target: 'browser',
  splitting: true,
  sourcemap: 'external',
  minify: true,
  env: 'PUBLIC_*',
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0'),
  },
});

• Use target values browser, bun, or node depending on where the bundle will run.
• Use env: 'PUBLIC_*' to inline only safe public variables instead of every env var.
• Bun’s env replacement works on literal process.env.FOO references, not import.meta.env.

Advanced Workflows

Debug what the tool is actually doing

• Vite: use --debug and --profile when plugin or startup behavior is opaque.
• Rsbuild: use rsbuild inspect to dump resolved Rsbuild and Rspack config.
• Bun: prefer the JavaScript Bun.build() API when CLI flags stop scaling.

# Vite
npx vite --debug

# Rsbuild
npx rsbuild inspect --mode production --verbose

# Bun
bun build ./src/index.tsx --outdir ./dist --watch

Map common Webpack habits to 2026 replacements

• Replace long dev-server setup with Vite or Rsbuild defaults first, then re-add only the behavior you still need.
• Move CDN path logic into Vite base or Rsbuild output.assetPrefix instead of carrying forward custom public path glue.
• Keep Bun for cases where HTML entrypoints or single-binary operations reduce more complexity than they add.
• Treat migration as workflow replacement, not just config translation.

Reference links used for this cheat sheet

• Vite getting started, Vite CLI, Vite server options, Vite 8 announcement, Vite releases
• Rsbuild quick start, Rsbuild CLI, Configure Rsbuild, Rsbuild server.port, Rsbuild releases
• Bun bundler, bun create, Vite with Bun, Bun HTML and static sites, Bun releases
• Webpack getting started, Webpack CLI commands

Keyboard Shortcuts