Member-only story
6 Webpack Concepts for Advanced React Developers
Concepts to help you understand React from the inside
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:
Why Should You Care?
Most of the time you wouldn’t. But the knowledge of webpack can help you in some advanced cases:
- Scaffold an application from scratch
- Performance optimization
- Implement micro-frontends
Generally, having an overview of the bundling process makes you more confident about your craft and understand bugs in a production system.
How Webpack Works
Typically, webpack is configured through a file named webpack.config.js. This is where we can configure everything!
Let’s start with a simple configuration file and try to understand its various pieces.
