webpack in Your create-react-app
npx create-react-app
npx create-react-app my-appAnyone 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.
webpack is an open-source module-bundler for modern JavaScript apps that runs on Node.js. webpack processes your app’s modules, builds a dependency graph that maps all of the modules in your app, and then generates a bundle for them(usually one, but sometimes a small number of them). Dependency graphs are just directed graphs representing the dependencies of several objects towards each other. In this case, the objects are our app’s modules, and the dependencies are when modules require one another to function properly.
Why Bundle?
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.
webpack Abstracted
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.
- Loaders- JavaScipt and JSON files are the only ones that webpack understands out of the box. Loaders are the solution to this problem. They are are the piece of webpack that transforms the source code into JavaScript so that it can be bundled appropriately.
- 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.
