Things to know about Webpack
Let’s begin with the understanding of what Webpack is, before we dive into the core concepts of Webpack.
Webpack is a module bundler that takes the modules whether that’s a custom file that you have created or something that was installed through npm. It generates static assets to represent those modules. You can then take the fully dynamic application and package it all up into static files. These files can then be uploaded and deployed to your server. You can also extend webpack’s functionality with plugins, loaders which all have their own separate set of configurations.
Now that you know what webpack is, let’s dive into the core concepts behind the webpack which are important to understand.
- Webpack always needs an entry point, where it should start looking for the dependencies. There can be a multiple entry points but it needs at least one entry point as a clue for webpack to know where should it starts its journey.
- Webpack also needs to know the output, where should it store the bundle, or if you have multiple entry points then it will have bundles, one for each entry point.
Plugins – webpack plugins allow extending any functionality inside the bundle itself. For example, Html webpack plugin will allow you to provide the template for the index.html file. It will automatically inject the assets for you and even handle things like Google Analytics for you.
In simple terms, you can care as much as you want or not care at all, but either way, you get to use webpack as its default in the technology.