Webpack 2 Deep Dive Transpiling with Babel

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Kent C Dodds: This is a part of that I think you all will be really interested in and it's very specific to webpack. So, let me just catch myself up on my notes here, very quick.
>> Kent C Dodds: So, there are several dependencies that we need to install for this. But this is gonna be our first loader that we implement.

[00:00:27] So if you remember before, we said that, for webpack to do its magic on individual files, it uses loaders. And we say, okay, we want this ES6 file to be transpiled into ES5, so we can ship it to old browsers. So the way that we configure that here is we say, module and that is an object.

[00:00:51] And this takes several properties to configure how webpack resolves modules and what it does with with different modules. But one of those is a loaders array. Where we would put each one of the loaders that we want to have applied to our files. A loader is an object that consists of a couple properties that are important for it to know which files to apply loaders to.

[00:01:17] And what loaders to apply when it hits those files. The first property is the what files to apply these loaders to. And that will be a test and that's a regex and so we want this to apply to all JavaScript files. So what's the common thing about JavaScript files, like the one common thing about all JavaScript files?

[00:01:38] Sorry, as far as the file name's concerned?
>> Students: .js.
>> Kent C Dodds: .js, yeah. So anything that ends in .js, and we'll add the $ to say it ends in .js, we're going to pipe through this loader. And then the loaders that we're going to apply, we're only going to apply one, and that is babel.

[00:01:59] And then there's one other problem with this and that is, once we start adding dependencies from NPM, we're going to start transpiling all of those also through babel. And if those library authors are doing what they're supposed to be doing, they'll be transpiling it for you before they publish it.

[00:02:20] And so, this is a wasted effort on your part to transpile again. And so you can say exclude: /node_modules/. So anything that has node modules in the in the file path will be excluded from the transpilation process. And that's everything that we have to change about our webpack config to get transpilation working.

[00:02:43] We have to also install a couple dependencies. But you already have those installed, so actually, you should be able to run webpack dev server and everything should work. But does anybody have any questions? Okay, sweet. So we'll-
>> Speaker 3: A couple here.
>> Kent C Dodds: Yeah.
>> Speaker 3: They're asking what branch that you're on.

[00:03:04]
>> Kent C Dodds: Sorry. Yeah, I'm jumping around like crazy, aren't I? I forgot the hotkey to open another one of these. So right now it's on require-everything. If you look at the slides, that's probably the best way to follow along. I'll copy the URL to the slide that I'm on right now.

[00:03:27] And at the bottom of each exercise slide is the next branch that you're going to be checking out. Yeah.
>> Speaker 3: And then the next question was, so when webpack is parsing files looking for require import statements. Or I guess he's asking is that correct? So when it finds one, it looks for the thing named by the import require in public path or node modules.

[00:03:53] And you might wanna read that, it's.
>> Kent C Dodds: Yeah. Yeah, so webpack resolves the requirement or import statements the same way that the CommonJS spec specifies. And so if you're familiar with node programming, then yeah, there are a couple of things that determine this. So if I say require('lodash'), and then it says okay, this isn't an absolute path, it's not a relative path, it's just the module name.

[00:04:22] So I'm gonna look for the closest node module's parent directory to me, that has a lodash module inside of it. So it will go into known modules here, and it'll look, okay, find lodash for me. That's how it will resolve and then it also actually uses like package Json to find the main and all kinds of stuff.

[00:04:40] I would recommend that everybody learn about how dependency resolution works in CommonJS. That's really really valuable to know. So another way that you can do this is require('./foo') and that will look relative to the current file that you're in and find the file that's called foo. It'll look for foo.js, that's the default extension, so you don't need to put the extension there necessarily.

[00:05:08] And then there's another way that you can do it and that's the absolute path and that will look for foo.js in the root directory of your machine. So you pretty much never do this. Yeah.
>> Speaker 3: Why is the exclude value not in quotes?
>> Kent C Dodds: Sorry?
>> Speaker 3: The exclude value, why is that not in quotes?

[00:05:30]
>> Speaker 4: It's a regex.
>> Speaker 3: Regex.
>> Kent C Dodds: Yes, it's a regex but what is the question?
>> Speaker 3: That was the question sort of?
>> Kent C Dodds: Yeah.
>> Speaker 3: And then another one is, isn't it redundant to name the file webpack.config with babel and then also add it to the loader?
>> Kent C Dodds: Yeah, good question.

[00:05:45] So I probably shouldn't have done the whole babel thing. I thought it would be helpful, but I knew it would be confusing. So the webpackconfig.babel is supposed to just take your webpack configuration, in here, just this code, right here, in this one file, and transpile it. It does nothing with your source code at all.

[00:06:06] Sorry, that was a bad call, last night. [LAUGH] Okay any other questions? Has anybody got in the webpack server to start running with this configuration? Okay, sweet. So you should be able to, whoops. You know what? We have one other thing that we need to do, and that is we need to add a babelrc file.

[00:06:33] By default babel is going to not do anything to your code. It's gonna take it, create an AST out of it and then generate that back into code. It does nothing with it. And so you need to add some configuration for babel to say these are are the features of ES6 or ES2016 or even Stage 2 features that aren't released yet.

[00:06:55] These are the things that I want to have configured. And so I'm not actually going to go through creating that because we are still behind. I'm going to show you what that looks like and you can come back to it later and and try it out. But here, I'll just create the file right here.

[00:07:14] It's in your root directory right there with the cool logo if you've got my Adam plug-in. And then you would, oops, just take, yeah, this is the configuration for it. You specify some presets. I wanna use the es2015 preset, the es2016 preset. Sorry, ES6, ES2015, same thing. I called it ES6 because that's what it was called before they changed the name and they can pry that from my cold dead fingers.

[00:07:42] But I'm all onboard with ES2016 for the two features that we got there. And then Stage 2 features, that includes a sync away, trailing function, on parameter calls, and arguments, and stuff. Cool stuff that we get. And here are the dependencies that you need for all those things.

[00:08:01] So here's that es2015 preset, es2016 preset and the Stage 2 preset. babel-core is a pure dependency to babel-loader, so that's why you need to have that installed also. And then babel-loader is tied to this loaders: ( 'babel' ). So you need to have bbabel-loader installed to use it right here.

[00:08:27] And also, as just kind of a fun fact, you can specify it like that as well, those are equivalent. webpack will look up dash loader in your dependencies as well. One other fun fact is if you do want to write a custom loader for your project, then you can also pass in another loader here.

[00:08:49] You could say resolve and then ('./foo-bar/my-loader.js'), whatever. So it'd be the path to the loader that you wanna use. Right here, we're not actually using multiple loaders in this array, but for our CSS we will. And I'll show you that in a little bit.