Webpack Dev Kit & Wrap Up

[00:00:00]
>> Sean Larkin: Are you feeling confident? I should expect to see a bunch of custom plugins and loaders created. I'll hand you one more resource that I think is valuable, so if you go to my githubs, so github.com/thelarkinn. I have just updated to webpack 4 a little side project I used called the web Webpack Developer Kit.

[00:00:24]
So [COUGH] essentially,
>> Sean Larkin: What this allows you to do is if we look at this project. All right, so what you would do is you'd clone it, download the dependencies. I'm just gonna open it locally so you can get a taste of what it looks like. So you're gonna see a bunch of strange js docs and things like that.

[00:00:51]
You can ignore them. They're really there for, if you're using VS code and you get really great code IntelliSense, right? So what this does is this allow, like I basically have like this setup project using Web Pack in a very primitive example. And I have all the pieces setup needed or let's say if you wanted to abstract stuff or whatnot.

[00:01:14]
But it's basically just a little kit that allows you to work on plugins and custom loaders, right, or any custom integration. And so that way, it's using the latest API, the new hooks, things like that. In addition, like I have already set up, the resolveLoader and the alias so you can write a customLoader.

[00:01:34]
And so it's for you to literally explore and what's great is if you're using VS code, like I've added the right type annotations so now it actually pulls hooks if you wanna see them. So as you're writing, you can get all this data available to you. And as we continue to add type annotations in our source code, you'll actually start to being able to see instantly, it's the same hook but what is passed to it.

[00:02:00]
Like right now it says any, any, any, it will actually say chunks, whatever, whatever. And you'll get the type annotations for that too because every instance we're gonna add types too. So I think this is super valuable. It allows you to experiment, to explore, and hopefully, it's helpful.

[00:02:18]
I even have the commented out all of webpack, like here is memory fs. Here's webpack sources which is when any source is collected, we create this object called webpacks, like a sources object, and we encapsulate into a single module how we do source mapping and it's in webpack sources.

[00:02:36]
And I guess source map list but that's not relevant, and even the resolver. So I created this so that you could at a whim try and extend anything, break it, have a nuclear meltdown and you're just in a nice little project that's easy to experiment with. So I recommend cloning it or forking it at the least, and just giving it a go and playing with it.

[00:02:58]
So yeah, are there any other questions? I think that's really about it. There is so much more to learn, and I'll have all the slides linked and just like this last slide literally says, you literally just learned how webpack works entirely under the hood. There's nothing more to it really.

[00:03:29]
From a high level all we do is we just resolve files, and then tie everything up together in a single dependency graph. But that's the power that lets you do things, like incremental building and all the abstractions that we've given for our plug in system. The architecture that we've created allows us to instantly pivot and add any feature that we want.

[00:03:49]
So we're able to develop really quickly. We're able to publish changes really fast. And we're even able to support new module types like Wazam and JSON where you can have JSON tree shaking, just by importing a JSON file. And there's just so many other things. So if you have questions, you can always find me on Twitter.

[00:04:11]
My DMs get kind of filled up but I try and respond as quick as possible. I always promise I will eventually respond. So I can tell you that. So thank you guys very much.
>> Class: [APPLAUSE]