From the course: SharePoint Framework for Developers: 1 Understanding the Toolchain

Unlock the full course today

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

Use webpack to bundle images

Use webpack to bundle images

From the course: SharePoint Framework for Developers: 1 Understanding the Toolchain

Start my 1-month free trial

Use webpack to bundle images

“

- [Instructor] Now I just showed you how Webpack allows us to bundle a CSS file. Webpack can also actually bundle any kind of artifact. One of the most common kinds of artifacts we need to bundle are images. Why do we need to bundle them ahead of time? Well, a lot of reasons. Perhaps you want them to be available offline. Maybe they're coming off of a URL. Maybe you want to have separate file names so they don't conflict with each other especially imagine if you drop a web part on a page and you are referencing logo.png and somebody else is referencing logo.png, the file names could conflict. So, let's see how we can modify this project to include an image. Here's how we do that. I have a simple image on my desktop called hello.png. You can use any image, I just created one using MS Paint. Really the actual image doesn't matter. Let's go ahead and make this a part of my source code. Now, let's go to index.js and make some minor code changes. Number one, I will import that image. So…

Contents