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
- What is the critical rendering path, and how do you optimize it?MiddleFrontend performance
- What is code splitting, and along which boundaries should you split code?MiddleFrontend performance
- How do you analyze bundle size, and what do you do about large dependencies?MiddleFrontend performance
- How do you optimize CSS delivery?MiddleFrontend performance
- When is it appropriate to use Web Workers, and what are their limitations?SeniorFrontend performance
- What is a performance budget, and how do you build it into the development process?SeniorFrontend performance
Related technologies
Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).