Learning is a treasure that will follow its owner everywhere.”
– Chinese Proverb
“Learning” is something we do constantly. It begins right as we enter this world… and hopefully follows us as we leave it. Whether that means learning how to walk, learning people’s names, learning how to do taxes (always a fun one), or in my case… learning the in’s and out’s of the static module bundler for JS applications, webpack.
This straight from webpack’s documentation:
At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
Yeah, at first I didn’t really understand it either, but after getting my hands dirty in my team’s JS application, it all started to make sense. It essentially just ensures that only necessary code is delivered to your browser, which in return optimizes loading times.
Now the ways in which webpack does this is using what’s called “entry” points which indicates which modules webpack should use to start building the dependency graph. This image used by a Tech Blogger named Skay illustrates it simply:
Now with our project, there are lots of different assets, and files being utilized. Webpack at first made things harder because all the right files needed to be in the right place and linked correctly. All necessary files needed to be added as “entry” points and yeah you get the point.
But as the beginning was difficult, just like learning anything new usually is, getting my hands dirty was the best thing to do. Getting into the code and seeing how it all connects has made the learning process quite enjoyable. I am excited to continue learning webpack.
