This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Introduction to Webpack" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> 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:23] But the way we're gonna use it is Gulp is gonna orchestrate Webpack and handle things like copying files and like serving our app. And Webpack will transpile and bundle our code. So it will take our source code whether it's a JavaScript, HTML TNG whatever it will take all that stuff and bundle it for us.
[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:05] It like injects the JavaScript into the page and keep the status like legit. So you can do that with Webpack but we're not gonna do that. We're just gonna use plain old Gulp for all that stuff and Webpack just for compiling and transpiling and bundling. The sweet thing about a Webpack that I really like is that it treats everything as a module everything.
[00:01:25] So if you ever use node think Common js. Now also when you think about Common js you think importing JavaScript or JSON files. Now imagine you can require HTML, CSS, JavaScript. So any file you want, you can you can require. That's what Webpack does in the browser. It's like what, why don't I wouldn't import a JPG?
[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].
[00:02:18]
>> 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:30] So we're going to be writing modules, we're going to be importing, then acquiring and exporting these modules. Whether that's JavaScript HTML, CSS they're all modules. So Webpack is gonna handle that. So it starts at one module and then as a tree it starts to import all the other modules that are being required by that entry module and so forth and so forth.
[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?
[00:05:51] Yes?
>> 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.