Introducing Babel Loader0:34
the bottom. Yep, it's just taking exactly what we wrote. So it sounds like we need another loader to transform this code before bundling it up. Okay, well we can use Babel for that. So you can go to babeljs.io, which stands to reason that you're already familiar with it. And you can see a few examples right here. Notice we're using the short function syntax, but that will transform to a traditional long form function. Okay, so let's go to Setup, and you can see for Webpack, and here we go.
Adding Webpack Babel Rules1:00
form function. Okay, so let's go to Setup, and you can see for Webpack, and here we go. So we want to pull in the core of Babel, but then also the loader for Webpack. So let's copy that and paste this in. Next, you can see some usage examples here. Now, real quick, you'll see module loaders. That's actually the old syntax. Instead, you'll see module rules for Webpack 2 and above. So I'm just going to copy that, and we'll switch back to our webpack.config file, and here's our rules.
Configuring Babel Presets1:49
I'm going to run it again, but this can sometimes get confusing because we think it's working, but if we come back and scroll down, no, we still get the exact same thing as before, and that's because, well, yes, we've installed Babel core, but we haven't been explicit about how we want it to transform. So we could reference specific presets or even general plugins if you only want one or two things. So you'll notice install the preset you want and then create a .babelrc file to match. So let's scroll down, and we're going to use ECMAScript 2015, and you can see it will include everything that we see here, and I definitely encourage you to read through these. You'll learn a lot of cool stuff, but anyways, we're going to come down to our plugins, and
Creating .babelrc File2:24
everything that we see here, and I definitely encourage you to read through these. You'll learn a lot of cool stuff, but anyways, we're going to come down to our plugins, and specifically, we want the ECMAScript 2015, or if you want to go up to 2017, you could do that as well to get some of the more current cutting-edge stuff, but nonetheless, this will do for now. So we can see in the install section, yep, just reference the preset we want. Then we create a .babelrc file that specifies our preset, .babelrc, and I'll paste that in. We're going to use the ECMAScript 2015 preset that I just installed right here. Okay, so now I'm going to run it again, and this time, it will change the output. So we check out bundle.js, and there we go.
