webpack-demos：全網最貼心webpack系列教程和配套代碼

webpack-demos：全網最貼心 webpack 系列教程和配套代碼

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

放在開頭

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

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

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

項目背景

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

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

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

項目地址

• GitHub 地址(代碼): webpack-demos
• 講解地址(課程): webpack4 系列教程

課程目錄

1. webpack4 系列教程: 前言: https://godbmw.com/passage/29
2. webpack4 系列教程(一): 打包 JS : https://godbmw.com/passage/30
3. webpack4 系列教程(二): 編譯 ES6 : https://godbmw.com/passage/31
4. webpack4 系列教程(三): 多頁面解決方案--提取公共代碼 : https://godbmw.com/passage/32
5. webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載 : https://godbmw.com/passage/33
6. webpack4 系列教程(五): 處理 CSS : https://godbmw.com/passage/36
7. webpack4 系列教程(六): 處理 SCSS : https://godbmw.com/passage/37
8. webpack4 系列教程(七): SCSS 提取和懶加載 : https://godbmw.com/passage/44
9. webpack4 系列教程(八): JS Tree Shaking : https://godbmw.com/passage/48
10. webpack4 系列教程(九): CSS Tree Shaking : https://godbmw.com/passage/49
11. webpack4 系列教程(十): 圖片處理彙總 : https://godbmw.com/passage/53
12. webpack4 系列教程(十一)：字體文件處理 : https://godbmw.com/passage/67
13. webpack4 系列教程(十二)：處理第三方 JavaScript 庫 : https://godbmw.com/passage/68
14. webpack4 系列教程(十三)：自動生成 HTML 文件 : https://godbmw.com/passage/72
15. webpack4 系列教程(十四)：Clean Plugin and Watch Mode : https://godbmw.com/passage/73
16. webpack4 系列教程(十五)：開發模式與 webpack-dev-server :https://godbmw.com/passage/74
17. webpack4 系列教程(十六)：開發模式和生產模式·實戰 : https://godbmw.com/passage/75

代碼目錄

1. demo01: 打包JS
2. demo02: 編譯ES6
3. demo03: 多頁面解決方案--提取公共代碼
4. demo04: 單頁面解決方案--代碼分割和懶加載
5. demo05: 處理CSS
6. demo06: 處理Scss
7. demo07: 提取Scss (CSS等等)
8. demo08: JS Tree Shaking
9. demo09: CSS Tree Shaking
10. demo10: 圖片處理--識別, 壓縮, Base64編碼, 合成雪碧圖
11. demo11: 字體文件處理
12. demo12: 處理第三方JS庫
13. demo13: 生成Html文件
14. demo14: Watch Mode && Clean Plugin
15. demo15: 開發模式--webpack-dev-server
16. demo16: ⭐ 生產模式和開發模式分離 ⭐

關於作者

• GitHub: https://github.com/dongyuanxin
• 我的技術博客: godbmw.com
• Email：[email protected]