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

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

歡迎關注我的技術博客：godbmw.com。每週 1 篇原創技術分享！開源教程(webpack、設計模式）、面試刷題（偏前端）、知識整理（每週零碎），歡迎長期關注！

若是您也想進行知識整理 + 搭建功能完善/設計簡約/快速啓動的我的博客，請直接戳theme-bmw

放在開頭

因爲徹底是博主利用業餘時間編寫和整理的，因此有些地方不免有失偏頗，還請多多海涵。若是您發現錯誤，歡迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ，我必定會在第一時間檢查和修復！！！

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

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

項目背景

上半年在作 web 項目的時候，在webpack上踩了不少坑。因爲使用的是 webpack4，因此網上現成的教程並很少，並且大多數不成體系。還有不少教程，把不少知識點雜糅在一塊兒進行講解，對於新手來講真的很不友好。

因此我花費了 3 個多月整理了這份教程，一共分紅 16 節，每節都有講解，而且準備了配套代碼。*應該說很貼心了吧哈哈哈。*固然，本身回查也很方便！

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

項目地址

• GitHub 地址(代碼): webpack-demos
• 講解地址(課程): 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…

代碼目錄

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: github.com/dongyuanxin
• 個人技術博客: godbmw.com
• Email：2181111110@qq.com