This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Transcript from the "Webpack 101" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Kent C Dodds: So WebPack 101, why does this thing exist? Has anybody seen a project that looks like this before, where you have script tags, a ton of script tags? This is actually one of my old projects. It is a nightmare, [LAUGH] to have to manage all of these script tags.
[00:00:23] And part of the reason that this is such a terrible thing is because these scripts are running in order and so you need to have them sorted in the way that they need to be so that the app actually loads. If there's a dependency between one script and another, you need to make sure that the dependent scripts loads after.
[00:00:45] So yeah, this is one of the problems that Webpack solves, for sure. Lots of you in the pre-event survey mentioned that you're using Grunt or Gulp print now and you want to compare Webpack with that or you want to see how they can work together or see how you can avoid it all together.
[00:01:05] So with Webpack, I started using Webpack just over a year and a half ago. And I went from nothing to Grunt to Gulp to Webpack. And ever since I started using Webpack, I haven't needed Grunt or Gulp at all. And the reason for that is if you try to think of, what are some of the things that you do with Grunt or Gulp, why are those things useful?
[00:01:31] Well, you're gonna concatenate your JavaScript and minify it. You're going to do the same to your CSS. There are various things that you're trying to do to generate optimized assets for your web application. Right, so you have your JavaScript, your CSS, even fonts, HTML, images, SPGs, everything, all these assets for your application.
[00:01:55] The reason that with Webpack you don't need these task runners anymore is because Webpack takes care of all of this for you. And what the way that it accomplishes this is by turning everything into a module. You just think conceptually that, yes JavaScript is a module like each file you can think of as a module pretty easily.
[00:02:16] But CSS webpack considers CSS to be a module just like a JavaScript file. So not only that, but it also enables you to use common JS, AMD or yes, six imports. So these different module styles to make your dependencies explicit. And that is really a powerful concept as well because now it's not a matter of loading the right scripts in the right order, but you just say this is my main file and then it has dependencies.
[00:02:46] And all you care about is that main file. And then Webpack will fix it all up for you and give you one file that you just load into the browser. And then you can minify that in and optimize that for delivery for your application. But it takes it a step further, like I said, to CSS where CSS are modules and now you can take the CSS modules and make those dependencies explicit.
[00:03:13] And same with fonts and with HTML and images and spgs, everything is a module. And that's one of the most important pieces of Webpack. Do I have any questions?
>> Speaker 2: Typescript.
>> Kent C Dodds: Yes, a typescript would be a loader that would transpire down into JavaScript. Good question, yeah.
>> Speaker 3: How are you running the E to E tests?
[00:03:34]
>> Kent C Dodds: End to end, E to E tests, those run kind of the same way that you would with anything else. End to end tests shouldn't really care about how you build your application or how it's bundled. End to end tests just say load up this application. However it's built, that's irrelevant.
[00:03:52] Just load up the application. Start inputting forms, and as far as integration and unit tests, we'll definitely cover that in this workshop. Great question. Other questions? Anything from the chat? Okay, cool. Okay, sweet, so, yeah. So that's the basic idea of the most fundamental piece of Webpack is you have all these assets for your web application.
[00:04:22] They are all modules, you take those modules, make the dependencies between them explicit through various module syntaxes. So CSS, there's a module syntax for that, and JavaScript, obviously, common JS, AMD, or ES6 modules. So you'll make all those dependencies explicit. Then Webpack will resolve all those dependencies and spit out for you the static assets that you use for your web application.
[00:04:50] This is a very fundamental piece of Webpack, so I wanna make sure everybody understands that. And it's a little bit different if you were using Gulp or something. All of these different things would be like totally separate. You'd say, Gulp, go get me all my css files. I'm gonna do all this stuff.
[00:05:04] There's no notion of dependencies between css and JavaScript. But with Webpack there is and it's awesome.