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😎

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😎

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
 
jpguisa profile image
Juan Pablo Guisasola

Thank you for the article, really important difference to know

Collapse
 
techbos profile image
TechBos😎

Glad you enjoyed it!

Collapse
 
refiloedig profile image
Refiloe Digoamaye

Great explanation. Looking forward to more content 🙂.

Collapse
 
techbos profile image
TechBos😎

Thank you!

Collapse
 
abdurrahmanriyad profile image
Abdur Rahman

Super simple way to explain. Very nice.

Collapse
 
techbos profile image
TechBos😎

Glad you enjoyed it!

Collapse
 
tivod profile image
Tivo

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

Collapse
 
brunomonteiro1 profile image
Bruno Monteiro

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

Collapse
 
dariushstony profile image
Dariush

That was exactly what I wanted to know.
Perfect!

Collapse
 
mohamedtaherali profile image
mohamed-taher-ali

really awesome ,, thanks

Collapse
 
yogeshyadav profile image
Yogesh Yadav • Edited

To the point with super simple explanation. Nice Article.

Collapse
 
ashish221306 profile image
Ashish Kumar

explained in easy way.. thank you
brand web designer

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
 
jeremiahjacinth13 profile image
Lena Jeremiah

Nice article

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
 
phatnhse profile image
Phat Nguyen

Good article Boss!

Collapse
 
marnieeee__is_online_now profile image
Marnieeee

Nice conclusion easy to understand !!