Member-only story
6 Webpack Concepts for Advanced React Developers
Concepts to help you understand React from the inside
Published in
4 min readApr 21, 2021
More often than not, we use create-react-app for scaffolding a new React application and call it a day.
But under the hood, a lot of libraries are working to ensure everything just works. And webpack is the most important of them.
Today, we will take a deep dive into webpack and try to understand the different parts of webpack that are relevant to React development.
What’s the Problem?
We know that our browsers don’t understand anything but HTML, JavaScript, and CSS. So the obvious questions are.
- How our browsers understand other files like
.jsx - How are all the different files loaded into the browser?
- How our application is bundled?
- How we can optimize them?
Webpack to the Rescue
Webpack is here to save the day for us! It’s the most popular bundler out there and for obvious reasons!
What webpack does is convert everything into browser-readable files that are nicely depicted in the following image:
