史上最走心webpack4.0中級教程——配置以外你應該知道的事

《webpack4.0各個擊破系列》適合不知足於只會配置webpack但一時間又看不懂源碼的中級讀者。我無法保證這個系列是最好的，但至少能保證每一篇博文都跟那些Ctrl+C和Ctrl+V的博文有本質的區別，不信你讀讀看。

一.webpack是什麼

中文版官方網址：www.webpackjs.com

webpack是前端最火的打包工具，是大前端自動化工廠的重要組成部分。上面的LOGO已經很是形象地表達了webpack所作的最主要的事情——打包，儘管它爲很是多的工具提供了適配接口，但官網仍然推薦將webpack做爲自動化工具鏈的一部分集成進更大的工具系統，而不是將一切需求的實現都寄但願於webpack。

二.webpack4.0各個擊破系列

《webpack4.0各個擊破系列》是筆者原創的webpack4.0使用指南，它並不像其餘教程那樣一步一步貼着圖來演示配置方法，而是經過問題+推演的方式，從打包須要解決的問題，對應的處理策略，以及webpack相關的一些配置和原理等進行綜合講解。若是你尚未使用過webpack，那麼建議你先閱讀官方文檔和一些入門級的配置教程（它們可能已通過時了，社區裏針對webpack4.0以上版本的博文並很少，並且大多數都只是在重複官網已經聲明過的問題）。若是你想從「爲何」的層面上理解webpack，那麼閱讀本系列必定會帶給你收穫。

• 《Webpack4.0各個擊破（1）html篇》

  http://www.javashuo.com/article/p-gfwjwxsr-gu.html

• 《Webpack4.0各個擊破（2）css篇》

  http://www.javashuo.com/article/p-sonhoffa-gy.html

• 《Webpack4.0各個擊破（3）assets篇》

  http://www.javashuo.com/article/p-nopegqtj-hb.html

• 《Webpack4.0各個擊破（4）javascript & splitChunks篇》

  http://www.javashuo.com/article/p-qpwsfjqw-hp.html

• 《Webpack4.0各個擊破（5）module篇》

  http://www.javashuo.com/article/p-wkcwwfyd-ht.html

• 《Webpack4.0各個擊破（6）loader篇》

  http://www.javashuo.com/article/p-qdzqwnyk-hw.html

• 《Webpack4.0各個擊破（7）plugin篇》

  http://www.javashuo.com/article/p-sbplathm-kb.html

• 《Webpack4.0各個擊破（8）tapable篇》

  http://www.javashuo.com/article/p-veugqnri-kn.html

• 《Webpack4.0各個擊破（9）karma篇》

  http://www.javashuo.com/article/p-oczyqbpw-kp.html

• 《Webpack4.0各個擊破（10）integration篇》

  http://www.javashuo.com/article/p-pcakkwqe-kr.html

三.webpack4.0進階話題

若是上面的內容中涉及的大多數知識你已經掌握，那麼下面的文章應該可以幫助你進一步提升。

• awesome-webpack

  這個項目裏蒐羅了很是多的webpack相關的優秀文章，從入門到源碼都有。在閱讀完筆者的《webpack4.0各個擊破》系列後，按照這個列表來查漏補缺就再好不過了。

• 【如何實現一個簡單的webpack】

  這個系列只寫了3篇，做者用造輪子的方法演示了webpack最基本的功能，建議有時間感興趣的同窗本身試試看，必定會有收穫。

• 【淺析webpack源碼系列】

  做者經過30多篇博文，按照webpack的執行週期，很是詳細地講述了webpack源碼中各個模塊的做用和基本原理，但願深刻研究webpack的讀者必定不要錯過。