Let's grab that. And next, okay, so we're going to require the plugin, and then we will test for any files and extract them using the necessary loaders. Finally, we reference a new plugin here that references a file name that we want to extract the CSS to. Okay, so I think we have everything we need here. Let's come back to Sublime. Here's my webpack.config.js file. Sounds like we now need to import this. Constant, yeah, you can use this if you want.

Okay, so if we were to compile that down now, what you'll see is there we go. We get our style.css that contains all of the CSS from here. Further, if we come into bundle.js, you'll see that there's no reference to our CSS anymore. All of it has now been extracted, which is great. Now another option we have here is if we just want to use the entry name, in this case it would be main.js, you could always use this placeholder here. So now if we compile it down, you'll get main.css, and that can be useful in a lot of cases. And actually, on that note, let's talk about that. So for entry, we're referencing a string here, but you could also reference a dedicated object. So you could say, this is my app entry point.

So for entry, we're referencing a string here, but you could also reference a dedicated object. So you could say, this is my app entry point. So take a look. If we were to run this again, now, whoops, we need a comma. Okay. Anyways, if we run it again, now you'll get bundle.js because we explicitly declared it. However, we get app.css because that is the name of our entry point. So that means if you want, you could even use a placeholder here, and you can even add things like hashes, and there's a lot of flexibility there. So we run it again, and now we should have, this is the old file, but yeah, we have app.js

things like hashes, and there's a lot of flexibility there. So we run it again, and now we should have, this is the old file, but yeah, we have app.js as well as app.css. So on that note, you'll see here that we are requiring our style sheet. If you want, if you don't want to do that in your JavaScript, you could also reference that within your webpack configuration file by just adding it to our app entry point, like this. Okay. So let's delete our dist directory. And what you're going to find is even though main.js is empty for the time being, once

Yeah, it's not working at all. So here's what we want to do. We need a way to tell our loaders whether to operate within a minimized mode, if that makes any sense. Let's just research it. Webpack, and we want the loader-options-plugin. Okay. So let's look for minimize. Here we go. Right down here.

And now we'll say minimize, and yeah, we could set that to true. And let's try it. And I bet that is going to work. So we come back, and yes. But now if I run devMode, I don't want it to be minified, right? But it still is. Okay. Well, luckily, we have this inProduction flag, right, or this variable. So let's just make it equal to that. Okay.