Webpack history

I recently watched Sean’s webpack lecture at FrontendMaster, and one of the lessons was on the birth history of Webpack, which was very interesting, so I found some materials and came up with this article.

Here I’ll talk about how Webpack came to be, why it became popular, and some of the gossip around

Drag down the WebPack home page on Github to see the avatar of the core WebPack development

Most front-end developers are familiar with Sean, who is very interesting and humorous, and fluent in Chinese. He also came to Beijing to participate in activities this month. He is responsible for the development of Edge Devtools and Webpack in Microsoft, as well as external work. Humor is no joke. Watch the following 2 videos

Tobias Koppers is the founder of the Webpack warehouse. In short, Webpack is Tobias’ son

Tobias is a German. His online nickname is Sokra, which we will call sokra. Sokra has never written a Web page. It’s interesting to think that someone who has never written a Web page has invented the cornerstone of modern Web development

Sokra started out writing Java. There’s a very famous technology in Java called GWT (Google Web Toolkit). GWT converts Java code into JavaScript, so the back end writes the front end. It was essentially transforming code at the AST level, which Babel did, but GWT didn’t catch on and Google stopped pushing it

Java has always wanted to get its hands on web pages. Java used to have applets for pages and animations, and then Flash beat applets, and then JavaScript took over Flash, but human desire is endless, and now web VR, Large design software, JavaScript performance is not enough, all came out, WebAssembly

GWT has a feature called “Code Splitting”, so he proposed an issue for the Node.js library modules-webmake, which is used to build front-end project bundles, hoping they could implement it. Code Splitting is the main feature Webpack now offers and is the cornerstone of a contemporary front-end

Modules-webmake has not been implemented by the maintainer. The issues issue is still open, so you can check it out. Sokra’s response is very interesting, so Sokra forks a modules-webmake code. A new project webpack was launched on Github on March 10, 2012. Remember this great date, webpack was born ！！！！ “Sokra probably didn’t expect Webpack to become so popular that it would become a standard part of front-end development

So Webpack started out as bundles with code splitting features. Look at Webpack, which is also a fork project. The core of Babel, @babel/core, is the Acorn library for fork. So everyone pull a Github library to the local, change their own use, don’t be ashamed

Webpack was born, but it’s also interesting to see how it caught on. We’re going back to 2013, which was the year React was open-source, and React was a framework that Facebook was using internally in 2012, the same year Facebook acquired Instagram, So Instagram also uses React. Instagram is a social networking site for images, which are in high definition and require very high performance

Moving forward, at OSCON 2014 (organized by ANIMAL book O’Reilly), the Instagram front end team shared their optimization for front end page loading performance, and one of the important things they did was use Webpack’s “Code Splitting”.

At that time, it caused a great sensation, and then people started to use Webpack and contributed numerous plugins and loaders to Webpack. Therefore, after 2014, Webpack developed rapidly and its version was updated rapidly. As a result, plugins blur the line between Module Bundler and Tasks, replacing the video address with the front-end Tasks, Workflow tool Grunt Gulp

That’s the end of it. No, let’s move on to Webpack and Redux author Dan Abramov. Handsome or not, for proof, Dan is only 27

Another great innovation in Webpack was the Hot Module Replacement (HMR) on July 5, 2014, in the wee hours of the morning (look, the big guys are still studying so late), Dan on the popular Stackoverflow site asked “What the hell is hot module replacement in Webpack?” Then Sokra made a detailed return, this is the first time Sokra explained HMR in detail, after reading for a long time, I still do not understand the explanation (ha ha), interested can see

Sokra, a developer who had never written a front end page, came across the creative idea of Code Splitting and suggested that Issure didn’t implement it in the existing library. After that, the majority of developers submit plugins and loaders. Every process here is spontaneous, not KPI-driven, out of love or fun. This spirit is the attraction of programmers. Sometimes, I think of the 996 in China, the pressure of the house makes us developers lose a lot of this fun, full of helplessness.

The birth of information reference: sokra Webpack survivejs.com/webpack/for…