Getting Started with Webpack

This chapter is all about Webpack: what it is, how to use it, and why we care. However, before we dive into Webpack, I have a confession to make.

We cheated a bit in the last chapter on application setup. There’s one last piece of our folder structure we need to add--the place where our React files will live.

As we discussed in the Dependencies section of the last chapter, one of React’s killer features is the componentization of user interfaces--splitting them up into small chunks of related HTML and JavaScript. For instance, a "Save" button may be one component, sitting inside a form component, next to a Profile Information component, and so on.

The beauty of the component structure is that everything related to a particular piece of the UI sits together (separation of concerns), also, these sections are in brief, readable files. As a developer, you can easily find what you’re looking for by navigating the folder structure, rather than scrolling through a monolithic JavaScript file.

In this chapter, we'll cover the following topics:

• How to structure our React project
• Setting up Webpack
• Adding a Dev server
• Getting started with JavaScript transpilation with Babel
• Activating hot reloading
• Building for production