When you work with one of the modern UI Frameworks like Angular, React, or Vue, it’s likely that you’ll work with a JavaScript toolchain. This toolchain consists of a few programs that help us to speed up development but also to ship code as best as possible.

Back in the day when all there was jQuery, we’d write our code in a few files, including those in HTML, and ship it off. We’d have to make sure that we only use JavaScript features that were widely available at the time. Since the language hadn’t undergone any significant changes, it was a manageable effort. We used jQuery not to have to deal with Browser bugs and missing implementations of certain functions.

In the early 2010s, JavaScript gained popularity with each day that had passed. People worked on new standards, and browser vendors put in lots of effort to make JavaScript fast. Faster JavaScript, as well as new features, opened the door for new frameworks, such as React, Angular, and Vue.js. With these frameworks, building a more extensive Single Page Application became more and more manageable. Because of these frameworks, websites now came with a lot more JavaScript Code, but also developers wanted to try out new JavaScript features such as classes. The first versions of Chrome and Firefox were about to ship with support for these new features. Therefore we needed tools that’d allow us to write modern JavaScript but ship a version that’d even run in a five-year-old browser. That’s when tools like Babel.js and Webpack saw the sunlight. The former is a JavaScript transpiler, which means that it reads your (more) modern JavaScript and produces JavaScript that is compatible with older browsers. How old? That’s up to you to configure.

Webpack works together with Babel. It comes with features like auto code reloading and helps to produce a production version of our code. The production version is old browser-compatible JavaScript, which is also minified (it removes all white-space and shortens variable and function names to save file space).
There are lots more tools next to Babel and Webpack, though these are the two most prominent ones.