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

godbmw發表於2018-12-28
Web

專案介紹

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

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

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

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

乾貨：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，蟹蟹 ٩('ω')و

相關文章