Webpack 2 Deep Dive Webpack 101
This course has been updated! We now recommend you take the Webpack 4 Fundamentals course.
Transcript from the "Webpack 101" Lesson
>> 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: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.
>> Speaker 3: How are you running the E to E tests?
>> 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: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.