Babel vs Webpack: What are the differences?

Babel and Webpack have different objectives and they solve different problems. In this post, we are going to explain the concepts of Babel and Webpack.

Babel

Babel is simply a transpiler (translator). It transpile ES6+ JavaScript code into ES5 code that browser (front-end) or Node.js (back-end) understands.

Babel allows us to use features that are not officially supported by the browser (front-end) or Node.js (back-end).

• You can use modules.
• You can use JSX with ES6.
• It support a lot of browsers
• You can use more advanced features (async/await) etc

Example of ES6 code

// Code to check empty object. 
import { matches } from 'lodash'; // This import is not yet standard to the browser
matches(obj, {});

Babel converts to ES5 code

// Code to check empty object. 
var _lodash = require("lodash"); // Babel changes import to require
console.log((0, _lodash.matches)(obj, {}));

Webpack

If Babel is a transpiler (translator) for JS, we can think of Webpack as a big-translator. It packs many modules into a few bundled assets. Webpack often runs Babel as one of its jobs.

Another example, Webpack can collect all inline CSS styles in JavaScript files and bundle them into one.

Webpack is heavily used on the front-end to bundle assets such as CSS, SASS, images, fonts, etc. Any app needs to package all variety of assets into a small file so that the browser can download during page load. This is also known as minify and uglify.

Webpack is a dependency analyzer and module bundler. If module A requires B as a dependency, and module B requires C as a dependency, then webpack will generate a dependency map like C -> B -> A.

• You can use different loaders for sass, less, postcss etc
• You can use different plugins to optimise your build such as Uglify, HotModuleReplacement, Chunks etc