Component-Based Architecture in AngularJS 1.x and ES6 Introduction to Webpack
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Introduction to Webpack" Lesson
>> Scott Moss: Here's a little intro on Webpack and then we're gonna set you all loose to pack of some stuff. So like I said, we'll be using Gulp and Webpack as our system. If you haven't used Gulp before, don't worry, the stuff you're gonna be looking at is pretty much all built out with a lot of notes and you'll be able to figure out what's going on.
[00:00:44] And also I want you know that Webpack can also serve application to I'm just choosing to use Gulp and some other tasks. Because if I'm gonna use Gulp and it's going to be there for other tasks. I'm also gonna use it to control certain serving my application all the Webpack has like a Webpack server that you can use and has like hot code injection which is really awesome.
[00:01:48] You'll see, like, I know it's kind of crazy to think about it, but it's really nice. So this is like the future of development and JSP allows you to do this too, it's just their plug in system isn't quite there yet. But they allow you to do this stuff as well.
[00:02:01] So, this is the future of web development. And I think, once I started to use this process, I was like, I just can't go back. Having the right link tag in the head or a script tag it was just like, I don't want to do it.
>> Speaker 2: [LAUGH].
>> Scott Moss: So, first thing we need to do is we need to create a webpack.config.js on the root of our application. Don't worry about doing this right now this is just to show you this stuff is already going to be there in the actual app. And I'll show you the branch to check out too.
[00:02:35] So we need to create this in our root to application. Because Webpack is gonna look for this file by default by the name of webpack.config.js. Just like Gulp looks for gulp file js and grunt looks for grunt file. Webpack looks for Webpack.config.js. That's what it's looking for. And it's gonna look something like this.
[00:02:54] Not exactly but something like this. Here's just some comments on like what the hell is going on here and what this stuff is. So, context is just where Webpack is gonna resolve the entry file to our application, what directory. And then entry is where's the first file that Webpack needs to load up.
[00:03:17] And that file is gonna load up other files and that file is gonna load up other files. So, the way you should be thinking about this stuff is kept sound file but really should start thinking about the code that we write are just modules. Everything is a module.
[00:03:49] Output is the name of the file that Webpack is gonna, cuz it's gonna bundle all our modules in one file this is the name of the file that it's gonna create. Bundle.js. That's the standard name you see that a lot Bundle.js. And then to this path. So to the distbundle.js.
[00:04:05] Dev tool this is like how do you want to handle any type of like development workflow? What I'm telling Webpack is I just want source maps, just make me some source map files. Standard source map files that way if you launch a debug or something we can see our source code and not whatever Babel spit out.
[00:04:22] Or whatever Webpack has, right. And then here's the candy, here's the sugar. So we have this module object of this loaders array. So this loaders array, if you've ever used Grunt or Gulp, this is where you would like make tasks and have your plugins. So these loaders array takes objects.
[00:04:41] And the way these objects works is that they take a test property which is just like a red jacks that runs against a filename, a file pattern that matches. Then it will run the associated loader. So loader is like a plugin. So right now I have any file that has a CSS extension on it I wanna run it through the CSS loader and the style loader.
[00:05:05] So this bang right here as zoom in on it. This means. This is how you separate two loaders. So and it reads from right to left so that means any file with the CSS extension run it through the CSS loader first. Once that's done run it through the style loader.
[00:05:21] So these loaders are independently downloaded from NPM and they do different things. So in this case the CSS loader converts the CSS file into a module handles all the URL's inside of it that may be inside of it. And the style loader puts it in the head for us.
[00:05:35] So we don't have to write a link tag anymore. It will literally write a style tag in the head. So once we import this file, or require this file. It's in the head, we're good, no more link tags, so it's really, really, really cool. Sweet, any questions on this?
>> Speaker 2: Jevons P would like to know your opinion on Browserify.
>> Scott Moss: Yeah. So I guess I should have mentioned Browserify, it's hard [LAUGH] there's so many things out there. So my opinion on Browserify, Browserify is awesome, it has similarities with Webpack as far as like emulating Common js in a browser which is great.
[00:06:09] So we can use node modules and so forth but that's where it's good. And that's also where it stops right. It doesn't treat everything as a module like Webpack where, we'll have some extra configuration. So and then also when it comes to my experience when it comes to writing tests and doing other things non related to just developing, Browserify configurations a little crazier.
[00:06:33] The other do a lot of more things to get stuff to work as far as like testing with karma or maybe you want to. Maybe you're using a different type of module system requirejs or something and you want to import that does. Webpack does a good job for resolving those different types of modules Whereas Browserify can also do that but I think the configuration is a little more overhead in my head.
[00:06:54] So this is a config file for Webpack for Browserify. If you wanted the same functionality to disappear little more confusing a little more work. So that's my only fear other that but you can get the same results and Browserify is amazing. Although, Webpack is like trending right now.
[00:07:11] I think Webpack and Browserify actually came out around the same time. I think Browserify just took off and nobody knew about Webpack until they start using it for react but Webpack been around for a while.