隨著互聯(lián)網(wǎng)大潮的興起，web 項(xiàng)目復(fù)雜度上升，前端社區(qū)蓬勃發(fā)展，前端構(gòu)建已經(jīng)是開發(fā)工作中一個(gè)繞不開的話題。上圖羅列了前端的很多東西，除了一些類庫，其他基本都和構(gòu)建有一定的關(guān)系。
在前端舊時(shí)代，JavaScript 本身就缺乏模塊化相關(guān)規(guī)范的支持，而現(xiàn)今也并非所有瀏覽器都支持新的 JavaScript Module，所以在前端構(gòu)建中，代碼模塊打包幾乎就是最重要的一部分。
上圖簡單地比較了當(dāng)前前端社區(qū)比較流行的四個(gè)模塊打包工具 —— webpack、browserify、rollup、parcel-bundler 2018 年 1 月 npm 包下載量和 GitHub stars 數(shù)量，很明顯，webpack 可以說是最為人所知，使用量最大的一個(gè)。
從 GitHub 的 webpack 代碼倉庫的 master 貢獻(xiàn)圖來看，webpack 從 2012 年開始，主代碼倉庫都相當(dāng)活躍，尤其是 2017 年，更是有了巨大的變化。
期間，webpack 經(jīng)歷了幾個(gè)主要版本變更，從開始火熱的 1.x 版本，經(jīng)過了 2.x，3.x，走到了現(xiàn)在還在成長中的 4.x 版本，webpack 在不斷地完善中。整個(gè) webpack 社區(qū)一直是相當(dāng)活躍的，周邊相關(guān)的插件等基本覆蓋了前端日常開發(fā)工作所需，隨時(shí)代發(fā)展，也添加了不少新特性，如 tree-shaking 等。
至今，webpack 已經(jīng)成為家喻戶曉的前端打包工具，是當(dāng)前可以使用的前端代碼模塊打包工具中最具代表性的一個(gè)。
使用過 webpack 的都了解，webpack 本身具備了諸多優(yōu)點(diǎn)：從單一入口出發(fā)，打包所有前端資源，使用 loader 處理多種代碼語言的轉(zhuǎn)換，使用 plugin 擴(kuò)展原有的模塊打包流程，使用 HMR 提升開發(fā)體驗(yàn)，利用代碼壓縮和代碼分割來提升前端加載性能等。
我們可以發(fā)現(xiàn)，在大多數(shù)項(xiàng)目中，webpack 已經(jīng)可以成為構(gòu)建工作的主心骨，應(yīng)該具備的功能都已經(jīng)具備，對 webpack 的了解幾乎成了前端開發(fā)人員必不可少的技能之一。
但是一直以來，webpack 文檔說明為人所詬病，由于 webpack 本身功能就具備一定的復(fù)雜性和自由度，文檔總是難以面面俱到（3.x 版本已經(jīng)改善了相當(dāng)多，4.x 的文檔還在努力準(zhǔn)備中），部分細(xì)節(jié)沒有深入，也比較少去講述 webpack 面向具體構(gòu)建需求時(shí)的使用。同時(shí)，webpack 源碼的可讀性一般，開發(fā)者遇見問題時(shí)難以開發(fā)調(diào)試，普遍停留在 webpack 的基礎(chǔ)使用上，不敢大刀闊斧地用來定制舒服的開發(fā)流程。
我們可以在社區(qū)中找到很多關(guān)于 webpack 的文章，有不少相當(dāng)實(shí)用的，可以幫助新手快速入門 webpack，也有不少相當(dāng)深入的，可以從某一層面剖析如何更好地使用 webpack，但總歸是零零散散，缺乏一個(gè)相對系統(tǒng)化的 webpack 學(xué)習(xí)指南。
我希望將我使用 webpack 的經(jīng)驗(yàn)總結(jié)一下，來完成這么一份系統(tǒng)化的學(xué)習(xí)指南，來幫助更多開發(fā)者熟悉了解 webpack，更好地利用 webpack，為自己，為團(tuán)隊(duì)，隨心所欲地定制前端開發(fā)環(huán)境。于是，便誕生了這樣一本小冊，希望能夠?qū)δ愕那岸酥酚兴鶐椭?/span>
teabyii，《Node.js硬實(shí)戰(zhàn)：115個(gè)核心技巧》譯者之一，前支付寶前端工程師，現(xiàn)唯品會(huì)高級(jí)開發(fā)工程師，曾負(fù)責(zé)多個(gè)前端系統(tǒng)的基礎(chǔ)構(gòu)建服務(wù)，熱愛 JavaScript，喜愛折騰開發(fā)工具，致力于提高前端開發(fā)效率，正努力走在成為優(yōu)秀的開發(fā)工程師的路上。
聯(lián)系客服
