Chapter 5. Tools: webpack and Babel
This chapter covers
- Using webpack to load Node.js packages via npm in order to use them in browser code
- Compiling code with Babel using webpack loaders
- Loading CSS with webpack loaders
- Using webpack plugins to prepare your code for production
- Creating multiple configurations to manage builds for multiple environments
The JavaScript ecosystem provides many great libraries and tools to make writing applications faster and easier for developers. To take advantage of them, you need to have tooling in place that can compile, transform, and prepare your code for production. Enter webpack, a build tool that’s entirely configuration driven.
I’m going to be completely honest with you: webpack isn’t an intuitive tool. I found it frustrating to work with at first. But it’s extremely powerful and worth learning. Webpack gives you the ability to include any JavaScript code in your build, even libraries that haven’t been set up to run in the browser (for example, npm packages). It also can take care of many other build steps, including compiling your code with Babel and preparing your code for production. This chapter covers all the basics you need in order to have a good workflow in your isomorphic project.
Note
If you ever want to start a React project with webpack set up for you, I recommend Create React App. This tool generates a base React app with webpack (https://github.com/facebookincubator/create-react-app). Note that it’s not isomorphic!