All 5 Build Tools & Bundlers (Vite, Webpack & CRA) questions
More in Build Tools & Bundlers (Vite, Webpack & CRA)
What is the difference between a development server and a production build in a React project? Why has Vite become more popular than Create React App for starting new React projects? What is code minification and why does a build tool perform it automatically? How do build tools split a React app into smaller chunks for faster page loads?
Advertisement
React › Build Tools & Bundlers (Vite, Webpack & CRA)

What does a build tool like Vite or Webpack actually do for a React project?

Beginner

Answer

A build tool takes all your separate JavaScript, CSS, and image files and combines them into a small number of optimized files that a browser can load quickly. It also converts modern JSX and newer JavaScript syntax into a form that older browsers can understand.
// Starting a new React project with Vite
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev
Real-world example A small business website is built with dozens of component files during development, and Vite combines them all into just a few small files before the site goes live, making the page load much faster for visitors.

Common follow-ups: Why can a browser not run raw JSX code directly without a build tool?;What is the difference between a development build and a production build?

Components & JSX;Deployment & Production Builds
All 5 Build Tools & Bundlers (Vite, Webpack & CRA) questions