Kent begins by making a case for Webpack. He explains how it replaces task runners like Grunt or Gulp. Webpack also allows developers to explicitly declare dependencies making the bundling of modules into static assets much easier.
(mystical Asian music) - So, Webpack 101, why does this thing exist? Has anybody seen a project that looks like this before? Where you have script tags, like a ton of script tags. This is actually one of my old projects. It is a nightmare (laughs) to have to manage all these script tags. 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.
Like if there's a dependency between one script and another you need to make sure that the dependent script loads after. So this is one of the problems that Webpacks solves, for sure. Lots of you in the pre-event survey mentioned that you're using Grunt or Gulp right 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 altogether. 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 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 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 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.
End-to-end tests just say load up this application. However it's built, that's irrelevant. Just load up the application, start inputting forms. 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 that's the basic idea of the most fundamental piece of Webpack is you have all these assets for your web application.
Note: This course was created by Frontend Masters. It was originally released on 8/8/2016. We're pleased to host this training in our library.
- Initializing webpack
- Development vs. production environments
- Debugging webpack
- Loading CSS
- Testing with webpack
- Coverage basics
- webpack optimizations
- Tree shaking
- Code splitting