webpack in Your create-react-app

npx create-react-app

npx create-react-app my-app

Why Bundle?

Fig. 1 Source

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…

  • 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+.

A climate scientist turned software engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store