Alright, I'd like to move on to image optimization. Now, you might be doing this manually, and in fact, you probably still will, even after this lesson, but maybe less so than you did before. So maybe you have an application like ImageOptim, you drag in your images, and it optimizes them and reduces the file size as best as you can. Remember, things like image file sizes are the biggest offender when it comes to performance. You know, you will go crazy trying to debate the difference in performance between single quotes and double quotes in php, but then those very same people will reference like a 400k image on their website, when that should be a 40k image. So yeah, you can do it manually, or we can have Webpack do this automatically for us,

So we're going to try to get that down as best as we can. So we can use an image loader for Webpack. You can see that it will automatically optimize your images. So let's install it right now, and let's switch over to GitHub. Now you can see the usage is very simple. So track down any images, and we will apply the url-loader or the file-loader. We're using file-loader. And then we're also going to reference the image loader. Okay, great. So we're going to go back to Sublime and to my Webpack.config.js file.

Okay, great. So we're going to go back to Sublime and to my webpack.config.js file. But you can see right now that we are applying options specifically for this loader. So it sounds like we need to be explicit that the options correspond to file-loader and not another one. So instead, I'm going to use loaders and make that equal to an array. And then for each object within it, we can reference all of the relevant data. So now it's very clear that the options correspond to file-loader alone. Next, we're just using image-loader, so I can reference it like we normally would. But yeah, if image-loader eventually needs options of itself, then you could do the long

us. So now what we could do is bring back a CSS support. So we could say test for CSS files, and then use the CSS loader. So now, back to main.js, we will require styles, and then create that. And then here, yeah, we could apply it to the background or whatever. All right, so does that all make sense now? In our webpack.config.js file, we are testing for CSS files, and we are using the CSS loader. Our main.js does in fact require that. So when webpack comes across that CSS, once again, we are specifying that we want to intercept that loading, and we want to apply the CSS loader to it.

either into a fonts directory if you want to apply an option for that, or it'll just spit it into the dist directory, whatever you want there.