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

Init

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

Packages

Now we need to install all these packages.

Config

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.

developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store