This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Running webpack from npm" Lesson
[00:00:00]
>> Brian Holt: Let's go put into our package.json how to build. So we're gonna put build.
>> Brian Holt: Now notice, I don't have webpack installed globally right now because I was running it from the node modules. Well, I can actually just put webpack here and when you do yarn build or MPN run build, it's actually smart enough to look first in its node modules to see if it's there first, right?
[00:00:28] So every time I wanna build, I'm just gonna say yarn webpack and it's gonna build for me, right?
>> Brian Holt: So I just put build right there. So now if I go back to my command line and I say clear, yarn build, notice it runs webpack.
>> Brian Holt: And same thing happens.
[00:01:02]
>> Brian Holt: Now I wanna show you something else that's kind of a cool trick too. Say I wanted to run it with a -p again. I can say yarn build --, everything after the -- is going to be provided as a command line argument to the command being run underneath, right?
[00:01:21] So if I say -p, notice it's gonna say webpack -p, right? So if you just wanna try something out real quick, that's a easy cheap way to do it.
>> Brian Holt: And as was pointed out earlier, what's annoying about what's happening right now is that I have to run build every single time I run a change of file which is like a non-starter for me.
[00:01:43] I'm way too lazy to have to do that. So luckily webpack takes care of that for you. If I just provide --watch,
>> Brian Holt: That's gonna build once and now notice that it doesn't exit, it's still going. If I come in here to clientapp.jsx and I change this to be like, instead of Silicon Valley I put House of Cards.
[00:02:16] And I save it. Notice it rebuilt really fast because it keeps everything in memory for you. And now if I refresh here, it says House of Cards.
>> Brian Holt: Any questions about that?
>> Brian Holt: So again, let's go put that into our package.json cuz I think that's useful to have.
[00:02:40] So what we're gonna do here is we're gonna say, watch and it's gonna be webpack --watch.
>> Brian Holt: Okay, and now you can just say yarn watch, and you're off to the races. So the last thing I wanna do that I wanna show you. So if I say, yarn lint right now, it's gonna lose its mind about the bundle file, right?
[00:03:16] Because it's gonna have literally every ESLint problem there is. We don't care, right? It's compiled code, we don't care if it passes lint or not, right? We care that our source code passes lint. So real quick, I want you to go create a new file, and I want you to call it .eslintignore.
[00:03:38] I think is what it's called. Yep.
>> Brian Holt: And then inside of .eslintignore, I want you to put public/ and node_modules/ right? Because if some node maintainer is not passing your lint rules, then you don't care about that either, right?
>> Speaker 2: Can you go back to package.json?
>> Brian Holt: Yeah, sure.
[00:04:09]
>> Brian Holt: Now right after this, I'll push a brand so you can have all the build, config, and stuff like that.
>> Brian Holt: So now, if I come back here, and I say yarn lint, we should be passing lint again.
>> Brian Holt: So if you ever have errors with lint, the best thing to do is just ignore them, that's ultimately what I'm getting at here.
[00:04:41] That's a joke, don't do that, [COUGH] but you can definitely ignore your bundled files.
>> Brian Holt: And the other thing I believe I should check, I'm pretty sure prettier also reads your .eslintignore so that's also helpful as well.