Webpack 2 Deep Dive

Webpack 2 Deep Dive Exercise: Adding Webpack

Topics:
Kent C. Dodds
Kent C. Dodds
Professional Trainer

This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.

Check out a free preview of the full Webpack 2 Deep Dive course:
The "Exercise: Adding Webpack" Lesson is part of the full, Webpack 2 Deep Dive course featured in this preview video. Here's what you'd learn in this lesson:

While Kent has already covered most of the topics in this exercise, he spends a few minutes looking at the solution and talking though some Webpack utilities he included. The solution to this exercise is on the FEM/01.0-add-webpack branch.

Get Unlimited Access Now

Transcript from the "Exercise: Adding Webpack" Lesson

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

[00:00:03]
>> Kent C Dodds: Everybody can go to the slides or you can just copy this right here. It is gitcheckout-fFEM/ and then that 01.0-add-webpack. And with that -f you're gonna blow away all the work that you've done. I'm sorry,hopefully you're not too offended. But let me talk about a couple of the things that changed here.

[00:00:33] Yeah, I'll leave that open, so you can see that. So we still are requiring the same things. We did take in one more dependency called webpack configure tells. This is something that I wrote because I think that functions look cleaner than. And so what this gives us is several things that simplify our webpack config, but one of those things is this getIfUtils where we can pass it our ENV object and then it gives us back some functions that we can invoke based off of that object.

[00:01:06] And so we can just say ifProd source-map otherwise eval and so like we'll be using a couple functions from that also use if not Prod and different things like that. But I feel like it reads a little easier than not totally, totally useful but one other thing that this added was I added a pre-build and a pre-build dev.

[00:01:32] So this is quick like NPM scripts protip. When NPM scripts, when you say NPM run build one of the first things it does is it checks for other scripts that have lifecycle hooks and one of those lifecycle hooks is pre. And so if it finds something that is pre and then that whatever the name of the script you're running, then it's gonna run the script first.

[00:01:54] And so I'm using a package called rimraf which is basically on a mac the VRM-RF. On Windows, that's different and so we have a package to just delete that directory for us. That way we don't have stale builds between build runs so hopefully that all makes sense. It's not like totally crucial to your understanding of webpack so we skipped over that.

[00:02:18] Also updated the validate script to add build there so that we make sure that we can validate that the build can actually run. So.