Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "webpack and Babel" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

After working on setting up tools to help clean code along with a linter, Brian changes focus on working on the compilation and building of the code. Brain demonstrates how to set up webpack and Babel, which packages and transpiles code respectively. - https://btholt.github.io/complete-intro-to-react/tooling-webpack-and-babel/

Get Unlimited Access Now

Transcript from the "webpack and Babel" Lesson

[00:00:00]
>> Brian: So, the next thing we're going to mess with is webpack and Babel, which again are two things that people find pretty frustrating. They're pretty complicated tools, but they afford some really cool possibilities. So let's talk about webpack first and then talk about Babel. Webpack at it's most simple level is just a packager.

[00:00:22] So it's gonna take your five different JavaScript files and it's going to combine them down into one JavaScript file. In and out itself it doesn't do any transformations really all it does is combining and minifying. It only does minifying when you tell it to, right? So at it's most basic level it's just going to say, okay you have this file that depends on this one, that depends on this one, it's gonna take all of those files and compile them down to one file so you can just send one file down the wire.

[00:00:50] It has some other really neat possibilities and capabilities, things like code splitting, which we'll talk about later, but at it's most basic level that's all it's gonna do. Then, on top of that, we're gonna add another tool called Babel. Babel is what actually does the transformations, right? So for example, we're gonna write jsx, it's gonna take jsx, which is technically invalid JavaScript, and it's gonna run it through a transformation and output valid JavaScript that your browser can run.

[00:01:21] It can also do this for ES6 for example, right? For example, most browsers still do not understand generators, right? Which are really cool features that got added in ES6. But for most browsers invalid JavaScript because they don't have the engines to support them. What Babel's gonna do is it's gonna take your ES6 code it's gonna run them through a transformation and it's going to output valid ES5 code which every browser today understands.

[00:01:48] So that's what Babel does, and that's how those two pieces work together. One does the concatenation and packaging together of files, and one does the transformation of files. And that's one facet of them, they both do multiple things, but that's what we're gonna use them for.