If you're looking for a simple React setup, you don't need to install Webpack. You should instead use
create-react-app, described in the Quick Start section. Manually installing and configuring Babel gives you more control over your stack, but isn't necessary to get started with React.
Plugins and presets
Babel comes in two parts: the core, and plugins. Each individual language feature that Babel can transform, such as ES2015 classes, has a separate plugin. Collections of plugins are grouped into presets, so that we don't have to install and configure hundreds of individual dependencies.
Which presets should we use?
We'll almost certainly want the
You'll also need the
react preset to use the React JSX language extension.
To use Babel in a project bundled with Webpack, we should use babel-loader. You can install the necessary dependencies with
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
We can then add the
babel-loader into our
We add a
module section if we don't have one already, specifying a new rule for loading
.js (and potentially
.jsx) files. We configure webpack to load all
.js files with the
node_modules, since the libraries we install here should already be compiled by the library authors, and because Babel can get slow when watching too many files at once. We specify the
cacheDirectory option to improve performance by caching compiled files.
We can configure Babel by including a
.babelrc file in the root directory of our project. Here we can specify which presets and plugins to use.
Given the presets we downloaded above, create a
.babelrc file and add the following:
Note that we want to use the
env preset with the
modules option set to
false, since Webpack can better optimize our code this way.