Bundling is the process of combining multiple files (usually JavaScript and assets) into a single file or a few files.
Dependency Graph
Entry
Output
Loaders
Plugins
Mode
Browser Compatibility
If you need to bundle a simple React app with one entry file, how would you configure Webpack's entry and output?
What happens if you forget to add a loader for .css files in your config and you import a stylesheet?
How would you enable source maps for easier debugging in a development build?
Your team added a new TypeScript file but the build fails with an unexpected token error. Walk me through how you'd debug the loader configuration.
We want to split vendor libraries into a separate chunk to improve caching. Which Webpack features would you use and why?
After switching Webpack mode to production, the bundle size didn't shrink as expected. What could be missing in the config?
Our monorepo contains multiple packages that share common utilities. How would you set up code splitting and shared chunks to minimize duplication across bundles?
During CI we see long build times due to many small modules. What strategies at the Webpack level could you employ to improve build performance without sacrificing incremental builds?
We need to support both modern browsers with ES modules and legacy browsers with transpiled code from the same codebase. How would you configure Webpack to output multiple bundles efficiently?
The company is migrating from a custom script‑based bundler to Webpack across dozens of services. What high‑level migration plan would you propose, considering config standardization, plugin ecosystem, and cross‑team ownership?
How would you design a shared Webpack configuration library that balances flexibility for individual product teams with enforceable performance and security standards?
If you had to evaluate whether to keep Webpack or move to an alternative like Vite or esbuild for a large‑scale front‑end platform, what criteria and trade‑offs would you consider?