This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
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.