An introduction to webpack

So far, we have made quite a few references to webpack without going into any kind of detail as to what it is and why we need to use it. As previously mentioned, we won't be going into too much detail here, but we'll cover enough of the basics to point you in the right direction when it comes to needing to branch away from the default configuration.

What is webpack?

Webpack is what we call a module bundler, and acts as the middleman between our client-side source code and the JavaScript files that actually get run by the browser. Essentially, webpack allows us to build the frontend of a large and complex application as we would with a backend ASP.NET application using many different files and folders. If we think of each file as a module, they can reference other modules using import and export statements. webpack, then, quite literally bundles these modules together so we can reference a single output file in our HTML, as we would with any other JavaScript file...