Wow！全網最貼心的webpack4系列中文教程和配套程式碼 ?。網速過慢的朋友請移步《webpack4 系列教程 彙總》原文地址。更歡迎來我的小站看更多原創內容：godbmw.com，進行“姿勢”交流 ♪(∇*)

放在開頭

由於完全是博主利用業餘時間編寫和整理的，所以有些地方難免有失偏頗，還請多多海涵。如果您發現錯誤，歡迎致信 [email protected] 或 [email protected] ，我一定會在第一時間檢查和修復！！！

如果本教程和示例程式碼對您的工作、學習或者爬坑有幫助，請動動您的小手，給個 Star，讓更多的朋友瞭解並且參與進來，蟹蟹 ٩('ω')و

最後，歡迎轉載和引用，但請指明出處（github 倉庫或者部落格文章地址均可）。這套教程和程式碼確實花費了博主很多精力和時間！

專案背景

上半年在做 web 專案的時候，在webpack上踩了很多坑。由於使用的是 webpack4，所以網上現成的教程並不多，而且大多數不成體系。還有很多教程，把很多知識點雜糅在一起進行講解，對於新手來說真的很不友好。

所以我花費了 3 個多月整理了這份教程，一共分成 16 節，每節都有講解，並且準備了配套程式碼。應該說很貼心了吧哈哈哈。當然，自己回查也很方便！

本來想著做成掘金小冊，或者錄個視訊賺賺錢。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和原始碼。

專案地址

課程目錄

程式碼目錄

1. demo03: 多頁面解決方案--提取公共程式碼
2. demo04: 單頁面解決方案--程式碼分割和懶載入
3. demo07: 提取Scss (CSS等等)
4. demo08: JS Tree Shaking
5. demo09: CSS Tree Shaking
6. demo10: 圖片處理--識別, 壓縮, Base64編碼, 合成雪碧圖
7. demo12: 處理第三方JS庫
8. demo13: 生成Html檔案
9. demo14: Watch Mode && Clean Plugin
10. demo15: 開發模式--webpack-dev-server
11. demo16: ⭐ 生產模式和開發模式分離 ⭐

作者：godbmw 連結：https://www.jianshu.com/p/2f0c345bbc36 來源：簡書 簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。