Build Tools & Bundlers Interview Questions and Answers

Browsers can load ES modules, but a large app would issue hundreds of requests, and TypeScript, JSX, CSS and assets all need processing. A bundler takes an entry point, follows imports to build a dependency graph, transforms each module, and emits a small number of optimised files.

It handles transpilation through loaders or plugins, resolves bare imports from node_modules, inlines or copies assets, splits the output into chunks, minifies it, and generates cache-busting hashes. It also powers development with a local server and hot module replacement.

The goal is fewer requests, smaller payloads, compatibility with older browsers and a reproducible pipeline from source to deployable assets. Modern bundlers such as Vite, esbuild and SWC reduce the cost, but the core reasons stay the same: dependency resolution, transformation and output optimisation. Without a bundler you would manage script order and duplicate dependencies by hand.

Babel is a JavaScript compiler that transforms modern syntax into code older environments can run. It parses source into an AST, applies plugins that each handle a transformation such as arrow functions, optional chaining, class fields or JSX, and generates new code.

Presets bundle common plugin sets. @babel/preset-env uses your browserslist or targets to include only the transforms needed, while @babel/preset-react and @babel/preset-typescript handle JSX and TypeScript syntax. It can add polyfills through core-js with useBuiltIns: 'usage', though Babel does not polyfill language features automatically without that.

{ "presets": [["@babel/preset-env", { "targets": ">0.5%, not dead" }]] }

Babel operates file by file and is relatively slow, so modern toolchains often replace it for transpilation. It does not bundle; that is the bundler's job. Babel remains valuable for custom transforms, macros and precise browser targeting.