From the course: Learning webpack 4

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Load images with webpack

Load images with webpack

From the course: Learning webpack 4

Start my 1-month free trial

Load images with webpack

“

- [Instructor] The process of loading images with webpack is very similar to loading CSS. With webpack, we load images by using URL Loader. Webpack inlines a URL to the image bundle, and then returns it from require. We want to do this because inlining images will reduce the number of http requests, which will then speed up our applications. We'll start by installing URL Loader. So, we'll type npm install url hyphen loader, and we'll save this again to our DEVit dependencies. Perfect. Now, what we'll do is we'll refactor our greeting component in a little bit. So, we'll say instead of returning just the h one, we'll return a div, and the div should have an h one. I guess I could just cut and paste this. That'll be a little easier. And then, we also want to add another nested div here. This div is going to have an id of image. Perfect. So, now, if we go over to our CSS file, we're going to add a style here, a little selector for our image. So, we'll say pound image, and then, we'll say…

Contents