大家好！我是蘿卜不帶泥蒲列，webpack作為目前最流行的構(gòu)建工具，幾乎成為前端同學(xué)武器庫中必備的工具之一搀罢，寫這個(gè)系列文章的用意就是想把自己在平時(shí)工作中使用webpack的一些經(jīng)驗(yàn)和心得和大家分享蝗岖，也是對(duì)自己這些年的前端工作做一個(gè)階段性的總結(jié)，希望能給大家?guī)硇┰S的幫助榔至。

在學(xué)習(xí)webpack前抵赢，需要先知道為什么要用webpack，我將從以下兩個(gè)方面進(jìn)行講解：

一唧取、前端發(fā)展的需要

近些年铅鲤，前端世界翻天覆地，新思想和新框架不斷涌現(xiàn)枫弟，我們可以通過模塊化的思想來組織代碼邢享，諸如CommonJS、ES6模塊化標(biāo)準(zhǔn)規(guī)范給前端開發(fā)帶來了極大的效率提升淡诗，但是它們都必須通過工具轉(zhuǎn)換成標(biāo)準(zhǔn)的ES5才能直接運(yùn)行在瀏覽器環(huán)境下骇塘。我們可以使用React伊履、Vue來重構(gòu)已有的項(xiàng)目或者開發(fā)新的項(xiàng)目，React框架通過將JSX語法引入到Javascript語言層面中款违，可靈活的控制試圖的渲染邏輯唐瀑。Vue框架將HTML模板、Javascript邏輯代碼插爹、CSS樣式都寫在一個(gè)文件里哄辣。這些框架都通過組件化的方式組織代碼，減少開發(fā)難度赠尾，提升開發(fā)效率力穗。但是它們的問題也是無法直接在現(xiàn)成的Javascript引擎里運(yùn)行，必須經(jīng)過轉(zhuǎn)換萍虽。我們還可以使用新的語言如：ES6睛廊、TypeScript、SCSS杉编、LESS等超全，使用這些新語言可以提升編碼效率，但是必須將源代碼轉(zhuǎn)換成可以直接在瀏覽器環(huán)境下運(yùn)行的代碼邓馒。

我們?cè)诟袊@前端技術(shù)發(fā)展之快的同時(shí)也面臨著更大的挑戰(zhàn)嘶朱，通過直接編寫Javascript、CSS光酣、HTML開發(fā)Web應(yīng)用的方式已經(jīng)無法應(yīng)對(duì)當(dāng)前Web應(yīng)用的發(fā)展疏遏，我們必須通過構(gòu)建的方式，將源代碼轉(zhuǎn)換成可執(zhí)行的Javascript救军、CSS财异、HTML代碼，包括如下內(nèi)容：

1. 代碼轉(zhuǎn)換：將TypeScript編譯成Javascript唱遭，將SCSS編譯成CSS等戳寸。

2. 文件優(yōu)化：壓縮Javascript、CSS拷泽、HTML代碼疫鹊，壓縮合并圖片等。

3. 代碼分割：提取多個(gè)頁面的公共代碼司致，提取首屏不需要執(zhí)行部分的代碼讓其異步加載拆吆。

4. 模塊合并：在采用模塊化的項(xiàng)目里會(huì)有很多個(gè)模塊和文件，需要通過構(gòu)建功能將模塊分類合并成一個(gè)文件脂矫。

5. 自動(dòng)刷新：監(jiān)聽本地源代碼的變化枣耀，自動(dòng)重新構(gòu)建、刷新瀏覽器羹唠。

6. 代碼校驗(yàn)：在代碼被提交到倉庫前需要校驗(yàn)代碼是否符合規(guī)范奕枢，以及單元測(cè)試是否通過娄昆。

7. 自動(dòng)發(fā)布：更新代碼后，自動(dòng)構(gòu)建出線上發(fā)布代碼并傳輸給發(fā)布系統(tǒng)缝彬。

構(gòu)建其實(shí)是工程化萌焰、自動(dòng)化思想在前端開發(fā)中的體現(xiàn)，將一系列流程用代碼去實(shí)現(xiàn)谷浅，讓代碼自動(dòng)化的執(zhí)行這一系列復(fù)雜的流程扒俯。

二、常見的構(gòu)建工具對(duì)比

近些年先后出現(xiàn)了一系列構(gòu)建工具一疯，它們各有優(yōu)缺點(diǎn)撼玄，由于前端工程師熟悉Javascript，Nodejs又可以勝任所有構(gòu)建需求墩邀，所以大多數(shù)構(gòu)建工具都是用Nodejs開發(fā)的掌猛，下面就對(duì)常見的構(gòu)建工具進(jìn)行對(duì)比。

Grunt

Grunt是一個(gè)任務(wù)執(zhí)行者眉睹，有大量現(xiàn)成的插件封裝了常見的任務(wù)荔茬，也能管理任務(wù)之間的依賴關(guān)系，自動(dòng)化的執(zhí)行依賴的任務(wù)竹海，每個(gè)任務(wù)的具體執(zhí)行代碼和依賴關(guān)系都寫在配置文件Gruntfile.js里慕蔚，Grunt的優(yōu)點(diǎn)是：

1. 靈活，它只負(fù)責(zé)執(zhí)行我們定義的任務(wù)斋配。

2. 大量的可復(fù)用插件封裝好了常見的構(gòu)建任務(wù)孔飒。

