15 Build Tools interview questions with detailed answers, sorted from basic to advanced. Free to practice, with progress saved automatically.
Build tools turn frontend source code into files a browser can run and manage the dependencies a project relies on. This section covers bundlers such as Webpack, how npm, yarn, and pnpm differ as package managers, the supporting tooling around a frontend workflow, and how Module Federation lets separate applications share code in a micro frontend setup.
Webpack is a module bundler: starting from the entry file, it follows every import / require to build a dependency graph, then packs the modules into one or more bundle files the browser can load. By default Webpack only understands JS and JSON, so other…
Rule of thumb: need to transform a file type → loader; need to reach into the build process → plugin. Loaders turn files into modules, working at the file level inside the module resolution pipeline. They execute right to left (bottom to top in the…
Vite is the build tool created by Evan You. Its dev server does not bundle your source: when the browser asks for a file, Vite transforms that one file and serves it as native ESM, so cold start is near-instant no matter the project size.…
Cold start: the Webpack dev server bundles the whole module graph before the server is ready, so the more modules a project has, the longer you wait. Vite starts almost instantly, because it does not bundle your source; the browser loads each ESM file on…
Babel is a JavaScript compiler: it takes code written with newer syntax (ES2015+, JSX, TypeScript) and outputs JavaScript that older browsers or Node versions can run. In the toolchain, Babel usually sits between your code and the bundler (via babel-loader), or inside Jest to run…
SWC (Speedy Web Compiler) is a JavaScript/TypeScript compiler written in Rust that does the same job as Babel: it takes TypeScript, JSX or newer ES syntax and outputs JavaScript the target environment can run. The SWC homepage claims it is about 20x faster than Babel…
The three differ mainly in how they lay out nodemodules and store packages on disk: npm Yarn (v2+) pnpm ------------ Install layout Flat nodemodules: every package, including dependencies of dependencies, is hoisted to the root No nodemodules by default; Node finds packages through a .pnp.cjs…
A monolith frontend is a single app with one build and one deploy for the whole UI. Micro-frontends split the UI into several smaller apps, each owned by a team (for example checkout or search) that builds and deploys it on its own. Module Federation…
HMR (Hot Module Replacement) is when the dev server swaps exactly the module you just edited inside the running app, without reloading the page. Because the page does not reload, existing state (a half-filled form, an open modal) survives. The common flow in Vite and…
A source map is a .map (JSON) file that records which position in the built/minified code corresponds to which line of which original source file. With it, DevTools and error trackers such as Sentry show stack traces pointing at src/Cart.tsx:42 instead of main.4f2a.js:1:58213. A normal…
CommonJS (CJS) is Node's original module system: require() runs synchronously at the line where it is called, can sit inside an if or a function, and module.exports is an object built at runtime. ESM is the language's standard module system (ES2015): import/export must be at…
