Introducing Webpack

[00:00:00]
>> Sean Larkin: Even with all these modules like any library that you pull from mpm, like I said, people can just choose whatever the heck they want. They can ship any module format, it doesn't matter, there is no right or wrong way. And I'm just talking about JavaScript, there's other preprocessors for CSS and HTML.

[00:00:26]
I mean, assets and so it wouldn't even just thinking about this in retrospect. We now need something that not only lets us write modules, but we need something that lets us support any module format, at least until we can get to ESM, right? That can handle resources and other assets at the same time.

[00:00:51]
And so wouldn't it be nice that, let's talk about Webpack. [LAUGH] This is where kinda Webpack was born. Webpack is a module bundler. So you might be like, Sean, what are you talking about? Module bundler lets you write any module format. It doesn't have to be any, but for us, for Webpack, it's that you can require or use anymore module format and it'll allow those to work in the browser.

[00:01:29]
That's the simplest format for a bundler. On top of that, Webpack supports code splitting or static async bundling, where you can create separately lazy lot of bundles at build time. Nothing is dynamic and so then, that way you have all these extra optimizations that you can leverage. And there's just a ridiculous, ridiculously large ecosystem for Webpack.

[00:01:56]
Today, it is the most performant way, if you want to write the most performant application or you want to set canonical standards. You need to be using Webpack today. It's why Microsoft chooses it for all of it's top 1,000 Alexa websites. It allows us to be incredibly flexible, and do any sort of custom workflow and makes it possible.

[00:02:25]
And so, I also want to jump into a quick story which I think is super valuable. So how did Webpack get created? I'm just gonna pull again a [INAUDIBLE] for Webpack. So github.com/webpac/webpac and what some people don't realize and I didn't even realize this at first. So the story is in 2012, a gentleman in Newberg, Germany name Tobias Koppers had to do a thesis for his masters.

[00:03:00]
And he had worked his full time C# developer and he had worked with Google Web Toolkit for some time, which had this feature called code splitting, and I'm gonna talk about it in day two. But there is this, he had never written a web application. And he was tasked with for his thesis to write a web app, and so he wanted to find a library that he could use.

[00:03:31]
And so he went, he found this modules.webmake, [LAUGH] and so modules.webmake is also a bundler, that I think, it doesn't predate browser five, but it came slightly afterwards. Let me pull, go down the bottom again. There's, well essentially, Tobias wanted to have this opportunity to provide code splitting before Bundler, and so he opened an issue on this project and said hey

[00:03:58]
>> Sean Larkin: [LAUGH] Hey, there's this really neat feature called code splitting. Hey, you can totally do this. It's totally possible. This would be how you do it. He proposed this issue, people are like, hey, that's a great idea, back in the day. And Medicue is like, it's probably nothing we can add.

[00:04:19]
And then Tobias was totally like, okay, you could totally do this. And then, just kind of, I would say argue, they just discussed back and forth, so he's like, okay, I just implemented it but I had to rewrite some stuff from scratch and mind you this is 2012, 2012.

[00:04:37]
And then you see, okay, I moved this to webpack/webpack. So Tobias is the original author of Webpack, and essentially it was born as a fork of modules webmake to add code splitting as a commit number one, commit number zero feature. And so, Tobias has never worked on a web application in its entire life which I will think is kinda cool.

[00:05:06]
But it is insane too, he's so smart. But yes, he has done a little pet but he's never worked on web apps which I find so fascinating. But yes, this is how Webpack was born in 2012. And it wasn't until 2015, hen Pete Hunt, does anybody know who Pete Hunt is or there is a video.

[00:05:30]
If you just search Oz Con West 2015 Pete Hunt, you'll find a video where Pete Hunt was working at Instagram at the time. And introduces to the world how they choose to bundle their react applications with Webpack. And from there Webpack explodes. It was at a huge conference, it was basically, used by Facebook even though it's not Facebook core, it's Instagram.

[00:06:01]
And nobody knew who's this random German guy working on this project. And really at this time, Tobias was really only spending about five hours a week on the project. But then, Dan Abramov is, probably? [LAUGH] Dan, he's a good guy. Dan came around at a react conf, and basically wanted to know, so Dan was researching, so stack.

[00:06:30]
You can just search, stack overflow Dan Abramov, this is the best. Hot module replacement. So then in two years later, Dan Abramov posts like how cool is that? You look at where people started from till today. He basically, what the heck is this hot module replacement that was in Webpack.

[00:06:55]
It was kinda an out of th feature and he's like, I don't know what this is. Nobody knows what this is. The Webpack1 docks were awful. And so, Tobias jumps on and describes it from a very complex. He gives the whole. It was a great answer! I mean look, the thing's got like, that's probably all of Tobias's points on Stack Overflow is from this question.

[00:07:17]
But he talked about how it works and what makes it so cool. You can live reload without ever refreshing the browser. [LAUGH] I love it! This is some of my favorite parts about how Webpack has grown. So Dan took this information and this is what created redux. This is what created react top loader.

[00:07:43]
This moment right here, and so, when Dan showcased this to the world at, what was it, React Con or React Rally 2015 or 2014, Webpack exploded in an insane proportion, and basically got adopted by the React ecosystem. Even though Facebook still today doesn't use it themselves, this is where Webpack's popularity came from, two talks at conferences.

[00:08:11]
And of course things kinda changed once I started joining. I got the angular ecosystem involved and then other people started realizing, wait, maybe we should build our framework on top of Webpack. So view JS came around, and took all of China by storm. But, so I could go on and on about that forever.

[00:08:31]
It's a really interesting little thing to think about. Webpack was actually been around, some people complain, there's so much churn in JavaScript, I'm like. We've been around for five years. It's been around in the ecosystem for five years. 14 million downloads a month today.