Webpack 2 Deep Dive Exercise: Extracting CSS Part 1

Transcript from the "Exercise: Extracting CSS Part 1" Lesson

[00:00:04]
>> Kent C Dodds: We're gonna use the extract text webpack plug in, and this actually is, we're going to be using a version of this that has not actually been released yet because it has a much nicer API. Before we do that actually though, let's go ahead and check out that next branch get on the same page.

[00:00:29] And then, we'll go to our package Jaison and then we're going to install this plugin. So if you recall, we are right now, all that we are shipping to the browser are a bunch of dot JS files and so all the CSS is being loaded into the browser via style tag dynamically at run time.

[00:00:57] There are a couple drawbacks to this approach a couple really nice things about this approach but because it's fairly easy to add at this this plugin and we can start getting caching on top of that as well. And then no flashing why not, let's do it. So one thing that we're gonna need, is I mean, move this back to at some point in here we're gonna have to extract text web pack plugin.

[00:01:28] And that is going to be 2.0.0-beta.3, so it will believe is the latest beta and hopefully that beta will be officially released soon and it likely will be. The reason that you're seeing lots of this beta stuff is because webpack is in beta, as soon as it's out of beta like the web pack dev server beta and that this beta will be officially released as well and webpack 2 is gonna be out of beta pretty soon.

[00:02:00] So yeah. Then we're going to obviously again unlike with the and the rest of these plugins. We're going to require the extract text plugin.
>> Kent C Dodds: And we'll utilize that in our config. But this one's a little bit special because it requires not only like a special plug-in behavior but it also has a special loader that it requires as well.

[00:02:30] So, we're going to modify our loaders for our CSS. here. So that the extract CSS plugin can work for us. And like we're no longer gonna be using the style loader to accomplish our task. Cuz the style loader's job was to inject stuff into the DOM. As in style tags we don't care about that anymore.

[00:02:56] We are all in with this ExtractTextPlugin so just say that .extract. And what this is gonna do is we give it a configuration object, and it'll return as a loader, a lower function that this can use. We also need to either put wrap this inside of an array, or change this from loaders to loader.

[00:03:23] Of course the Webpack- validator would have caught that for us which is awesome but I would just change it to loader. And will specify a fallback loader. I'm only saying this because you might run into it yourself. I'm not sure when a fallback loader would be necessary, but it's good to know that there is one available.

[00:03:45] And then the loader that we want to use for taking CSS or from taking our CSS files and converting them into JavaScript modules as CSS. So if you're doing Stylus, or SaaS, or whatever, you would use those loaders, to turn those into JavaScript modules. Actually, what you would probably do is you would need to specify Stylus, and then also CSS, because Stylus is just concerned with converting it.

[00:04:16] Compiling it down into C.S.S., I'm in then the C.S.S. loaders responsible for making it a JavaScript module. Okay great, then there's one last thing we need to do to make this work. And that is we specify a new extract text plugin. And we specify the name that we want our CSS file to have.

[00:04:37] And so in production we want to have, like we'll just call it style or styles.the name of the entry or like whatever the name of this bundle would be. And then the chunkhash, because we want to say hey server, configure all browsers to never invalidate this cache, and then say .css.

[00:05:06] But again, that's gonna fail on us when we're developing, and so we'll say ifProd for that. And pass in styles.name.css, so that's what that will look like. And then from that
>> Speaker 2: You forgot you're closing paragraph on wrong way.
>> Kent C Dodds: Gracias, I put it right here. Thank you.

[00:05:33] Very good. So with that you should be able to run it. But we'll run the full prod build. Don't do that, npm run build. And what we'll get in the end is a dis directory that has our index html, and all of our JavaScript stuff, but also a CSS files, styles for the app, styles for the vendor and now we can put, and actually we don't even have to do anything about this.

[00:06:03] Those get put in as link tags for us. Because they issue now plug in. I'm pretty sure I didn't look into this but I'm pretty certain. Okay let's just try it, I might make a fool of myself here but I'm pretty certain that we could just comment that out now.

[00:06:20] And put our CSS up at the top and our JavaScript at the bottom. If it doesn't do that then I'm sure there's a way to configure it to do that because that's what you normally want to do.