Questions
1 of 1
What is output property used for?
Difficulty: 5/10
bundle naming, publicPath, asset emission
The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.
- 1
while there can be multiple entry points, only one output configuration is specified.
- 2
The minimum requirement for the output property in your webpack configuration is to set its value to an object and provide an output.filename to use for the output file
- 3
If your configuration creates more than a single 'chunk' (as with multiple entry points or when using plugins like CommonsChunkPlugin), you should use substitutions to ensure that each file has a unique name.
javascript
Scenario Questions
0-2 years experience
- 1We need a single bundle called app.bundle.js inside a 'dist' folder. How would you set the output property to achieve that?
- 2What happens if you leave out the filename field in the output configuration?
- 3If the app will be served from '/static/', which output option controls the URL that browsers use to fetch assets?
2-5 years experience
- 1Your team added an 'admin' entry point, but the generated files are overwriting the main bundle. How would you adjust the output config to keep the bundles separate?
- 2During CI you notice the bundle name includes a hash, but the deployment server expects a static filename. What change to output would you make?
- 3Images referenced in CSS are being emitted to the wrong folder. Which output setting would you modify to control the public path for those assets?
5-8 years experience
- 1We are moving all static assets to a CDN and need every chunk and asset to resolve correctly at runtime. Describe how you would configure output (filename, chunkFilename, publicPath) to support this at scale.
- 2Our monorepo builds several micro‑frontends that share a runtime. How would you design the output configuration to avoid name collisions and enable lazy loading across apps?
- 3We want long‑term caching with deterministic filenames but also need hot module replacement in development. How would you balance output.filename and related settings?
8+ years experience
- 1We are migrating dozens of services from Webpack 3 to Webpack 5. What strategy would you use for the output configuration to standardize bundle naming, public paths, and asset handling while still allowing team‑specific tweaks?
- 2We plan to serve bundles from multiple edge locations, each with a different base URL per region. How would you architect the output property (perhaps using a function) to generate region‑specific publicPath without duplicating config files?
- 3Considering future adoption of Module Federation, how should we structure the output settings now to minimize refactoring later, especially regarding filename patterns and chunk loading paths?
Follow-up Questions
- Why did you pick that particular filename pattern?
- How does publicPath affect lazy‑loaded chunks at runtime?
- What steps would you take to verify the output configuration in a production build?