So take a look. If we go to our main.scss file, I have this test code. So if we compile everything down, you'll see that, yes, it does get extracted to a dedicated stylesheet. And this is all because we included main.sass as part of our entry point. So that means it gets included with the bundle. But then we're also using code splitting here to extract the CSS, any relevant SASS code, into a dedicated file. So that's how we get this. But now here's an issue that a lot of people fall into. What if instead we're referencing an image? And one thing that could happen if you switch over from a tool like Gulp is that you're assuming a relative path based upon where you bundle the code.

What if instead we're referencing an image? And one thing that could happen if you switch over from a tool like Gulp is that you're assuming a relative path based upon where you bundle the code. So for example, in your public or your disk directory, you might have an example image here. And what you do is you think, well, I'm going to reference a path to that, assuming, again, that we compile this down here, and then the relative path will, in fact, work. So you do something like this, and everything blows up. Okay, so let's give it a shot. The very first step, we run it, and it fails immediately. And you get all this confusing output, and you immediately think, gosh, Gulp is so much easier. I hate Webpack. No, Webpack is incredibly powerful. You just need to understand a few things about how it works.

And you get all this confusing output, and you immediately think, gosh, Gulp is so much easier. I hate Webpack. No, Webpack is incredibly powerful. You just need to understand a few things about how it works. So in this case, it's telling you it can't find this image because it can't find the image. So think about it. Always assume the current file. Webpack is reading this, and we'll talk more about how to disable the reading of stylesheets entirely. But right now, Webpack and css-loader are reading this, and it sees, okay, images/stub.png. So let's look for that. There is no images directory, so it's failing because it doesn't know what to do. It doesn't know that you have maybe a legacy project, and you've already figured this out. It just knows, well, there's a relative path to stub.png, and it's not here. So I'm just going to error out and let the user figure this out. That's what's happening here.

Okay. Well, once again, it's going to fail. So what do we do here? We have a couple options. First up, we could update our webpack.config.js file and instruct the css-loader to not include URLs. So we could just tell it, when you come across a URL, don't try to process it. Don't do anything. Just ignore it. We have that figured out. So we can do that via an option. Take a look real quick. I'm going to switch over to the css-loader GitHub repo, and you'll see here's an option. So we can disable URL handling entirely. Okay, let's try that one. So I'm going to pass an array here, and we're just going to use the object syntax. So the loader will be css-loader, but for the options, I'm going to say urls, yeah, don't handle those at all. And then we'll have css-loader.

and we're just going to use the object syntax. So the loader will be cssLoader, but for the options, I'm going to say urls, yeah, don't handle those at all. And then we'll have cssLoader. Okay, so now, well, let's just do it once again. Here's what we had before. We try to compile it down. It fails because it can't find the image. But now we're going to reverse this and say, yeah, when you come across a URL, I don't want you to do anything. I figured this out myself. So now it does compile, and if we switch back, you'll see we didn't modify that whatsoever. So that's useful. Now, a second option is if your css is precisely as you want it, and you don't want Webpack to modify it at all, we could just use the raw-loader instead, if that makes sense, the raw-loader space loader.

we have a relative path to this. So it sounds like we need to move this over to our public or our disk directory. So you try it, and it feels like it works, but if we switch over, this isn't what we wanted at all. So the issue is it came across a new asset or a new file type that Webpack knows nothing about. So here's what we'll do. We're going to come back, and we're going to set up a new test here. And to start, I'm just going to say look for any png files, and we're going to use a new one here. You could use a url-loader, and this is very useful where it will read the file, and if it's small enough, it'll embed the image directly into your CSS so that you don't have to make that request. And then you can say for anything above a certain file size,

So think how powerful this is. Like, imagine you want to version the files. Well, you could use a hash here. And now, if we delete this, any of your images will automatically receive a hash, and once again, it will rewrite the URL dynamically. This can be great for cache busting. Or, you know, you may not want it directly in your public or disk directory. Maybe you want it within an images directory. So you could do this. Once again, it will now be placed within images, and the stylesheet will reflect that. So think about it. Imagine we had some kind of node_modules package. I'm just going to hard code one. We'll say some package, and we'll have styles.css. And there we'll say package styles background. Well, that's going to refer to an image. So it's going to refer to a relative image. Once again, relative to that current file, not our file, to that file.

And there we'll say package styles background. Well, that's going to refer to an image. So it's going to refer to a relative image. Once again, relative to that current file, not our file, to that file. So if we run that, we'll say foo.png. And I have to create that node_modules some-package images foo.png. Okay, so now back in our scss file, we can import that. some-package/styles.css And let's now compile that down. And there we go. Both were copied over.

And let's now compile that down. And there we go. Both were copied over. So app.css, here's the package stuff that you pulled in. It referenced a relative image, which you would traditionally have to copy over to your public directory. But now Webpack's going to do that for you, and once again rewrite the URL. So now you're starting to realize how powerful and useful this is. Again, just as long as you understand how it works. If you don't realize what's happening here, it's fully understandable why this might frustrate you. So in closing for this episode, real quick, before we finish up, you don't want to just do pings. You would want to do things like this. So look for .jpeg, or the e can be optional there. We're going to look for a .gif.

just remember, if you already have the image in your destination path, your public directory, just use an absolute path, and you don't have to worry about this. But for anything relative, do make sure that the file exists there, or it's going to blow up.