Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Exercise 1" Lesson is part of the full, Component-Based Architecture in AngularJS 1.x and ES6 course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, you will configure the Webpack JavaScript loader. You’ll also write the Gulp build task. Once these tasks are complete, you should be able to run “npm start,” open the application, and see an alert.

Get Unlimited Access Now

Transcript from the "Exercise 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott Moss: If you head over to the repo and if you check out the step-1 branch, that's where we'll be. So if we open that up, what you should see is you should have this, you should have a client. You probably don't have this this folder, that's fine, this is a compiled folder.

[00:00:24] It's not even checked into source control, so don't worry about if you don't have this folder right here. You should have client, if you don't have node modules, do an npm install so you can install your node modules. So your objective is, if you go look in the webpack config, there's some notes in here, and it's pretty much set up.

[00:00:43] There's some things that I excluded, if you go look at the example that we just talked about. I don't have contacts, I don't have, I'll put that path. And that's for a very specific reason, and we'll talk about that once you're done. But there's a to do in here that you have to figure out, and that to do is, we need to create a loader pattern for our JavaScript files cuz right now, we're handling HTML files.

[00:01:10] We're handling stylus files, but we're not handling our JavaScript files, which is the meat and potatoes of our application. So we need to write a loader for that. And then, if you go look in our gulpfile.js, there's a task called build. And its job is to use webpack to build our application, so we need to define those two things.

[00:01:33] And we can just look around in the file for some context on what's happening, and you'll get a general idea of what's going on. So once you have that, we'll be able to go ahead and start building our application.
>> Audience: We have a question from online. John M would like to know where can we see documentation on what loaders are available?

[00:01:49]
>> Scott Moss: That's a good question.
>> Scott Moss: The best way that I find out, there really isn't. So webpack, if you go to the webpack website actually, let me see. If you go to the, here we go, if you go to the webpack website, go to documentation, and as you click on loaders, let's see where are they.

[00:02:12] Here we go, list of loaders, boom. And they have a list of common loaders that you'll be using, but remember we said we were gonna use Babel as our transpower, so that's a hint on what loader you probably need. And if you look in the package.json, it's in there too.

[00:02:28] So you can kind of figure it out. So how you know this works is when you think you've got this working, you can go to your command line and just run, let's see if I set it up. Yeah, you just run npm start, and you'll see some some stuff in your output, and you'll see some stuff happen.

[00:02:46] If no errors are thrown and if you just open up, if you go to the port, whatever port it says, it will tell you what port it's serving on. If you go to that port, and you see an alert, you're good. If you don't see an alert and you got an error in your console, you messed something up.

[00:03:00] Because what's happening is we have this app.js, which has some ES6 stuff in it, or ES 2015. So you know what this looks, if you don't know what this is, don't worry about it. We'll get there, but it's just doing an alert. So if this compiles down correctly, it will throw an alert in your browser.

[00:03:15] So that's how you know you've got it working. So, the result should look something like this. So if you come in here and you put npm start, you will see this with no errors. You will see all of this output from gulp. You will see webpack says, created a bundle.js and a bundle.js.map, all of this other stuff from gulp, and then it says, cool, you're serving on port 4500.

[00:03:43] So if we go look at that,
>> Scott Moss: We'll see this alert pop up.
>> Scott Moss: If you look in the console, there's no errors. That's what you should see.
>> Audience: Can you show us what your source map looks like?
>> Scott Moss: The actual file?
>> Audience: Or just like, if you were to debug it.

[00:04:08]
>> Scott Moss: If I was gonna debug it?
>> Audience: Yeah.
>> Scott Moss: So did you try to go look at it like in here, and it didn't show the stuff? Yeah, so there's some stuff going on with that, and the way, let's check it out, I'll show you. So if you're going to app, let's just do a debugger.

[00:04:34]
>> Scott Moss: So you see the debugger, right? It shows my code, it's great. But there's some timing issues going on with when the browser reloads and when the bundle.js is created. So sometimes you have to refresh, cuz the browser reloads by itself because they're using a plugin called browser sync in gulp.

[00:04:51] Sometimes it reloads before this thing is created. So you don't have that, back kitchens have to reload again manually. And then also, if you just try to go to sources and look at it by yourself, it won't show up.
>> Audience: Yeah, that's what I tried to do.
>> Scott Moss: You'll see webpack's code, which is just like really, cuz it's emulating comma js, so it's a lot of boiler plate in there, so it will be kinda hard to block.

[00:05:15] So yeah, you pretty much have to have an error thrown or initiate a debugger yourself to actually walk through your source code. Note, though, that the webpack source map is just like one of like ten different dev tool options you can pass in here. So there are many other dev tool options that you can play around with that might be better.

[00:05:36] They have like an in line mode, they have like a eval mode. I urge you to go look at what they have on the website, but there might be a better one. We're just using sourcemap because that's the most common one.
>> Audience: Sure.
>> Scott Moss: Okay?