Webpack allows you to write as many JS files you want and organize those files along with styles, images and more in a way that makes sense for developing and supporting your project and then bundles everything together in such a way that the end result is an bundled file that is transformed, minified and optimized to run efficiently in any browser you are targeting.
Webpack does this by creating a dependency graph of every part of your project then uses that information to intelligently generate one or more files based on your project needs. Webpack and its plugins are installed in the normal way using Node Package Manger (NPM).
Note: As of Webpack 4, it does not require a config file. This is important because the webpack config file could be a barrier to starting modern projects for many developers. Webpack now bundles your entire frontend app together using intelligent defaults significantly lowering the barrier of entry for the majority of devs. Devs or organizations wanting to take more fine grain control of code bundling still have the option to customize a webpack config file!
So the first tool that we’re gonna look to use is Webpack. So if you’re not familiar, Webpack is a module builder and what that means is, Webpack is a tool that we use during development of our code. It’s not something that’s actually used during the run time of our assets. So, it’s only used during development.
So to actually use Webpack, it’s actually quite easy. It’s available through NPM so we can install it like any other node package and then what we need to do is we actually need to create a configuration file so Webpack config file and that’ll allow us to tell Webpack how to bundle our code.