02 / 03

How to set multiple targets?

Difficulty: 5/10
webpack configuration, multiple targets, build optimization

Although webpack does not support multiple strings being passed into the target property, you can create an isomorphic library by bundling two separate configurations:

The example will create a lib.js and lib.node.js file in your dist folder:

Scenario Questions

0-2 years experience

  1. 1We need to ship a small library that runs in both browsers and Node. How would you set up the webpack config to produce two bundles, one for each environment?
  2. 2If you add a second target to your webpack config, what changes do you need to make to the entry and output sections?
  3. 3What happens if you forget to set the 'target' field for one of the configs in a multi‑config setup?

2-5 years experience

  1. 1You added a second webpack config with target 'node' to your project, but the build for the web target now fails with a module not found error. How would you troubleshoot this?
  2. 2Explain the trade‑offs between using a single webpack config with multiple entry points versus an array of configs each with its own target.
  3. 3During CI, the node bundle is larger than expected after adding the second target. What steps would you take to investigate and reduce its size?

5-8 years experience

  1. 1Design a build pipeline for a shared UI component library that must output ES modules for browsers, CommonJS for Node, and a UMD bundle for legacy scripts. How would you structure the webpack configs and share common settings?
  2. 2When maintaining multiple targets, you notice that source‑map generation slows down the overall build time. What strategies would you employ to keep builds fast while still providing useful debugging info for each target?
  3. 3How would you handle differing external dependencies (e.g., native Node modules) across targets without duplicating configuration?

8+ years experience

  1. 1Our organization has dozens of packages, each needing web and node builds. Propose an architecture for a centralized, reusable webpack configuration system that scales across teams while allowing per‑package customizations.
  2. 2Discuss the long‑term maintenance implications of supporting multiple webpack targets in a monorepo. How would you set up CI/CD, versioning, and documentation to minimize friction?
  3. 3If we decide to migrate from webpack to a newer bundler that also supports multiple targets, what migration path would you recommend to preserve existing build outputs and avoid breaking downstream consumers?

Follow-up Questions

  • Can you walk me through the specific config fields you'd modify for each target?
  • What signs in the build output would tell you that a target configuration is incorrect?
  • How would you verify that both the web and node bundles behave as expected in their environments?
Share

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