>> Sean: So, let's jump on our dove server, local host 8080, great.
[00:00:24] So if we start in our entry point here, Index.js. We could technically now say like import image from, I think I call that Webpack logo, yep, .Jpg. Now, if I was to console log this, what we should inspect what it looks like. I think this is really what the most valuable is, cuz you actually get to see what it converts it to, right?
[00:00:54] So if we look at our console,
>> Sean: Whoa, what is this? It is a base 64 data URI of the image.
[00:01:29] So that's kind of cool. This is what's beautiful about modules so I could make a make image function or we could just call it image.js and we could say const makeImage = (url),
>> Sean: Or a function that takes a URL and does document. Then we can take image = document.createElement("img").
[00:02:02] Let's do this, there you go, okay? And then we'll say, image.src = url and then we return the image.
>> Sean: Make sense so far? Now of course we need to export this. So export default makeImage.
>> Sean: And let's jump back into our entry point and we'll leverage it.
[00:02:36] So import,
>> Sean: MakeImage from image.js cool, so now it did a reload for us. Haven't used it yet so let's actually declare this element or actually append it now. So we could say,
>> Sean: Const image = makeImage and then maybe instead, we'll rename this to imageUrl, right? Cuz that's really what we're getting out of it.
>> Sean: And let's append it. Maybe I'll do it between, I'm just gonna.
>> Sean: [LAUGH] Whoa that's huge. [LAUGH] Let's see.
>> Sean: I kind of expected it to be a little bit large. I mean, not that large.
>> Sean: See, I think you can set height and width directly on the image property, right?
[00:03:58] So we could say like, image.height, 100 pixels, image.width. Now of course, this isn't very reusable code if you wanted to created images of many sizes. What, is it just 100?
>> Sean: There we go, cool, I like it.
>> Male: Can you go back to image.js for a second? I didn't get a chance to-
>> Sean: Yeah, so that's where I'm at right now.
>> Sean: So if we wanted to, let's say, we could get creative, we could do something like this and say, height = 100, width = 100. There we go and then that way we can just take height and width. Cool, now we're like, now we have some reusable.
[00:05:05] I love this about modules because it's like we can instantly make things really compostable and powerful.
>> Sean: Awesome.
>> Male 2: Quick question about the hot module reloading?
>> Sean: Yes.
>> Male 2: I was noticing when I was changing things like I changed the text in a file, in a JS file-
>> Sean: Yep.
>> Male 2: It was refreshing the page rather and then just [INAUDIBLE]
>> Sean: Correct.
>> Male 2: That's suppose to happen.
>> Sean: Yeah, absolutely, so essentially to use Hub, and I don't dive into it too deep because it's kind of, it's more of something like if you really wanna use it standalone, you come at a little cost of some overhead API's.
[00:05:45] It's usually applied through a loader, like react-hot-loader or view loader does it. But essentially to do so you'd have to have something like if hot.module.expects or accepts. And then the path of the module that is in relation and then what happens is that the surface API just basically says you reimport that file.