webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼

專注前端與算法的系列干貨分享，歡迎關(guān)注(???)：
「微信公眾號(hào)：心譚博客」| xin-tan.com | GitHub

放在開頭

由于完全是博主利用業(yè)余時(shí)間編寫和整理的，所以有些地方難免有失偏頗，還請多多海涵。如果您發(fā)現(xiàn)錯(cuò)誤，歡迎致信 2181111110@qq.com 或 yuanxin.me@gmail.com ，我一定會(huì)在第一時(shí)間檢查和修復(fù)?。。?/p>

如果本教程和示例代碼對您的工作、學(xué)習(xí)或者爬坑有幫助，請動(dòng)動(dòng)您的小手，給個(gè) Star，讓更多的朋友了解并且參與進(jìn)來，蟹蟹 ?('ω')?

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

項(xiàng)目背景

上半年在做 web 項(xiàng)目的時(shí)候，在webpack上踩了很多坑。由于使用的是 webpack4，所以網(wǎng)上現(xiàn)成的教程并不多，而且大多數(shù)不成體系。還有很多教程，把很多知識(shí)點(diǎn)雜糅在一起進(jìn)行講解，對于新手來說真的很不友好。

所以我花費(fèi)了 3 個(gè)多月整理了這份教程，一共分成 16 節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。應(yīng)該說很貼心了吧哈哈哈。當(dāng)然，自己回查也很方便！

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

項(xiàng)目地址

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

課程目錄

1. webpack4 系列教程: 前言: https://godbmw.com/passages/2018-07-29-webpack-demos-introduction/
2. webpack4 系列教程(一): 打包 JS : https://godbmw.com/passages/2018-07-30-webpack-pack-js/
3. webpack4 系列教程(二): 編譯 ES6 : https://godbmw.com/passages/2018-07-31-webpack-compile-es6/
4. webpack4 系列教程(三): 多頁面解決方案--提取公共代碼 : https://godbmw.com/passages/2018-08-06-webpack-mutiple-pages/
5. webpack4 系列教程(四): 單頁面解決方案--代碼分割和懶加載 : https://godbmw.com/passages/2018-08-08-webpack-spa-split-lazy/
6. webpack4 系列教程(五): 處理 CSS : https://godbmw.com/passages/2018-08-17-webpack-css/
7. webpack4 系列教程(六): 處理 SCSS : https://godbmw.com/passages/2018-08-18-webpack-scss/
8. webpack4 系列教程(七): SCSS 提取和懶加載 : https://godbmw.com/passages/2018-08-28-webpack-scss-lazy/
9. webpack4 系列教程(八): JS Tree Shaking : https://godbmw.com/passages/2018-09-01-js-tree-shaking/
10. webpack4 系列教程(九): CSS Tree Shaking : https://godbmw.com/passages/2018-09-02-css-tree-shaking/
11. webpack4 系列教程(十): 圖片處理匯總 : https://godbmw.com/passages/2018-09-11-webpack-image/
12. webpack4 系列教程(十一)：字體文件處理 : https://godbmw.com/passages/2018-10-09-webpack-chracter-file/
13. webpack4 系列教程(十二)：處理第三方 JavaScript 庫 : https://godbmw.com/passages/2018-10-09-webpack-js-pacakge/
14. webpack4 系列教程(十三)：自動(dòng)生成 HTML 文件 : https://godbmw.com/passages/2018-10-17-automatic-html/
15. webpack4 系列教程(十四)：Clean Plugin and Watch Mode : https://godbmw.com/passages/2018-10-18-webpack-clean-and-watch-mode/
16. webpack4 系列教程(十五)：開發(fā)模式與 webpack-dev-server :https://godbmw.com/passages/2018-10-19-webpack-dev-server/
17. webpack4 系列教程(十六)：開發(fā)模式和生產(chǎn)模式·實(shí)戰(zhàn) : https://godbmw.com/passages/2018-10-19-webpack-dev-and-prod/

代碼目錄

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: 圖片處理--識(shí)別, 壓縮, Base64編碼, 合成雪碧圖
11. demo11: 字體文件處理
12. demo12: 處理第三方JS庫
13. demo13: 生成Html文件
14. demo14: Watch Mode && Clean Plugin
15. demo15: 開發(fā)模式--webpack-dev-server
16. demo16: ? 生產(chǎn)模式和開發(fā)模式分離 ?

關(guān)于作者

專注前端與算法的系列干貨分享，歡迎關(guān)注(???)

image