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 (https://webpack.js.org).
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.