Marco has already walked you through everything. I would just like to point you to this amazing visual explanation by Webpack itself.

Webpack is...

a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

- Webpack Docs

what does that mean? Let's say, you write a web application. Nothing fancy there, right? You write your Pug and SCSS, and decide to use TypeScript for the code side. Just call three commands on your index files and it'll output a nice static web application. Yeet!

But what's that? You actually want to add npm packages? And since they result in big chunks, you want to split them into smaller JS files, so the browser only downloads what it needs at a time? Oh no, there is some JS2018 mixed in, so better set up Babel! Arghh, dependency XY includes all of Bootstrap in order to do some complex feature you have no time to develop yourself? Oh no! Now you ship several megabytes in code to clients. What will customers on mobile clients say about that? Better get some treeshaking and cleaning set up. But don't forget about linting and integration tests. After doing all that, JS code maps suddenly stopped working!!!??? 💣💣💣💥💥💥💥💥💥💥💥💥💥💥💥

Wow. So many things are relevant for today's web applications. Even if you "just want to build a simple interactive web application", things will pile up, and you will have to start to somehow configure many tools, maybe even write a script which makes them all work together somehow™ in an efficient way, streaming code, markup and styling from one tool to another. That's where bundlers, like Webpack, Parcel, Rollup, etc. come in. They provide a build-pipeline and this way lay out an easily configurable and plug-able foundation for your builds. Most tasks listed above are solved simply by adding a plugin. Minimal configuration, minimal coding, maximal effect. Need to split code? A few lines of configuration save you, instead of rewriting your app code and losing the overview and control about what's going on.

Personally, I recommend using different bundlers for different scenarios. Webpack is a big solution with many many knobs, so it might not be the right fit if all you want to do is write a small static homepage (maybe Gulp is enough?). Imho, Rollup is a lot easier to use for libraries - there is no HTML or CSS, so why use a general purpose tool if Rollup can save the day? Parcel seems to be a fairly easy bundler for when you have a simple application and don't need to do micro-optimizations. It gets most of the stuff done automagically (even building your Rust files to WASM and binding them into your HTML). Webpack is the very big solution, for when you need everything and the kitchen sink.

Our team uses Webpack to build several bundles out of a single code-base for a web app which will be used by many people on different client and in different browsers (including museum software, like IE) after release. Webpack boosts our developer ergonomics by keeping the source together, but enables us to optimize how we ship code to browsers. Our Webpack configuration files add up to ~70LoC, with several build options (e.g. dev and prod) available.