ReactJS: Babel and WebPack
WebPack
WebPack is used for module packaging, development, and production pipeline automation. We will use webpack-dev-server during development, WebPack to create production builds, and WebPack CLI provides a set of commands. WebPack compiles these into a single file(bundle). To install WebPack use the command shown in the below .
npm install webpack webpack-dev-server webpack-cli — save
You can also use the above command separately which can be shown as below.
npm install webpack — save
npm install webpack-dev-server — save
npm install webpack-cli — save
Babel
Babel is a JavaScript compiler and transpiler used to convert one source code to others. It compiles React JSX and ES6 to ES5 JavaScript which can be run on all browsers.
We need babel-loader for JSX file types, babel-preset-react makes your browser update automatically when any changes occur to your code without losing the current state of the app.
Get SAMEER MISTRY’s stories in your inbox
Join Medium for free to get updates from this writer.
Install webpack use the following command shown in the below:
npm install babel-core babel-loader babel-preset-env babel-preset-react babel-webpack-plugin — save-dev
You can also use the above command separately which can be shown as below:
npm install babel-core — save-dev
npm install babel-loader — save-dev
npm install babel-preset-env — save-dev
npm install babel-preset-react — save-dev
npm install babel-webpack-plugin — save-dev
To complete the installation process, you need to add the following files in your project folder. These files are index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create these files by manually, or by using the command prompt.
touch index.html
touch App.js
touch main.js
touch webpack.config.js
touch .babelrc
