DEV Community

Cover image for How to setup Webpack and Babel for React

How to setup Webpack and Babel for React

Ismile Hossain on September 12, 2019

All of us have used CRA(create-react-app) when we worked with React. It's an awesome tool. It gives us just to focus on React by letting take care ...
Collapse
 
vanevo00 profile image
Vojtech

Very helpful thanks!

Collapse
 
iamismile profile image
Ismile Hossain

Welcome🙂

Collapse
 
ivan_jrmc profile image
Ivan Jeremic • Edited

The easiest tutorial to follow I have ever seen! Every tutorial made on the earth should be structured like this one! Thank you so much!

Collapse
 
iamismile profile image
Ismile Hossain

Welcome🙂

Collapse
 
lukasdoesdev profile image
Lukas Does Dev

Super helpful. Thanks!

Collapse
 
iamismile profile image
Ismile Hossain

Welcome 🙂

Collapse
 
rana_talha profile image
Rana Talha

sir..? can you help me please if possible.

Thread Thread
 
rana_talha profile image
Rana Talha
Thread Thread
 
iamismile profile image
Ismile Hossain

Sure. How can I help you?

Collapse
 
ablaabiyad profile image
ablaabiyad

Thanks a lot Ismile.

I had to register in github then here, so I can write this comment.
I hope this will be my beginning :)

Collapse
 
iamismile profile image
Ismile Hossain

Welcome🙂
And All the Best for You.

Collapse
 
devsoonote profile image
Soo

Thank you a lot! :-)

Collapse
 
iamismile profile image
Ismile Hossain

Welcome🙂

Collapse
 
mikehale profile image
Mike Hale

It's not mentioned above, but if you use the sass option you need to change the css import in app.js to:

import './styles/styles.scss'

Collapse
 
iamismile profile image
Ismile Hossain

Thanks🙂

Collapse
 
lordliquid profile image
Robert Cutright • Edited

Thanks for the helpful tutorial!

If you are doing this tutorial around time of this comment you may experience an error similar:

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:

  • C:\Projects\react-setup-tutorial\node_modules\webpack-dev-server\bin\webpack-dev-server.js

My Working Solution:

In your 'package.json' -

change:
"dev-server": "webpack-dev-server"

to:
"dev-server": "webpack serve"

Thread Thread
 
iamismile profile image
Ismile Hossain

Thank you🙂

Collapse
 
bludnic profile image
bludnic

Typo in two places:
cheap-module-eavl-source-map => cheap-module-eval-source-map

Collapse
 
iamismile profile image
Ismile Hossain

Thanks for noticing🙂

Collapse
 
msdorachua profile image
Dora Chua

Thanks so much, your tutorial was easy to follow and works flawlessly! Good job! :)

Collapse
 
iamismile profile image
Ismile Hossain

Welcome🙂. Thanks to you also for appreciating my work.

Collapse
 
hgg profile image
HGG

Thanks, great help.

Collapse
 
iamismile profile image
Ismile Hossain

Welcome🙂

Collapse
 
muhiddingithub profile image
Muhiddin Jumaniyazov

Hot reload is working with running dev-server?

Collapse
 
iamismile profile image
Ismile Hossain

Yes. It works.

Collapse
 
codeurh24 profile image
codeurh24 ☠️

Great, thank you !

Collapse
 
iamismile profile image
Ismile Hossain

Welcome🙂

Collapse
 
pfalzergbr profile image
pfalzergbr

After a full afternoon of struggle, you just helped me setting this up in 5 minutes. Thank you :)

Collapse
 
iamismile profile image
Ismile Hossain

Welcome🙂