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
 
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
 
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
 
sujit510 profile image
Sujit Singh

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

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
 
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
 
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!

Collapse
 
ravisaxena profile image
ravsaxena

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