DEV Community

WTF are Babel and Webpack 😵 ? Explained in 2 mins.

TechBos😎 on September 08, 2019

Babel and Webpack are apple🍎 and banana🍌. One never compares them side-by-side as they solve different problems. This post explains their different...
Collapse
 
micaelomota profile image
Micael Mota •

It's a really good article. But
actually apple and banana solve the same problem: hungry

Collapse
 
xgenvn profile image
Brian Ng •

Tbh, it will save human race in near future, as in:

  • an apple per day for perfect health
  • a banana for daily meal ...
Collapse
 
abdurrahmanriyad profile image
Abdur Rahman •

Good point, man. Hahaha.

Collapse
 
techbos profile image
TechBos😎 getd.io/ - Postman without native apps •

Haha good point!

Collapse
 
rupeshxbhatta profile image
Rupesh Bhatta •

Babel is a transpiler for ES6 to ES5, so that browser can understand the JS.
Webpack is a bundler for JS and other files that creates bundled file that the users browser can download.
Nice explanation!

Collapse
 
iiianous profile image
Ian Mostar •

That's great explanation short and concise. Can you also do CSS modules, CSS in JS, other ways of styling pros and cons :)

Collapse
 
techbos profile image
TechBos😎 getd.io/ - Postman without native apps •

Thank you! I will for sure consider this as my next post topic!

Collapse
 
devesabbir profile image
Sabbir Hossain •

Babel is a transpiler for ES6 to ES5, so that browser can understand the JS.
Webpack is a bundler for JS and other files that creates bundled file that the users browser can download.
Nice explanation!

Collapse
 
talr98 profile image
Tal Rofe •

Please note that minifying and uglifying your Node.js code is sometimes helpful.
The runtime Server scans your code. It scans for EOF and syntax. This operations takes time. When you minify your code - this is considered as performance improvement.

Collapse
 
abdurrahmanriyad profile image
Abdur Rahman •

Super simple way to explain. Very nice.

Collapse
 
techbos profile image
TechBos😎 getd.io/ - Postman without native apps •

Glad you enjoyed it!

Collapse
 
jpguisa profile image
Juan Pablo Guisasola •

Thank you for the article, really important difference to know

Collapse
 
techbos profile image
TechBos😎 getd.io/ - Postman without native apps •

Glad you enjoyed it!

Collapse
 
refiloedig profile image
Refiloe Digoamaye •

Great explanation. Looking forward to more content 🙂.

Collapse
 
techbos profile image
TechBos😎 getd.io/ - Postman without native apps •

Thank you!

Collapse
 
dariushstony profile image
Dariush •

That was exactly what I wanted to know.
Perfect!

Collapse
 
jeremiahjacinth13 profile image
Lena Jeremiah •

Nice article

Collapse
 
haamid profile image
Hamid Haghdoost •

Thank you! it was great.

Could you tell about gulp and some other tools that are trending these days?

Collapse
 
ashishyadavcs profile image
Ashish Kumar •

explained in easy way.. thank you
brand web designer

Collapse
 
yogeshyadav profile image
Yogesh Yadav • • Edited

To the point with super simple explanation. Nice Article.

Collapse
 
mohamedtaherali profile image
mohamed-taher-ali •

really awesome ,, thanks

Collapse
 
brunomonteiro1 profile image
Bruno Monteiro •

The ES5 snippet has the const keyword, which is ES6+ syntax.
Nevertheless, great article!

Collapse
 
tivod profile image
Tivo •

LOVE IT! Thank you! It is so much clearer now

Collapse
 
phatnhse profile image
Phat Nguyen •

Good article Boss!

Collapse
 
anesupaulngirande profile image
anesupaulngirande •

Thanks for the post.

Collapse
 
sanjarcode profile image
Sanjar Afaq •

Very nicely presented

Collapse
 
rizwan486 profile image
Rizwan Hasan •

Thanks for clearing up confusion.

Collapse
 
marnieeee__is_online_now profile image
Marnieeee •

Nice conclusion easy to understand !!