What is a webpack Module?

In Webpack, a module is essentially any file that Webpack can process as part of your application's dependency graph. Modules are the building blocks of a Webpack application, and they represent different pieces of functionality or logic. Webpack takes modules as input, processes them with loaders, and bundles them into output files. Loaders describe to webpack how to process non-native modules and include these dependencies into your bundles. The webpack community has built loaders for a wide variety of popular languages and language processors

In contrast to Node.js modules, webpack modules can express their dependencies in a variety of ways. A few examples are:

1
An ES2015 import statement
2
A CommonJS require() statement
3
An AMD define and require statement
4
An @import statement inside of a css/sass/less file.
5
An image url in a stylesheet url(...) or HTML <img src=...> file.

Difficulty: 5/10

Topics: module resolution, loaders, dependency graph

Scenario Questions

0-2 years experience

1
You add a new styles.scss file and import it in a component. What does webpack consider that file, and what steps does it go through before it ends up in the bundle?
2
After creating a new utility JS file and importing it, the bundle size stays the same. Why might webpack not have created a separate module for it?

2-5 years experience

1
Your app throws a 'module not found' error after upgrading webpack. How would you debug the module resolution process to fix it?
2
You need to split vendor libraries into their own chunk using SplitChunks. How does your understanding of webpack modules shape the configuration you write?
3
A circular import between two modules causes a runtime error. Explain why this happens in webpack's module system and how you would detect it.

5-8 years experience

1
In a monorepo with thousands of files, build times are growing. How would you reorganize module boundaries or loader usage to speed up webpack builds?
2
Design a custom loader that converts a proprietary .xyz file into a JavaScript module. What do you need to consider about module caching and the dependency graph?
3
When migrating from webpack 4 to 5, some automatic polyfills for Node core modules disappear. How do you decide which modules to polyfill and configure them?

8+ years experience

1
Your company plans to adopt a micro‑frontend approach with multiple bundlers. How would you define module boundaries so each team can ship independently while still sharing common modules efficiently?
2
Discuss the long‑term maintenance impact of treating assets like images and CSS as webpack modules across many teams, and propose a strategy to standardize this practice.
3
If you need to support both server‑side rendering and client‑side bundling, how would you design your module system to avoid duplication and keep resolution consistent across environments?

Follow-up Questions

❓How does that affect the final bundle size?
❓What would you check if a module fails to load at runtime?
❓Can you walk me through adding a custom loader for a new file type?