Learn how images can be loaded like any other module with webpack. It is possible to load images as inline base 64 image representations in order to minimize HTTP requests.
- [Instructor] The process of loading images with webpack…is very similar to loading CSS.…With webpack we load images by using URL Loader.…Webpack will inline a basic C4 representation of the image…and add it to the bundle.…We sometimes want to do this…because in-lining images…will reduce the number of HTTP requests,…which should speed up our applications.…The first thing I want to do here…is install a few dependencies.…So we'll install url-loader…and also file-loader.…More on that one in a second.…
Great, so once this is done,…we're going to revisit our component…that we've created in index.js…and we're going to make some adjustments to it.…So, number one, we're going to change message to image.…So, that's the name of out component now.…We then are going to change the message property…to a caption property,…and we're also going to adjust the title.…So, I have this file in the source folder, wilderness.jpeg,…and so, I'm going to…title it accordingly.…
And of course, if you want to use your own image…and load that with webpack, have at it.…
- What is webpack?
- Running webpack from the command line
- Setting up loaders
- Loading CSS
- Compiling SCSS
- Using webpack plugins
Skill Level Intermediate
1. What is webpack?
2. webpack Loaders
3. webpack and CSS
4. webpack Plugins
Next steps1m 1s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.