DEV Community

Cover image for Setting up Webpack 5 with React and Babel from scratch

Setting up Webpack 5 with React and Babel from scratch

RiyaNegi on March 21, 2021

Creating your own Webpack configurations sounds intimidating to even intermediate React developers. But the best way to tackle a problem is to face...
Collapse
 
ashu78600 profile image
ashu78600 •

Nice tutorial . I think webpack will inject script tag in index.html. We don't need to do it manually. Instead of creating .babelrc we can inject it like this
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},

Collapse
 
aminsoraya profile image
aminsoraya •

It was an error : options has an unknown property 'watchContentBase'.
So I changed watchContentBase to liveReload and error solved.
react version : 18.2
webpack version: 5.74

Collapse
 
kunalt96 profile image
Kunal Tiwari •

It's simple and awesome for new starters or developers. Keep up the good work 🙂

Collapse
 
riyanegi profile image
RiyaNegi •

Thanks a lot !😊

Collapse
 
kunalt96 profile image
Kunal Tiwari •

Welcome && Welcome to the community

Collapse
 
andreidascalu profile image
Andrei Dascalu •

Pretty nice intro. I always advocate doing it "the hard way" a few times rather than use ready-to-go setups like create react app.

Collapse
 
riyanegi profile image
RiyaNegi •

Thanks! and yeah It's pretty intimidating to do "the hard way", but once you start working on it, you understand things a lot better!

Collapse
 
sujit510 profile image
Sujit Singh •

A great article. Just wanted to correct - it should be node_modules instead of nodeModules, no?

Collapse
 
sheben404 profile image
sheben •

Thanks for your tutorial !

In "webpack-dev-server": "^4.2.0" :
"watchContentBase" was renamed to "hot"

Thanks again for your articel.

Collapse
 
tacck profile image
Kihara, Takuya •

This is awesome!
I am a React beginner, and this is the article I want.
Thanks!

Collapse
 
ravisaxena profile image
ravsaxena •

Thank you so much Riya.
It is really very helpful.

Collapse
 
arunroy profile image
Arun Roy •

Thank you for writing this :) @riyanegi

Collapse
 
onivue profile image
onivue •

Great Article!
Question: How can i include de License.txt File inner the JS Bundle File?

Thanks and regards!