The build tool landscape has evolved dramatically. Understanding the tradeoffs helps you choose the right tool for your project.
Webpack
The OG bundler. Powerful, flexible, and complex. Still the most widely used in production.
// webpack.config.js
module.exports = {
entry: "./src/index.js",
output: { filename: "[name].[contenthash].js" },
module: {
rules: [
{ test: /\\.tsx?$/, use: "ts-loader" },
{ test: /\\.css$/, use: ["style-loader", "css-loader"] }
]
},
plugins: [new HtmlWebpackPlugin({ template: "./index.html" })]
};Pros: Mature ecosystem, code splitting, Module Federation
Cons: Slow dev server, complex configuration
Vite
Uses native ES modules in dev (no bundling!) and Rollup for production builds.
// vite.config.ts
export default defineConfig({
plugins: [react()],
build: { rollupOptions: { /* ... */ } }
});Pros: Instant dev server, simple config, fast HMR
Cons: Dev/prod parity gaps, Rollup learning curve for advanced cases
esbuild
Written in Go. 10-100x faster than JavaScript-based bundlers. Used by Vite for dependency pre-bundling.
// Build API
await esbuild.build({
entryPoints: ["src/index.tsx"],
bundle: true,
outfile: "dist/bundle.js",
minify: true,
target: "es2020"
});Pros: Blazing fast, simple API
Cons: Limited plugin ecosystem, no HMR built-in
Turbopack
Written in Rust by Vercel. Designed as Webpack's successor with incremental computation.
Pros: Very fast incremental builds, Next.js integration
Cons: Still maturing, tied to Next.js ecosystem
Decision Guide
| Use Case | Recommendation |
|---|---|
| New React/Vue project | Vite |
| Next.js project | Turbopack (built-in) |
| Legacy project | Webpack (migration risk not worth it) |
| Library/package | Rollup or tsup (esbuild wrapper) |
| Build scripts/CLI | esbuild |