1 00:00:01,100 --> 00:00:06,050 Now that we've seen what Watpac does with the common module type, I want to update the contents of 2 00:00:06,050 --> 00:00:12,200 our index dogs and messages files and I want them to instead be written out using the yes module syntax. 3 00:00:12,740 --> 00:00:15,130 So I'll first begin inside of messages. 4 00:00:15,410 --> 00:00:19,850 I'm going to change this module experts to the equivalent code that we would write if you were making 5 00:00:19,850 --> 00:00:21,270 use of its modules. 6 00:00:21,290 --> 00:00:23,780 So that would be export default by their. 7 00:00:24,790 --> 00:00:30,310 I'm going to save that file, I'll go back over to Indexed and I'm going to update this required to 8 00:00:30,310 --> 00:00:32,920 be the equivalent in its module syntax. 9 00:00:32,920 --> 00:00:37,060 So that would be important message from message. 10 00:00:38,910 --> 00:00:43,890 OK, now I've updated both these files, I'm going to run Web back again and then examine the main JS 11 00:00:43,890 --> 00:00:44,430 file again. 12 00:00:45,050 --> 00:00:46,140 So back at my terminal. 13 00:00:47,580 --> 00:00:49,350 I'll do another NPM run build. 14 00:00:51,130 --> 00:00:53,670 OK, that looks good, back at my code, Ed. 15 00:00:53,860 --> 00:00:58,120 I'll find the updated dist main JS file once again. 16 00:00:58,120 --> 00:01:02,020 There's a ton of extra stuff inside of here, but it's definitely different compared to what we had 17 00:01:02,020 --> 00:01:02,470 before. 18 00:01:03,040 --> 00:01:07,750 Again, I'm going to remove all this code and replace it with some cleaned up version without all the 19 00:01:07,750 --> 00:01:09,610 comments and some other stuff stripped out. 20 00:01:09,610 --> 00:01:11,140 Just make it easier to understand. 21 00:01:12,310 --> 00:01:16,300 OK, so here's the cleaned up version, and we're not going to go through this code as in-depth as we 22 00:01:16,300 --> 00:01:20,250 did in just the last video, there's just one very important thing I want to point out. 23 00:01:20,650 --> 00:01:23,640 It looks like generally the structure is very similar here. 24 00:01:23,650 --> 00:01:28,300 We still have this kind of weapon, module's object that is wrapped up the code of all of our different 25 00:01:28,300 --> 00:01:29,620 modules inside of a function. 26 00:01:30,670 --> 00:01:37,570 Watpac is also added in a new web require function right here and then down at the very bottom is some 27 00:01:37,570 --> 00:01:42,260 code to actually kick off our application or start the execution of our app. 28 00:01:42,760 --> 00:01:47,290 That's what's going on right here where it is calling Watpac require on our index file. 29 00:01:49,350 --> 00:01:54,360 So at this point in time, I really just want to stress the fact that Westpac has correctly decided 30 00:01:54,360 --> 00:02:00,720 how to deal with either module system, Watpac has clearly decided that it can work with banks and the 31 00:02:00,720 --> 00:02:04,590 US model system as well, regardless of the model system being used. 32 00:02:04,710 --> 00:02:09,780 Westpac took these two different files, joined them together inside of one file, and then somehow 33 00:02:09,780 --> 00:02:15,030 resolved all these import or require or expert statements to make sure that all these different values 34 00:02:15,030 --> 00:02:17,390 are being shared between these different files correctly. 35 00:02:17,970 --> 00:02:22,140 That's really the only thing I want you to understand around all this Watpac stuff at this point in 36 00:02:22,140 --> 00:02:22,500 time. 37 00:02:23,370 --> 00:02:27,030 OK, so now that we've got that kind of under our belts, let's take another pause here. 38 00:02:27,030 --> 00:02:30,990 When we come back, the next video, we're going to start to get a better understanding and apply all 39 00:02:30,990 --> 00:02:36,270 this new Web pack and babul knowledge, all the transport, other stuff, and really understand how 40 00:02:36,270 --> 00:02:39,810 we're going to start to solve that big problem number three right here.