Imagine you just arrived Lagos in Nigeria, and you want to get to your hotel from the the airport so you can relax after the long trip. Now Lagos is a large city made up of many other areas. To get to your hotel you need to first locate the town where the hotel is, also you need to know the street and building number of the hotel. If Lagos was not structured in different pieces comprising of town’s, street, building numbering it will be quite hard to transit the city. This Structure is MODULAR in nature( i.e having different pieces that can be connected to build up something ).
webpack does this by creating a dependency graph for your project. The dependency graph keeps track of your project modules(different pieces) and their various dependencies(the other piece of your project code) and bundles them into one file(usually named bundle.js). This way webpack can easily keep track of your project modules and manages them for you.
This is no substitute to the original webpack core concepts found in the webpack documentation. So make sure to check it out.
Output is a path to a file where webpack throws all the bundled modules into.
It will be good you know that the bundled modules is what is served to the browser and that is what you should add to your html file.
bundle.js should be included in the script tag of your html file.
Remember when i said webpack allows you to use language updated features that are not yet supported by browsers? loaders give webpack that superpower.
plugins at its core basically add more functionality to your webpack compilation process. plugins helps you add custom built functionalities the webpack build process. Its more like plugins give webpack more superpowers during its build process.
In a bid not to make this boring and bulky, I decided to make this blog post modular, so I would be creating another module on how to include and configure webpack for your projects. See you in the next module.