Component Library Setup with React and Webpack

For when you don’t want to build a SPA but rather individual bundles for each component

I recently decided to build a few components in react to add to my test website. I wanted to sprinkle them over my site, one component at a time, with the backend rendering and routing provided by a dot net core app.

I realized that there were virtually no tutorials out there on how to do this, so I ended up following a trail of breadcrumbs across the internet until I had finally figured it out. Check out my sources after reading, because those folks helped me to come up with this article.

What we’re trying to build is a react application that rather than producing a single JS bundle for an SPA, produces many bundles, one each for several components.

The bundles can then be added onto the pages that need them. If I need a search page component, I can add the script for that component to the search page ONLY, and so on. This is in my opinion a superior configuration for applications that do not rely on React (or other JS frameworks) for the entire application, but do have few pages with enhanced functionality. You could of course create multiple React applications that each export a single bundle, depending on the sinze of each of your react…