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

godbmw發表於2018-12-28

專案介紹

首先,沒有標題黨!這套教程確實是免費的,並且針對每節講解準備了對應的程式碼,程式碼環境是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.comyuanxin.me@gmail.com ,或者去對應的章節進行評論!!!

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

相關文章