Setup React+Babel+Webpack4 for you project

Setting up React with Babel is already available with create-react-app. If you need something configured and just start writing stuff, use that. In this article, we will create our own configuration boilerplate. In doing this we will better understand how these things actually work together.

Photo by Bench Accounting on Unsplash


Setting up working directory. In it, we will prepare the folder structure and some files.


Now we need to install all these packages.


Open config/webpack.config.js and put this content in it. This tells webpack how to work with out files in the src folder and how to bundle them together and deliver them.

Babel also needs some configuration in the .babelrc file.

Final touches

Currently our index.html and index.js files are empty. Lets put some content in them.

Now we just need to update package.json so we can run it. To do so, open package.json and add this line under scripts

"start": "webpack-dev-server --mode development --config webpack.config.js --open --hot"

If everything turned out fine, run npm start and the browser should open with the content from the react app.