05 / 06

What are the core concept of Webpack?

Bundling is the process of combining multiple files (usually JavaScript and assets) into a single file or a few files.

  1. 1

    Dependency Graph

  2. 2

    Entry

  3. 3

    Output

  4. 4

    Loaders

  5. 5

    Plugins

  6. 6

    Mode

  7. 7

    Browser Compatibility

Difficulty: 6/10
Topics: entry & output, loaders & plugins, code splitting & caching

Scenario Questions

0-2 years experience
  1. 1

    If you need to bundle a simple React app with one entry file, how would you configure Webpack's entry and output?

  2. 2

    What happens if you forget to add a loader for .css files in your config and you import a stylesheet?

  3. 3

    How would you enable source maps for easier debugging in a development build?

2-5 years experience
  1. 1

    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.

  2. 2

    We want to split vendor libraries into a separate chunk to improve caching. Which Webpack features would you use and why?

  3. 3

    After switching Webpack mode to production, the bundle size didn't shrink as expected. What could be missing in the config?

5-8 years experience
  1. 1

    Our monorepo contains multiple packages that share common utilities. How would you set up code splitting and shared chunks to minimize duplication across bundles?

  2. 2

    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?

  3. 3

    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?

8+ years experience
  1. 1

    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?

  2. 2

    How would you design a shared Webpack configuration library that balances flexibility for individual product teams with enforceable performance and security standards?

  3. 3

    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?

Follow-up Questions

  • Which loader would you add to handle SCSS files and why?
  • What are the trade‑offs between using SplitChunksPlugin and dynamic import for code splitting?
  • How do you keep track of bundle size changes over time?