It internally builds a dependency graph from one or more entry points and then combines every module our project needs into one or more bundles, which are static assets to serve your content from. Since version 4.0.0, webpack does not require a configuration file to bundle your project.

What is Webpack?

Difficulty: 5/10

module bundling, loaders & plugins, configuration

Webpack is a static module bundler for JavaScript applications. Its main purpose is to bundle and optimise static assets, such as JavaScript files, CSS, and images so that they can be efficiently served to a web browser.

1
It internally builds a dependency graph from one or more entry points and then combines every module our project needs into one or more bundles, which are static assets to serve your content from.
2
Since version 4.0.0, webpack does not require a configuration file to bundle your project.

Scenario Questions

0-2 years experience

1How would you set up Webpack to bundle a simple React app that uses JSX and CSS?
2If you add a new image asset and reference it in a component, what steps does Webpack take to include it in the bundle?
3What happens if you forget to add a loader for .ts files in your Webpack config?

Follow-up Questions

Which loader would you choose for processing SCSS and why?
How does the 'mode' setting affect the generated bundle?
What metrics do you look at to evaluate the impact of a new plugin on build time?