Install Babel Dependencies

Babel is a transpiler. The transpiler transforms ES6 code to use ES5 syntax that older browsers can understand. While Babel itself is very feature-rich and can be used independently, for our purposes, we can use the corresponding babel “loaders” to do the job.

Webpack is just a generic module bundler. You need to configure it with loaders to transform code from one state into the other.

Before we can use any loaders, we need first to install them. For our purpose, we will have to install the relevant babel loaders. Use the following command to install the babel loaders and the “presets”.

npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react

If the command ran successfully, these loaders would be installed in the node_modules folder and the package.json would be modified.