This big file is called a "bundle" in Webpack parlance. A module bundler then is something which collating lots of small pieces into something larger and self-contained.
The powerful ecosystem of Webpack plugins and extras makes Webpack seem confusing as it appears to do so much. All the extra things such as compiling ES6/7 to ES5, CSS modules and code splitting are just nice extras afforded to us by Webpack.
An optional feature exists called code splitting. This feature slices the bundle generated from your source code into little bundles. The advantage of having lots of little bundles is that they can be loaded on demand meaning the user doesn't have to download the whole app up front in one big bundle.
We need a module bundler like Webpack to resolve dependencies. On the server side Node has a built-in module resolver where you can "require" modules or in ES6 this syntax is 'import'. However browsers do not come with this functionality built in.
Webpack can understand the relationships between multiple files and "resolve" them in a process called dependency resolution. If one depends on another we call the latter a dependency of the former. The process of dependency resolution involves traversing all the files in your code starting from the entry point. The process is recursive or in other words self-repeating. Dependencies of dependencies are followed until they are all mapped out. The starting point is a file Webpack calls the "entry point" often named "app.js" or "index.js".
Dependency resolution doesn't just which files are needed but the order they are required in since any dependency can rely on another.
Without Webpack we have two options.
1 - Develop from one big file. This would make development impractical as readability and maintainability would be severly hampered.
Traditionally apps have been server side rendered. This means that a request is made by a client to a server and all the logic is on the server. The server spits out a static html page back to the client which is what they see in their browser. This is why whenever you navigate in old server-side rendered apps you will see the page flash as it refreshes, there is a delay while the server generates the new page.
Nowadays single page applications (SPAs) are becoming ever more popular. SPA's are windowed within a single URL and we never need to refresh. This is considered a nicer experience for the user as it feels slicker not having to refresh. The downside of course is that SPAs are more complicated than their counterparts.
You may have wondered how Webpack differs from Webpack Dev Server. The latter as the name suggests, is NodeJs server. Its purpose is to propagate changes from your webpack bundle to your browser during the development of your app updates your browser with the changes in your code from your bundle as you develop on your machine.
Hot module reloading is an additional extra which makes your development life easier. This feature allows the app to continue running in its current state whilst the parts you are changing can be swapped out live. We inject only the parts of the code we have edited in order to refresh only the parts of the app we have changed - the hot modules whilst the cold modules are left the same keeping the state in our browser. As an example say you are on the "about me" page of your app and you update the colour of the navbar you don't want to be redirected back to the root page of your app you want to stay on the page you are on and see the navbar colour change.
Finally have a look at BundlePhobia if you want a useful tool for calculating the effect an NPM package will have on your bundle size. The size of some popular packages might surprise you.