Webpack 誕生記

Webpack 歷史

最近在frontendmaster 看 肖恩講webpack的視頻課程，其中有一節課是講 Webpack的誕生歷史，頗有意思，而後找了一些資料，因而有了這篇。

這裏我會聊下 Webpack 誕生的歷程，流行起來的緣由，還有周邊的一些八卦

在 github 上 webpack 主頁往下拖，能夠看到 Webpack 核心開發的頭像

這裏主要介紹2位，排第三位就是肖恩，大部分前端開發者比較熟悉，肖恩是個頗有意思的人，很是幽默有趣，中文很溜，這個月還來北京參加活動，在微軟負責 Edge Devtools 開發工做，在 Webpack 上負責開發，以及對外工做，幽默真不是蓋的，看下面2個視頻

今天的主角不是肖恩，是第一位, Tobias Koppers 是 Webpack 倉庫 建立者，簡單講就是 Webpack 是 Tobias 的兒子

Tobias 是一個德國人(典型的德國人性格哈，網上都找不到他的採訪,照片), Tobias 的網絡暱稱 叫 sokra ，後面咱們就叫 sokra，sokra 沒有寫過 web頁面，哈哈這個就頗有意思了，一個沒有寫過 web頁面的人發明了當代 web 開發的基石，想一想都以爲頗有意思哦，下面小編就給你們掰扯下，你們準備好瓜子，小板凳

sokra 一開始是 寫 Java 的,Java 裏面有個很出名的技術 叫 GWT（Google Web Toolkit），GWT 是把 Java 代碼轉換成 JavaScript ，也就是讓後端來寫前端，本質上也是在 AST 層面對代碼作一成轉換，Babel 也是幹這件事的，可是 GWT 這門技術沒有流行起來，後面 Google 也不推廣了

小編插一句哈，Java 一直想染指 web 頁面的，之前 Java 有 Applet，主要處理頁面，動畫，後來 Flash 戰勝了 Applet，接着 JavaScript又取代了FLash，但人類慾望是無止境的，如今搞 web vr，大型設計軟件，JavaScript 的性能是知足不了的，全部出現了，WebAssembly

GWT 裏面有個 feature 叫 「code splitting」，因而 他當時給用來作前端項目 Bundle 的 node.js 庫 modules-webmake 提了一個 issue ，但願他們能實現， 「code splitting」就是 Webpack 如今提供的主要功能，也是當代前端的基石

modules-webmake 維護者一直沒有實現這個功能，這個 issues 如今還 open 着，你們能夠點進去看看，sokra 的回覆頗有意思的 因而 sokra 就 fork了一份 modules-webmake 代碼 ，在github上開了一個新的項目 webpack，時間是 2012年3月10號，記住這個偉大的日子，Webpack這個偉大的項目就這樣誕生了！！！！，估計 sokra 當時也沒想往後 Webpack 會這麼流行，成爲前端開發的標配

因此 Webpack 最開始的 功能主要是 Bundle，特色是「code splitting」 看看， Webpack 也是 fork 其餘項目，Babel 的核心 @babel/core 庫 是fork 的 acorn 庫，因此你們拉個 github 庫到本地，改改本身用，不用很差意思

Webpack 誕生了，但它是怎麼流行起來了，這個也頗有意思,咱們把時間回撥到2013年，這一年，React 開源了，React 是 Facebook 在 2012年內部使用的一個框架，同年 Facebook 收購了 Instagram，因此 Instagram 也是用的 React ，Instagram是一個圖片的社交網站，圖片仍是高清的，對頁面性能要求那是至關高的

在往前走，到了 2014 OSCON 大會 （OSCON 是動物書 O'Reilly 組織的），Instagram 的前端團隊分享了他們對前端頁面加載性能優化，其中很重要的一件就是用到的 Webpack 的 「code splitting」

當時引發了很大的轟動，以後你們紛紛使用 Webpack，並給Webpack 貢獻了無數的 plugins ，loader，因此你們看到 2014年後 Webpack 發展很是迅猛，版本更新很是快，最後這些 plugins 也模糊了 module bundler 和 tasks 的界限，因而把 前端 tasks，workflow工具 grunt gulp 取代了，視頻地址

瓜到這裏就結束了麼，沒有的，接着講講 Webpack 和 Redux 做者 Dan Abramov 大帥哥的事，帥不帥，下圖爲證，Dan 還只有 27歲哦

Webpack 還有個很厲害的創新是 熱更新 Hot Module Replacement (HMR) 2014年7月5號凌晨（看，大佬這麼晚還在學習），Dan 在著名 Stackoverflow 網站上提了個 「Webpack中的熱模塊更換到底是什麼？」， 而後 sokra 作了詳細的回到，這也是 sokra 第一次詳細的解釋 HMR，看了半天，我仍是沒看明白解釋（哈哈），有興趣的能夠看看

瓜到這裏就講完了，我本身以爲 Webpack 這個誕生真的挺有意思的，sokra 一個沒有寫過 前端頁面的開發者，看到了 code splitting 這個創造性的 idea，在已有的庫提了 issure 沒有實現這個功能，本身操刀寫了一個，而後在 Instagram 前端團隊的在大會的分享下傳播下，流行起來，接着廣大開發者提交 plugins，loader，這裏的每一個過程都是自發，沒有KPI驅動的，出於喜歡或者好玩，這種精神就是程序員吸引人的地方。 有時候，我就在想國內的996，房子壓力讓咱們開發者失去了不少這種樂趣，滿滿的無奈。

資料參考： sokra講Webpack的誕生 survivejs.com/webpack/for…