Frontend
webpack
A module bundler for JavaScript: builds a dependency graph and packs code and assets into bundles.
What it is
Tobias Koppers created webpack in 2012. It takes an entry point, builds a graph of all imports and outputs one or more bundles. Through loaders it processes not just JS but CSS, images and TypeScript.
Plugins extend the build: minification, CSS extraction, HTML templates, environment variables. It has code splitting, tree shaking, content-hash caching and Module Federation for micro frontends.
webpack used to be the standard (Create React App and Angular CLI relied on it for years). New projects now more often pick Vite or Turbopack, but webpack remains in many large codebases.
Use it when
- You maintain an existing webpack project: migration is not always worth the effort.
- You need Module Federation for micro frontends.
- A complex build with specific loaders and plugins.
Avoid it when
- A new project where a fast dev loop matters: Vite is much faster in development.
- A small library: simpler bundlers (Rollup, tsup) give a cleaner result.
Key concepts
- Entry and output
- The entry starts the graph,
outputdefines where bundles are written. - Loaders
- Turn files of different types into modules (
babel-loader,css-loader). - Plugins
- Work across the whole build: minification, HTML, variables.
- Code splitting
- Splitting code into chunks and dynamic
import()for lazy loading. - Module Federation
- Sharing code between separately built apps at runtime.
Example
Interview questions
1. How does a loader differ from a plugin?
A loader transforms individual files of a type as they are imported. A plugin hooks into the whole build: compilation hooks, optimization, file generation.
2. What is tree shaking?
Removing unused exported code from the bundle. It works with ES modules because their imports are statically analyzable.
3. How do you do lazy loading?
With dynamic
import('./module'). webpack creates a separate chunk that loads when the code runs. In React it pairs withReact.lazy.4. Why use contenthash in a filename?
The hash changes only when content changes, so the browser caches unchanged files for long and downloads only updated ones.
Interview questions from the bank
- A landing page shows a blank screen for 2.5 s on 4G, although the HTML arrives in 300 ms.
<head>has three CSS files, Google Fonts loaded through@importin CSS, and a synchronous A/B testing script. What blocks the first render and how do you untangle it?MiddleFrontend performance - The initial SPA bundle is 1.8 MB because the admin area, the chart editor and reports are in one chunk. You wrapped almost every component in
React.lazy, and now navigating to the reports page shows three spinners in a row. Where should the split boundaries be, and how do you avoid this waterfall?MiddleFrontend performance - After adding one date formatting function the bundle grew by 300 KB gzip. How do you find the cause and what do you do about it?MiddleFrontend performance
- Parsing a 50 MB CSV in the browser freezes the UI for 8 seconds. You moved it to a Web Worker: the UI no longer freezes, but total time went up and the tab's memory doubled. Why, and how should data be passed?MiddleFrontend performance
- A page loads 600 KB of CSS from a UI library, of which a few percent is used, and the first render waits for this file. How do you reduce render blocking by styles?MiddleFrontend performance
- Over six months the bundle grew from 180 to 420 KB and LCP slowly got worse, and nobody noticed, because each PR added only a few kilobytes. How do you build in control so this does not happen again, and what do you do when an important feature does not fit the budget?SeniorFrontend performance
Related technologies
Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).