3. Grunt的缺點(diǎn)是集成度不高，要寫很多配置后才可以使用艰争，無法做到開箱即用坏瞄。

Gulp

Gulp是一個(gè)基于流的自動(dòng)化構(gòu)建工具，除了可以管理和執(zhí)行任務(wù)甩卓，還支持監(jiān)聽文件惦积、讀寫文件。Gulp被設(shè)計(jì)的非常簡(jiǎn)單猛频，只通過下面5種方法就可以支持幾乎所有構(gòu)建場(chǎng)景：

1. 通過gulp.task注冊(cè)一個(gè)任務(wù)。

2. 通過gulp.run執(zhí)行任務(wù)蛛勉。

3. 通過gulp.watch監(jiān)聽文件的變化鹿寻。

4. 通過gulp.src讀取文件。

5. 通過gulp.dest寫文件诽凌。

Gulp的最大特點(diǎn)是引入了流的概念毡熏，同時(shí)提供了一系列常用的插件去處理流，流可以在插件之間傳遞侣诵。Gulp的優(yōu)點(diǎn)是好用又不失靈活痢法，既可以單獨(dú)完成構(gòu)建狱窘，也可以和其他工具搭配使用，其缺點(diǎn)和Grunt類似财搁，集成度不高蘸炸，要寫很多配置后才可以使用，無法做到開箱即用尖奔。

可以將Gulp看作Grunt的加強(qiáng)版搭儒。相對(duì)于Grunt，Gulp增加了監(jiān)聽文件提茁、讀寫文件淹禾、流式處理的功能。

Fis3

Fis3是一個(gè)國產(chǎn)的構(gòu)建工具茴扁，由百度的團(tuán)隊(duì)開發(fā)和維護(hù)铃岔，相對(duì)于Grunt、Gulp這些只提供了基本功能的工具峭火，F(xiàn)is3集成了Web開發(fā)中的常用構(gòu)建功能：

1. 讀寫文件：通過fis.match讀文件毁习，release配置文件的輸出路徑。

2. 資源定位：解析文件之間的依賴關(guān)系和文件位置躲胳。

3. 文件指紋：在通過useHash配置輸出文件時(shí)為文件URL加上md5戳蜓洪，來優(yōu)化瀏覽器緩存。

4. 文件編譯：通過parser配置文件解析器做文件轉(zhuǎn)換坯苹，例如將ES6編譯成ES5隆檀。

5. 壓縮資源：通過optimizer配置代碼壓縮方法。

6. 圖片合并：通過spriter配置合并CSS里導(dǎo)入的圖片到一個(gè)文件中粹湃，減少HTTP請(qǐng)求數(shù)恐仑。

Fis3的優(yōu)點(diǎn)是集成了各種Web開發(fā)所需的構(gòu)建功能，配置簡(jiǎn)單为鳄、開箱即用裳仆。其缺點(diǎn)是目前官方已經(jīng)不再更新和維護(hù)，不支持最新版本的Nodejs孤钦。

Webpack

Webpack是一個(gè)打包模塊化Javascript的工具歧斟，在Webpack里一切文件皆模塊，通過Loader轉(zhuǎn)換文件偏形，通過Plugin注入鉤子静袖，最后輸出由多個(gè)模塊組合成的文件，Webpack專注于構(gòu)建模塊化項(xiàng)目俊扭，這樣的好處是能清晰的描述各個(gè)模塊之間的依賴關(guān)系队橙，以方便Webpack對(duì)模塊進(jìn)行組合和打包，經(jīng)過Webpack的處理，最終會(huì)輸出瀏覽器能使用的靜態(tài)文件捐康。Webpack的優(yōu)點(diǎn)是：

1. 專注于處理模塊化的項(xiàng)目仇矾，能做到開箱即用、一步到位解总。

2. 可通過Plugin擴(kuò)展贮匕，完整好用又不失靈活。

3. 使用場(chǎng)景不局限于Web開發(fā)倾鲫。

4. 社區(qū)龐大靈活粗合，經(jīng)常引入緊跟業(yè)界的新特性，能為大多數(shù)場(chǎng)景找到已有的開源擴(kuò)展乌昔。

5. 良好的開發(fā)體驗(yàn)隙疚。

Webpack的缺點(diǎn)是只能用于采用模塊化開發(fā)的項(xiàng)目。

三磕道、為什么選擇Webpack

這些構(gòu)建工具都有各自的定位和專注點(diǎn)供屉，它們之間既可以單獨(dú)完成任務(wù)，也可以相互搭配來彌補(bǔ)各自的不足溺蕉，之所以我們?cè)陂_發(fā)中選擇webpack作為常用的構(gòu)建工具伶丐，主要原因是：

1. 大多數(shù)團(tuán)隊(duì)在開發(fā)項(xiàng)目時(shí)基本都會(huì)采用“模塊化+新語言+新框架“，webpack可以提供一站式的解決方案疯特。

2. Webpack有良好的生態(tài)鏈和維護(hù)團(tuán)隊(duì)哗魂，能夠提供良好的開發(fā)體驗(yàn)并保證質(zhì)量。

3. Webpack被全世界大量的Web開發(fā)者使用和驗(yàn)證漓雅，能找到各個(gè)層面所需的教程和經(jīng)驗(yàn)分享录别。

歡迎大家繼續(xù)關(guān)注我的文章，下一節(jié)我們將進(jìn)入webpack的世界邻吞！