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