?免費的漸進式教程：Webpack4的16篇講解和16份程式碼

專案介紹

首先，沒有標題黨！這套教程確實是免費的，並且針對每節講解準備了對應的程式碼，程式碼環境是webpack4。

課程以常見的webpack4用法為主線，按照從易到難的順序，逐步引導搭建，漸進式教程真香。

截至公元 2018 年 12 月 26 日，此套開源教程已經在 Github 上收穫了 189 Stars，下方是截圖 ?：

乾貨：16 節講解

教程地址: webpack4 系列教程

1. webpack4 系列教程: 前言: godbmw.com/passages/20…
2. webpack4 系列教程(一): 打包 JS : godbmw.com/passages/20…
3. webpack4 系列教程(二): 編譯 ES6 : godbmw.com/passages/20…
4. webpack4 系列教程(三): 多頁面解決方案--提取公共程式碼 : godbmw.com/passages/20…
5. webpack4 系列教程(四): 單頁面解決方案--程式碼分割和懶載入 : godbmw.com/passages/20…
6. webpack4 系列教程(五): 處理 CSS : godbmw.com/passages/20…
7. webpack4 系列教程(六): 處理 SCSS : godbmw.com/passages/20…
8. webpack4 系列教程(七): SCSS 提取和懶載入 : godbmw.com/passages/20…
9. webpack4 系列教程(八): JS Tree Shaking : godbmw.com/passages/20…
10. webpack4 系列教程(九): CSS Tree Shaking : godbmw.com/passages/20…
11. webpack4 系列教程(十): 圖片處理彙總 : godbmw.com/passages/20…
12. webpack4 系列教程(十一)：字型檔案處理 : godbmw.com/passages/20…
13. webpack4 系列教程(十二)：處理第三方 JavaScript 庫 : godbmw.com/passages/20…
14. webpack4 系列教程(十三)：自動生成 HTML 檔案 : godbmw.com/passages/20…
15. webpack4 系列教程(十四)：Clean Plugin and Watch Mode : godbmw.com/passages/20…
16. webpack4 系列教程(十五)：開發模式與 webpack-dev-server :godbmw.com/passages/20…
17. webpack4 系列教程(十六)：開發模式和生產模式·實戰 : godbmw.com/passages/20…

乾貨：16 個配套程式碼

GitHub 地址(程式碼): webpack-demos

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: ⭐ 生產模式和開發模式分離 ⭐

放在最後

說句實在話，webpack4其實完全靠文件，但是剛入手的時候還是有個簡易教程比較好。所以沒有必要用這種教程去收費（請忽略我）。

而由於完全是個人利用業餘時間整理和編寫的，加之水平有限，不足之處還請多多海涵。如果您發現錯誤，歡迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ，或者去對應的章節進行評論！！！

最後，軟廣一波：如果本教程和示例程式碼對您的工作、學習或者爬坑有幫助，歡迎 Star，蟹蟹 ٩('ω')و