npx create-react-app my-app
Anyone who has started a random React project from scratch has undoubtedly used the above line of code. Well, maybe not titling your app ‘my-app,’ but you understand. React does so much legwork for you when building out the framework of your new app, and unless you’ve done some digging under the hood, a lot of it might as well just be magic. One incredibly important thing that React does is it utilizes webpack.
Okay. So why bundle? Bundling decreases the wait time for the app to load in the browser. It does this by drastically minimizing the number of requests the browser has to make to fully load the app. Figure 1 shows the steps necessary in completing a single GET request. Modular programming has become the norm, because it makes for easier verification, testing, and debugging. BUT, if the browser has to send a request for every module, asset (think images), or file that app has, it sort of defeats the purpose now, doesn’t it? The user would be waiting forever for things to load. Enter, bundling. Bundlers, like webpack, combine all the modules of an app into one file that is sensible for its target environment. In most cases, that environment is a browser. For HTTP 1.1, a single bundle file made the most sense. However, with HTTP 2 and modern caching methods, often times multiple smaller bundles that are run parallel to one another is a more optimal choice.
There are a few key components, or core concepts as webpack puts it, that help understand how webpack is working under the hood. This can all be found with a much greater depth in the webpack docs. I’ve just distilled them down here for a quick once-over level of understanding. I probably should have said bundled instead of distilled right? No matter. We begin where most things generally do…
- Entry Point- webpack needs a place to begin. A ‘head module.’ From this module, webpack begins building the dependency graph that we discussed earlier. The module that React uses by default is
index.js. This makes sense, because all other modules build off of that file, thus, so does every dependency.
- Output- this is just the property that webpack uses to determine where to emit the bundles it creates as well as how to name them.
- Plugins- webpack describes them as ‘the backbone’ of the entire operation. Plugins are used to help optimize the bundling process. They also help manage assets and provide environment variables.
- Browser Compatibility and Environment- Currently, webpack supports all browsers that are ES5-compliant or later. webpack 5 runs on Node.js version 10.13.0+.
Hopefully this brief introduction gives you a slightly better understanding as to the magic that is happening under the hood when building a React app. webpack is simply one very important piece that makes the engine run.
Concepts | webpack