This course has been updated! We now recommend you take the Complete Intro to React, v8 course.

Check out a free preview of the full Complete Intro to React, v2 (feat. Router v4 and Redux) course:
The "Running Webpack from NPM" Lesson is part of the full, Complete Intro to React, v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Now that all the necessary tools are installed and configured, Brian demonstrates how to run Webpack from NPM. He also speeds up the build process by configuring Webpack to omit the node_modules directory.

Get Unlimited Access Now

Transcript from the "Running Webpack from NPM" Lesson

>> Brian Holt: So yeah, one thing I want you to do now, is I want you to go to your package.json. And inside of your scripts, we're gonna put another one, build. And build is just going to be, webpack.
>> Speaker 2: Onri has a question. Wants to know, can I use Webpack with JavaScript files which are not doing any export?

[00:00:32] Will it combine all of them together?
>> Brian Holt: If you have multiple files that aren't exporting anything,
>> Brian Holt: It needs to know. So if I have JavaScript file one, webpack is only going to follow that first file. So if you have no reference to the second file, webpack doesn't know to include the second file.

[00:00:57] You can give webpack multiple entries. And I'm assuming now, so this is me just talking about my intuition. I assume it will just execute both of those files, but if you need multiple entries I would say look at the documentation on it. Because I've never had that use case before.

>> Brian Holt: Also, Frontend Masters has a great webpack course that you should definitely check out.
>> Speaker 3: I'm surprised how popular it is.
>> Speaker 4: I'm not.
>> Brian Holt: It's a complicated. [CROSSTALK]
>> Speaker 3: It's like the whole course is just like configuring stuff, right?
>> Brian Holt: Yep.
>> Speaker 3: And setting up build processes, and yet, it's just like, incredibly popular.

>> Brian Holt: I think it's fun. I like build processes, but I think I'm like kind of in the minority.
>> Speaker 3: Well, clearly, you're not in the minority because it's super popular.
>> Brian Holt: [LAUGH] Fair enough. Or maybe this is people sick of the docks, yeah?
>> Speaker 2: Can you flip back to the webpack config?

>> Brian Holt: Yeah.
>> Speaker 2: Travis has a question about excluding node modules.
>> Brian Holt: Mm-hm, yeah, that's probably a good idea to do. So what you could do here is, you could say exclude, and probably should, node_modules.
>> Brian Holt: And this actually will speed up our build. And what you're just doing here, is you're telling hey, don't run my node modules through Babel, because that's really slow.

[00:02:24] And for the most part you don't need to. We will need to at the end of the day. And actually, if you want to get even more explicit, what you want to do, is you actually want to just include, rather than exclude. So we're just gonna include anything that's in the,

>> Brian Holt: The JS directory. Whatever, we'll leave the node modules.
>> Brian Holt: Whatever, obviously there are many ways to solve this problem. But let's go ahead and do it the good way. We'll say include: and we're gonna say path.resolve("js")
>> Brian Holt: (__dirname, 'js').
>> Brian Holt: Hopefully that should still work.
>> Brian Holt: But you're just, now we're explicitly saying if this is not in my JS source directory, do not run it through Babel.

[00:03:38] And let's see. The dangers of configuring webpack on the fly, I never suggest that, but let's see how I did.
>> Brian Holt: Cool, and notice that it actually went a lot faster, because we're not doing any of our node modules anymore.