01 / 03

What is target in configuration file?

Difficulty: 5/10
output configuration, environment targeting, module resolution

Because JavaScript can be written for both server and browser, webpack offers multiple deployment targets that you can set in your webpack configuration.

To set the target property, you set the target value in your webpack config:

Scenario Questions

0-2 years experience

  1. 1If you need to bundle a library that will run in the browser, how would you set the target field in webpack.config.js, and what effect does that have on the generated bundle?
  2. 2Suppose you accidentally set target to 'node' for a client‑side app. What symptoms would you expect when you load the page in a browser?

2-5 years experience

  1. 1You are adding server‑side rendering to an existing React app. How would you configure target for the server bundle versus the client bundle, and why?
  2. 2During a CI build you notice that the bundle size exploded after changing target from 'web' to 'browserslist'. Walk me through how you would debug this and what trade‑offs you consider.

5-8 years experience

  1. 1Our monorepo builds both a Node CLI tool and a web UI using the same shared code. How would you structure webpack configurations and use the target option to avoid duplication while ensuring optimal output for each environment?
  2. 2When targeting 'electron-main' versus 'electron-renderer', what are the key differences in module handling and how would you adjust the config to prevent runtime errors in production?

8+ years experience

  1. 1We are planning to migrate a large legacy codebase that currently uses webpack target 'web' for all bundles to a micro‑frontend architecture that includes server‑side rendering and edge functions. Describe the architectural considerations and a phased approach for updating target settings across teams while maintaining backward compatibility.
  2. 2How would you evaluate the long‑term maintenance impact of using custom target values (e.g., a custom environment) versus standard targets, especially when multiple teams depend on shared webpack configs?

Follow-up Questions

  • What default polyfills does webpack include when target is 'web'?
  • How does changing target affect the handling of __dirname and __filename?
  • Can you override any of the target‑specific defaults, and if so, how?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.