The full video and many others like it are all available as part of our Frontend Masters subscription.

Kent C Dodds

Kent C. Dodds works at PayPal as a full stack JavaScript engineer. He host JavaScript Air and co-hosts React30 podcasts. Kent is an Egghead.io instructor and Google Developer Expert.

Kent C Dodds

PayPal

Kent demonstrates how to initialize Webpack for use in the Todo application. He creates the configuration file and talks about how to enable the use of ES6 syntax. Kent then specifies bundle.js as the output file which will contain all the initial application code.

Get Unlimited Access Now

Kent C. Dodds: So we're going to initialize Webpack. What I'm going to do is I'm going to walk you through some of the things that we're going to do. Each step has, actually, let me just kind of show you what we've got here. I'm going to skip ahead. And so, each slide, and this is why I say go check out the slides, because each slide, well, for exercises has a link to a, to the GitHub repo for this project.

And it's a diff of all of the things that we're going to be doing for the step. And so, this way, if you get lost, you can go reference that. Please don't use it as a crutch, because you're here to learn, right? So, you can use it as a reference.

And I'm using it as a reference right here, because reasons. And so, what we're going to do is I'm going to kind of walk through different pieces, show you why things are important. And then, kind of depending on the way that you like to learn, you can either follow along with me, or I will give you time to go and do it yourself.

After you, at reasonable increments, and so, if you like to follow along in stuff, then that's great. Otherwise, you can just watch, and then I'll give you time to work through the exercise on your own. Sound good? Okay, great, so yeah, let's just go ahead and get started.

We'll pretend that we're just going to build this with the error messages that Webpack is going to give us. So, the first thing that we're going to need to do, and I'm sorry, another backtrack. So, I had you run that script. What that script did is it checked out the very last branch and it installed all the dependencies on the last branch, because that will have all the dependencies through the whole day.

And then it checked out the first branch, and so, this way, it is if you don't have a really super Internet or something, you only have to run the npm install once. And now, you don't actually have to npm install anything. But it's kind of nice to have those things.

So I'm going to enter them in manually right here, but they actually do already exist in our known models directory, which is ginormous, full of modules that we love.
Speaker 2: Is there a way to change the contrast?
Kent C. Dodds: Sure. Yeah, I've never used this before but no, that's fine.

How is that?
Speaker 2: That's good.
Kent C. Dodds: That's good? Okay, cool, terminal. I had, don't know what to do about that, but hopefully this is helpful. Wow, that's different for me, okay, cool. So that's all right. Actually, fun story, I do use vim, obviously, I come on, I'm in vim mode, right here, and every time I boot up vim, it chooses a random color scheme.

And so, every single time I open vim, it's raining random color scheme. I actually really, really like it a lot, but I couldn't do vim anymore. It was just, didn't provide enough for me. So, for Webpack, you're going to want to, well, I need to reference this. This is the only one that's kind of funny.

So, it's 2.1.0-beta.20. That's the latest beta version. So, you can install that by doing an npm install --save-dev webpack@beta, and that will install it just like that. Here's the little pro tip for you, you can do, shorten save dev to -D, and you can shorten install to i.

So, that's what I normally type. Actually, what I normally type is ni, because I have an alias. Or actually, an iCache, so I load it from the cache, so fun stuff. Okay, so, but with web pack installed, if you look in your node modules in your bin directory, you'll see you have a bunch of files.

And here, what on earth are these things? They're all, got this little error thing. That's a vim link to a COI, or a binary, for these different projects that you have installed in your node modules. And one of those is Webpack. And so, you don't need to install it globally.

I know that was really common practice back in the grunt and gulp days. I think they're starting to move more to local installs as well, because of a lot of problems with versions of global packages. But yeah, so, we're going to use this local version of Webpack that we have.

And one cool thing about scripts is that these scripts will source that directory, and so, you can utilize those binaries without actually having to directly point to them. So, all the talk, basically to say we're going to add a build dev script here that's going to use Webpack.

And that will resolve to this Webpack in our own modules stop in. So, with that, if we ran an npm run build dev, then we're going to get a fun error. Lots of the errors here it's going to be npm error stuff. I don't care about npm errors. And so, I'm going to add -s to say hey, npm, be quiet.

I just care about the errors I get from Webpack. So here, the first thing that we get is there's no configuration file found, and no output file name configured, and so, we need to start by creating a Webpack file. So a new file called web, and it's telling us it needs to be called webpack.config.js, but it's kind of fun, it says a configuration file could be named webpack config.js.

You can also specify on the CLI what config you want to use. But a fun little trick is you can add that babel on here and it will transpire all your Webpack config with babel, right before it actually loads that config. So, we're going to do this, just in case some of you don't have note 6 installed yet, hopefully this will resolve some of those problems.

It works either way. But when you take out the next branch, and we keep going, it's going to be Webpack Config Babel. So, yeah, fun stories there. Okay, so now that we have this file, let's go ahead and run it again. And we're going to see now that we still need this output file name, either as output.filename, or configured via CLI.

And so, let's go ahead and actually create a module inside of this Webpack config file. So, we're going to be using common js. We'll say module.exports, and what we're going to export is a function, and because I'm hipster, I use arrow functions for everything. I'm just joking. I use arrow functions when it doesn't make much of a difference, either way.

And here, we're going to return our configuration. So then, we'll, all, it's asking us for an output.file name. So, we'll provide an output object and a file name, and we'll call it bundle, this is the most common file name for Webpack configurations. So, yeah?
Speaker 3: Quick question about they already have global Webpack installed that conflict with a local Webpack?

Kent C. Dodds: Good question. Yeah, so, if you have global dependencies, this applies to any known modules at all. If you have global dependencies at all, the local dependencies will be resolved through to first. So, local wins, which is great. Thank heaven for that. Yeah, great question.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now