我是三水清，之前曾就職于新浪微博和騰訊，目前在某廠做前端架構(gòu)師。這次專欄我們講 Webpack，作為筆試必考、面試必問(wèn)、工作必用的內(nèi)容，Webpack 正變得越來(lái)越重要，尤其對(duì)于大型公司，會(huì)不會(huì) Webpack 甚至能直接決定你是否被錄用，那講 Webpack 就離不開(kāi)前端工程化這個(gè)大的課題。
隨著多年的發(fā)展，前端越來(lái)越模塊化、組件化、工程化，這是前端發(fā)展的大趨勢(shì)。但無(wú)論什么“化”，其目的都是為了提升開(kāi)發(fā)效率，尤其是對(duì)于大廠而言，效率直接關(guān)乎效益，所以一般大公司都會(huì)有專門(mén)的人或團(tuán)隊(duì)研究工程效率，我本人正是從事這樣的工作，在一個(gè)知名的互聯(lián)網(wǎng)公司負(fù)責(zé)團(tuán)隊(duì)的前端工程化技術(shù)建設(shè)和工具鏈打造。
作為一個(gè)十年的前端老司機(jī)，我經(jīng)歷了前端從刀耕火種到現(xiàn)在百花齊放的各個(gè)階段，我自己從一個(gè)互聯(lián)網(wǎng)小白成長(zhǎng)為能夠獨(dú)當(dāng)一面的架構(gòu)師，在整個(gè)過(guò)程中，我接觸到了很多前端開(kāi)發(fā)和調(diào)試技術(shù)，對(duì)前端工程化有切身的感受，自己也努力打造更加適合團(tuán)隊(duì)的前端工具鏈，希望以此來(lái)提升整個(gè)團(tuán)隊(duì)的研發(fā)效率。這些年，從 Grunt、Gulp 到 FIS，再到 Webpack，我?guī)ьI(lǐng)團(tuán)隊(duì)做了很多工程化的嘗試，目前我們團(tuán)隊(duì)主要在 Webpack 的技術(shù)上做工程化和模塊化開(kāi)發(fā)的探索和實(shí)踐，在這個(gè)過(guò)程中我沉淀了大量的知識(shí)和最佳實(shí)踐，我希望能夠?qū)⑦@些知識(shí)分享，以讓更多人受益，同時(shí)，總結(jié)和寫(xiě)作也是我學(xué)習(xí)輸出的一種方式。
在推出這個(gè)專欄之前，我了解到很多同學(xué)對(duì) Webpack 和工程化都接觸不多，知道 Webpack 的也僅僅是把它當(dāng)做一個(gè)打包工具來(lái)使用，但是隨著時(shí)代的發(fā)展和你技術(shù)的成長(zhǎng)，你會(huì)發(fā)現(xiàn)越來(lái)越多的問(wèn)題擺在我們的面前：
- 現(xiàn)在開(kāi)發(fā)都是模塊化開(kāi)發(fā)，但是模塊多了，模塊之間的依賴管理究竟應(yīng)該怎么做呢？
- 頁(yè)面復(fù)雜度提升之后，多頁(yè)面、多系統(tǒng)、多狀態(tài)怎么管理，頁(yè)面間的公共部分應(yīng)該如何維護(hù)，難道還是復(fù)制粘貼嗎？
- 團(tuán)隊(duì)擴(kuò)大之后，團(tuán)隊(duì)合作怎么做？怎么解決多人研發(fā)中的性能、代碼風(fēng)格等問(wèn)題？
- 權(quán)衡研發(fā)效率和產(chǎn)品迭代的問(wèn)題。
這些問(wèn)題雖然不是 Webpack 直接可以解決的問(wèn)題，但是我們完全可以圍繞 Webpack 打造一個(gè)前端工程化解決方案來(lái)解決這些問(wèn)題。很多人說(shuō)會(huì)了 Webpack 你就變成「配置工程師」了，這句話取決于你的眼界高度。如果我們只是看到了一個(gè) JavaScript 的模塊化打包工具，那么我們可以滿足前端開(kāi)發(fā)的「溫飽問(wèn)題」，如果我們深入了解了 Webpack 內(nèi)核機(jī)制，并且能夠利用強(qiáng)大的插件系統(tǒng)，我們就可以實(shí)現(xiàn)前端開(kāi)發(fā)中的「小康」。
在日常工作及準(zhǔn)備這個(gè)專欄的過(guò)程中，我了解到很多前端工程師，哪怕是一直在使用 Webpack 的工程師也很少關(guān)注Webpack 究竟該怎么用，都是想到哪里就上網(wǎng)上或官方查命令，然后閉著眼往上套，這樣獲取的知識(shí)零碎不系統(tǒng)，而且由于沒(méi)有系統(tǒng)學(xué)習(xí) Webpack，很多時(shí)候不能靈活變通，當(dāng)真正出了問(wèn)題時(shí)反而找不到解決方案。
其實(shí) Webpack 絕不僅僅是一個(gè)打包工具，它可以做的事情太多了，系統(tǒng)的學(xué)習(xí) Webpack 之后，我們可以基于 Webpack 做很多提升研發(fā)效率的事情。像 vue-cli 這類(lèi)開(kāi)發(fā)工具，都內(nèi)置了 Webpack，每個(gè)項(xiàng)目的 Webpack 配置基本都是該項(xiàng)目的最佳實(shí)踐，但是多個(gè)項(xiàng)目的時(shí)候最佳實(shí)踐遷移和維護(hù)就有很多問(wèn)題，所以越來(lái)越多的公司和團(tuán)隊(duì)會(huì)把 Webpack 內(nèi)置化，這樣做了一套構(gòu)建工具的解決方案，今后有新的解決方案和優(yōu)化升級(jí)，只需要升級(jí)這個(gè)工具就好了。上面所說(shuō)的這些，我們?cè)谡n程都會(huì)講到。
我想說(shuō)明的是，Webpack 是一個(gè)龐大的知識(shí)體系，不要小看了它！
學(xué)習(xí)一個(gè)新的龐大知識(shí)體系，不能夠分開(kāi)來(lái)零散的學(xué)習(xí)，更不能填鴨式的學(xué)習(xí)，我們應(yīng)該循序漸進(jìn)，從零開(kāi)始直到項(xiàng)目實(shí)踐，動(dòng)手做起來(lái)才是我們程序員應(yīng)該踐行的學(xué)習(xí)方式。在這個(gè)專欄中，每一篇文章內(nèi)都有可執(zhí)行的代碼可以供大家學(xué)習(xí)和實(shí)踐，最后的實(shí)戰(zhàn)部分更是可以直接應(yīng)用到自己的項(xiàng)目中去，不僅如此，我還希望通過(guò)這些實(shí)戰(zhàn)案例，能夠啟發(fā)大家在工程化實(shí)踐中有新的想法，這正是我這個(gè)專欄的價(jià)值之一。
我主張學(xué)習(xí)的時(shí)候帶著問(wèn)題去學(xué)習(xí)，我的專欄會(huì)從零開(kāi)始，一點(diǎn)點(diǎn)的帶著大家學(xué)習(xí) Webpack 的知識(shí)體系，希望大家通過(guò)我的專欄可以解答下面疑惑：
- 什么是模塊化開(kāi)發(fā)？
- 為什么是 Webpack？
- Webpack 中的配置有哪些，分別可以幫我們解決什么問(wèn)題？
- Webpack 中的概念有哪些？
- 這些概念在 Webpack 內(nèi)核實(shí)現(xiàn)和原理上是怎么實(shí)現(xiàn)的？
- 除了打包，我們還可以使用 Webpack 做什么？
除了解答上面的問(wèn)題，我的專欄還會(huì)就涉及到的周邊知識(shí)點(diǎn)進(jìn)行詳細(xì)和深入的講解，不僅僅能夠?qū)W到 Webpack 的知識(shí)，還能夠開(kāi)闊眼界，也能夠幫助大家在面試的時(shí)候解答考官問(wèn)題。
另外，如果你是一個(gè)前端團(tuán)隊(duì)leader ，或者前端面試官，在面試新人的過(guò)程中 Webpack 肯定是面試中必不可少的一個(gè)項(xiàng)目。所以我為大家分享了我積攢的這方面的“題庫(kù)”，與大家一起討論。如果你是面試官，這些題目你可以拿來(lái)直接在面試中使用；如果你是求職者，那這些題目也必然會(huì)讓你在面試時(shí)有備無(wú)患，自如應(yīng)對(duì)。
我希望，通過(guò)這個(gè)專欄，不管是剛?cè)腴T(mén)的「菜鳥(niǎo)」還是想在自己團(tuán)隊(duì)有所作為的「老鳥(niǎo)」，都能夠有所受益。
最后，我為大家簡(jiǎn)單介紹一下課程的具體安排：
這個(gè)專欄是從零開(kāi)始入門(mén) Webpack，哪怕你沒(méi)接觸過(guò)也沒(méi)有關(guān)系，當(dāng)然專欄也絕不僅僅是入門(mén)級(jí)的內(nèi)容，從入門(mén)、進(jìn)階到最后通過(guò)工程化實(shí)戰(zhàn)，帶你完成系統(tǒng)的Webpack全階段學(xué)習(xí)。我將專欄課程分為了 3 大部分（共 6 大模塊），這 3 大部分為：Webpack 開(kāi)發(fā)配置、Webpack 內(nèi)核原理和工程化實(shí)踐。
第一部分：我們要學(xué)習(xí)一個(gè)新的知識(shí)點(diǎn)，一定要搞明白是什么、為什么、可以做什么，所以我們專欄的第一步主要來(lái)解釋 Webpack 是什么，以及 Webpack 怎么在前端開(kāi)發(fā)發(fā)揮作用的，學(xué)習(xí)了這一部分算是 Webpack 入門(mén)了，日常開(kāi)發(fā)配置都沒(méi)問(wèn)題了。
第二部分：學(xué)習(xí)了基礎(chǔ)配置，我們可以稱得上是個(gè)合格的「配置工程師」了，接下來(lái)我們開(kāi)始深入學(xué)習(xí) Webpack 的內(nèi)核實(shí)現(xiàn)，包括工作流程、重要的對(duì)象和實(shí)現(xiàn)。這部分是承上啟下的部分，理解了這部分你就可以理解 Webpack 的流程機(jī)制，不再是一個(gè)簡(jiǎn)單的「配置工程師」了，還可以幫助團(tuán)隊(duì)做一些源碼級(jí)別的改造和探索。
最后一步，學(xué)會(huì)了配置和原理，我們還應(yīng)該發(fā)現(xiàn)前端研發(fā)中的現(xiàn)實(shí)問(wèn)題和需求，能夠想辦法來(lái)解決問(wèn)題，這才是真的做到學(xué)以致用，這部分的內(nèi)容將會(huì)具有很強(qiáng)的實(shí)操性，有些實(shí)戰(zhàn)可以直接在項(xiàng)目中使用。這一部分學(xué)完并且能夠融會(huì)貫通，恭喜你，你可以借助 Webpack 打造自己的前端工程化解決方案了！
好了，Talk is cheap，讓我們開(kāi)始吧！