This course has been updated! We now recommend you take the Angular 9 Fundamentals course.

Check out a free preview of the full Build Web Apps with Angular 2 course:
The "Module Loading & Webpack" Lesson is part of the full, Build Web Apps with Angular 2 course featured in this preview video. Here's what you'd learn in this lesson:

Scott takes over to talk about module loading and Webpack. While modular code is not required with Angular, it’s highly recommended. It eliminates collisions between libraries and the need to use <script> tags. Scott talks about the advantages of modules and how Webpack can be used to both bundle and load modules into the application.

Get Unlimited Access Now

Transcript from the "Module Loading & Webpack" Lesson

>> [MUSIC]

>> Scott Moss: So a little bit about me, my name is Scott Moss. This is my third course here with Mark and Frontend Masters. Very excited to be back, especially with Lukas cuz he's the homie. [LAUGH] We always just build stuff together. We've been working together for, it's been over a year now.

>> Lukas Ruebbelke: Yeah.
>> Scott Moss: Time flies.
>> Lukas Ruebbelke: We're still friends.
>> Scott Moss: And we're still friends. So, I'm glad to be here, I'm really passionate about this technology. I love just everything JavaScript really, so Angular 2 is just awesome. So, I'm gonna be talking to you guys about the hard part.

[00:00:41] That part that nobody wants to do, the part that's probably gonna give the most errors. But I promise you, it's not that bad.
>> Speaker 3: It's not that bad, it's all bad [LAUGH]. It's not that bad and all that.
>> Scott Moss: It's not that bad. All right, so we're going to talk about the tooling because with Angular 2.

[00:00:59] Although, you don't need any tooling, you can just write it in pure JavaScript. Well, that's not fun, nobody wants to do that. So yeah, but it comes at a cost we have to learn all this other stuff before we get there. So, some of the stuff that kinda goes into building a modern application not even with just Angular 2.

[00:01:18] But just like a modern application even if using something like React or something. You're gonna need something like Module Loading obviously, because the browser doesn't support modules of any kind. And if you don't know why you need modules, let me know and I'll tell you why.
>> Speaker 4: [INAUDIBLE]

>> Scott Moss: [LAUGH]
>> Lukas Ruebbelke: Why do we need modules?
>> Scott Moss: Why do we need modules? Well, for encapsulation just like our components encapsulate logic that can be reused and shared an application. We can organize our application that way too, so now that it's exposed globally. We can share things and swap things around.

[00:01:51] And we get cool things like asynchronously loading parts of the application depending on routing. We get to share modules across different applications. It's pretty awesome, so modules are great. So definitely you should use some type of module system there's tons of them out there. Webpack, so Webpack is a bundler that creates the modules for us to use in the browser.

[00:02:16] There is many other ones for instance Angular, actually the Angular team recommends using JSPM. Which I believe actually is a better way than Webpack. But at the current time, Webpack just has better stuff, better plug-ins, better support. On he Webpack 2 is on the horizon, It's really awesome.

[00:02:36] So although, I think JSPM is better and eventually I think it will just be like to go to. As of right now I think Webpack is just a better choice to go with, so that's what I'm sticking with for now. But JSPM is awesome too, I highly recommend checking it out.

[00:02:48] Whereas JSPM is also a package manager and a bundler. Whereas Webpack is just a bundler, so it's like two different things. JSPM will like replace NPM for you and everything. It will do all that stuff, it's kind of crazy. But that's what the Angular team recommends so it's worth a look.

[00:03:05] ES6, ES5 and then with Angular 2. We got TypeScript and then typings. So we're getting into that stuff. Any question so far? No? Okay. Here's a quiz, what's different about this logo to an Angular 1 logo? Who knows? There's only two things different.
>> Lukas Ruebbelke: Material design, [SOUND].
>> Speaker 5: There's no JS.

>> Scott Moss: No, the version one didn't have JS on it.
>> Scott Moss: Anybody else?
>> Speaker 5: The white border around it?
>> Scott Moss: There was a white border, and what's the other one?
>> Speaker 6: Shadow.
>> Scott Moss: Yep, there's a shadow.
>> Speaker 6: [CROSSTALK] line in the middle of the angle or something.

>> Scott Moss: Yep, exactly. There's a shadow on the A, and a white border.
>> Speaker 6: Sorry.
>> Scott Moss: It's like the third or fourth different version. I just noticed it like five minutes ago, so I figured I'd ask. [LAUGH]
>> Speaker 4: [INAUDIBLE]
>> Scott Moss: Yeah, so like I said, there's all this stuff you gotta jog through or crawl through to get to Angular 2.

[00:04:05] Most of the stuff is optional like TypeScripts, you don't have to use it. ES6, optional, Babel, all that stuff is optional. Then if you take away all that stuff then really all you have is RxJS and Angular. And then even, you can kinda get away using Angular 2 without even using RxJS.

[00:04:20] Not recommended, but you can get away without using some of the stuff built into it. Again not recommended, at that point you might as well just use like Angular what? You might as well, there's no point. Are we wanna grow? We wanna learn hard stuff, Module Loading. So, module code is not required with Angular, like I said you could use ES5.

[00:04:44] And you can use your own IFE system, or whatever you want to do, you don't need modules. But it is totally recommended because that is just how the architecture is built. Everything is component based, so it makes sense to have your application module based to it just fits like a glove, totally do it.

[00:04:59] It can easily interact, it allows us to use specific parts of the library. So you know we don't have to load up all of these scrip tags everywhere and different paths and different place. No, we can just use the different modules. Hopefully the developer had made the module, made it in such a way that you can pick the parts that you want.

[00:05:15] Like the new version of Load Ash, you can load different files without loading an entire library. It's pretty awesome, obviously collisions with namespaces and stuff. We don't need script tags. And because modules are not supported, again, we need some type of module loader to load it. Webpack, it's definitely one of the most popular ones, it's definitely my favorite one.

[00:05:39] The thing about Webpack that I like is it turns everything into a module, so not just JavaScript files or type of your browser. Everything is a module, images, CSS files, JSON files, HTML files. Whatever file you want to the router it will turn it to a module and you can load it in any other module.

[00:05:56] It's pretty awesome, right? I think it's dope, so this is why we're gonna use it because it's very, very useful. But again there are other ones out there notably JSPM. There is also Browser Pi and I mean you can probably just build your own with Gulp if you wanted to.

[00:06:14] Maybe mark out your own JS using some type of UMD stuff.