React project building with Webpack

In this tutorial we will see how we can build the React application with Webpack.
You will need following two files to get started

This is the folder structure for this tutorial

index.html file in dist folder in your working directory and it will have the following code


index.js file is located at src folder and compiled versions of it will be placed at dist\assests\index.min.js

So your index.js file will have following contents

Hello World New

, document.getElementById(‘root’) )

You can run following command to make the package.json file

This will create the package.json file

You will need Babel-CLI to compile JS code

Now you can install the presets using following command in your terminal

I will create the webpack.config.js file in the root directory of the project and it should have the following contents

Now you can install the Webpack

New you can install the Babel-Loader

Next, you can install the Webpack Dev Server

Your final package.json file will be like this

Now you can run the following npm command to transpile the js code and start the web server

Now you can see the web page at http://localhost:3000/