Chapter 12. The Webpack build tool


This chapter covers

  • Adding Webpack to a project
  • Modularizing your code
  • Running Webpack and testing the build
  • Performing hot module replacement

Before we go any further with the React stack (a.k.a. React and friends), let’s look at a tool that’s essential to most modern web development: a build tool (or bundler). You’ll use this tool in subsequent chapters to bundle your many code files into the minimum number of files needed to run your applications and prepare them for easy deployment. The build tool you’ll be using is Webpack (

If you’ve not come across a build tool before, or if you’ve used another one such as Grunt, Gulp, or Bower, this chapter is for you. You’ll learn how to set up Webpack, configure it, and get it running against a project.

This chapter also covers hot module replacement (HMR), a feature of Webpack that enables you to hot-swap updated modules for those running on a live server. First, though, we’ll look at what Webpack can do for you.

12.1. What does Webpack do?

12.2. Adding Webpack to a project

12.3. Modularizing your code

12.4. Running Webpack and testing the build

12.5. Hot module replacement

12.6. Quiz

12.7. Summary

12.8. Quiz answers