Webpack

Webpack is a module bundler ¹, which is a tool that takes individual JS files + dependencies and puts them into a single file.

Q: Why is do you need to bundle files?
A: Browsers are not able to resolve dependencies (ie. imports) natively, so if you make use of certain dependencies (with javascript, you almost certainly have to), you have no way of importing them. (from this you can also tell that a module bundler handles the dependency graph for you, ie. in which order should libraries be imported etc)

Q: can’t we just load these dependencies in order manually in the browser?

<script src="dep1.js"></script>
<script src="dep2.js"></script>
...
<script src="dep6.js"></script>

A: Yes we can, but each dependency is an additional http call.

For the future reader: Yes JS modules in the browser are somewhat of a thing already

What is tree-shaking? Removal of unwanted dependencies from the dependency graph/

Handling chunks

Bundle splitting vs module splitting

References

1. https://www.freecodecamp.org/news/lets-learn-how-module-bundlers-work-and-then-write-one-ourselves-b2e3fe6c88ae/