DEV Community

Mirza Hassan
Mirza Hassan

Posted on

 

Babel vs Webpack - What are they

Babel

Babel is a transpiler (JS Compiler) that coverts our ES6, TypeScript, JSX code to plain JavaScript.

We need Babel because most of the browsers are not capable of understanding fancy code written in ES6, TS, JSX.

Webpack

Webpack is a build or bundler tool. This build process consists of multiple tasks.

Tasks may be transpiling, uglify, minimising and bundling of CSS and JS. And also responsible for resolving the dependencies.

We specify these tasks in a configuration file and webpack uses multiple plugins to do these tasks. Babel is one of them.

Top comments (1)

Collapse
 
eshimischi profile image
eshimischi

Comparison of 2 absolutely different tools.. Babel is transpiler and Webpack/Rollup/Parcel are bundlers!! Take a minute to check what Esbuild is..

This post blew up on DEV in 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!