A Complete Webpack Setup for React

Build a React project with Webpack 4 and Babel 7

Why Webpack?

Congrats. You have started using JavaScript in your application. You have heard great things about how awesome it is. So you have a single script for your page, maybe 500 lines and it’s mostly ok to manage. As you decide to add more features, more developers join you, and the project grows.

Now the script file is big and clunky. It’s hard to maintain and to find particular sections. So, the natural decision is to split the files into several smaller files. Great! But how do you manage all of these files? And more importantly, in what order they have to be loaded! Some files depend on others to be loaded first.

You think about it for some time and decide that it would be very nice if we could add some way for a particular file to say what other files it needs to be available before it can run its dependencies if you will. Good news! Node.js includes a mechanism to do exactly what we want: define “modules” which can have some private/local parts, can export some public parts, and can require other modules.

Great, we now have solved the dependency problem, but we still have multiple files and the need to bundle it all up into a single file, and we need to make that file work in a…