Bundler
The tool that follows your imports and packs hundreds of source files into a few optimized files a browser can actually load.
See it
What it is
A bundler starts at your entry file, follows every import, and packs the whole graph into a handful of files a browser can load. Along the way it transpiles TypeScript and JSX, rewrites imports of CSS and images, drops unused exports (tree shaking), minifies, and stamps content hashes into filenames so caches bust correctly on deploy.
The canonical names: webpack (the old giant, still everywhere), Vite (the current default for new projects), Rollup and esbuild (the engines under a lot of the others), plus Turbopack and Rspack as the Rust-flavored successors. If you use Next.js, Astro, Remix, or SvelteKit, you already have a bundler; the framework configured it for you and you mostly should not fight it.
The gotcha that eats an afternoon: dev and prod are different pipelines. The dev server can serve unbundled ES modules while the production build runs a real bundle-and-minify pass, so 'works locally, blank page after deploy' is a genuine genre of bug. Always run the production build locally before shipping, and treat build-time environment variables as baked in: whatever value was present at build time is compiled into the output forever.
Ask AI for it
Set up Vite as the bundler for this TypeScript project. Create a vite.config.ts with the appropriate framework plugin, an alias of @ to ./src, and a production build that outputs hashed filenames, generates source maps, and targets modern browsers. Add scripts for dev, build, and preview. Split vendor dependencies into their own chunk, and print a bundle size report after the build so I can see what is fat.