Questions
1 of 6
What is Webpack?
Difficulty: 5/10
module bundling, loaders & plugins, configuration
Webpack is a static module bundler for JavaScript applications. Its main purpose is to bundle and optimise static assets, such as JavaScript files, CSS, and images so that they can be efficiently served to a web browser.
- 1
It internally builds a dependency graph from one or more entry points and then combines every module our project needs into one or more bundles, which are static assets to serve your content from.
- 2
Since version 4.0.0, webpack does not require a configuration file to bundle your project.
Scenario Questions
0-2 years experience
- 1How would you set up Webpack to bundle a simple React app that uses JSX and CSS?
- 2If you add a new image asset and reference it in a component, what steps does Webpack take to include it in the bundle?
- 3What happens if you forget to add a loader for .ts files in your Webpack config?
2-5 years experience
- 1You notice that after adding a third‑party library, your bundle size doubled. Walk me through how you'd investigate and reduce the size using Webpack features.
- 2During a CI build, the Webpack compilation fails with a 'Module not found' error only on the CI server. What could cause this discrepancy and how would you debug it?
- 3Explain why enabling source maps in production might be a trade‑off and how you'd configure Webpack accordingly.
5-8 years experience
- 1Our application is moving to a micro‑frontend architecture where each team ships its own bundle. How would you configure Webpack to support shared dependencies while avoiding duplication?
- 2We need to improve build times for a large codebase with many TypeScript files. What Webpack strategies (e.g., caching, parallelism) would you employ, and what are their trade‑offs?
- 3Describe how you would create a custom plugin to enforce a company‑wide lint rule during the build, and what considerations around performance and error handling you’d have.
8+ years experience
- 1The company is planning to replace Webpack with a newer bundler across multiple services. How would you design a migration plan that minimizes disruption, ensures consistency, and handles legacy configurations?
- 2In a large monorepo, multiple teams have divergent Webpack configs. How would you create a shared, extensible configuration framework that balances flexibility and maintainability?
- 3Consider a scenario where you need to support both client‑side and server‑side rendering with the same codebase. How would you structure Webpack (or multiple configs) to handle the differing environments while keeping the build process efficient?
Follow-up Questions
- Which loader would you choose for processing SCSS and why?
- How does the 'mode' setting affect the generated bundle?
- What metrics do you look at to evaluate the impact of a new plugin on build time?