There is a great official way introduced by Facebook to start a React project
You could start your project by copying boilerplate code from a Github repository or simply running the
create-react-app command. Though create-react-app is a great tool,
Let’s jump right in.
What Is Webpack?
Webpack official doc says:
either from its CLI or API. If you’re still new to webpack webpack, please read through the core concepts and this comparison to learn why you might use it over the other tools that are out in the community.
What Is Babel?
Babel official doc says:
- Transform syntax
- Polyfill features that are missing in your target environment (through @babel/polyfill)
- Source code transformations (codemods)
- And more!
These are the npm modules we are going to import in our project.
Let’s get started.
1) Set up a project folder and move into it. This will be our final project structure
mkdir react_babel_webpack && cd react_babel_webpack
2) Creating a package.json file into the project root folder
Answer these questions and press yes to proceed.
3) Create src folder and these files in your project root folder
react_babel_webpack>type nul > src/index.html
react_babel_webpack>type nul > src/index.js
Note: index.js and index.html should be in the src folder.
4) Install React and React-Dom modules
npm i react react-dom –save-dev
5) Install Babel modules
In this step, we are going to install these Babel’s modules.
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react –save-dev
6) Install Webpack’s modules
In this step, we are going to install following Webpack’s modules.
npm i webpack webpack-cli –save-dev
webpack-dev-server module as well.
npm i webpack-dev-server –save-dev
7) Add start and build settings in scripts node of package.json.
8) Install style-loader and
css-loader webpack helper modules to use CSS in our application
npm i css-loader style-loader –save-dev
9) Install html-webpack-plugin and html-loader
These are HTML webpack html plugins for displaying our HTML pages.
npm i html-webpack-plugin html-loader –save-dev
10) Create webpack.config.js file at root project folder
Once all modules are installed, we have to create a
webpack.config.js file to keep settings here. Let’s see how to create this file.
react_babel_webpack>type nul > webpack.config.js
Once this config file is created, copy the below code in this config file.
11) Create .babelrc file in root project folder
react_babel_webpack>type nul > .babelrc
Add these lines of code in this file as well.
12) Open index.js file and add these lines of codes.
13) Open index.html file and add these lines of codes
14) Run your project
Everything is setup now. It’s time to run your app. Run this command in your terminal.
If everything is setup properly, you will see browser window with a message.
15) Build the app
By running below command, it will build React app.
npm run build
It will create a dist folder in the project root folder having
In this blog, we learned about how to create your React app with the help of Webpack and Babel. When you set up your own react project in this way it is pretty easy to customize and optimize it and upgrade dependency.