DEV Community

Mirza Hassan
Mirza Hassan

Posted on


Babel vs Webpack - What are they


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

eshimischi profile image

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!