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

1. 什么是webpack?

前端目前最主流的javascript打包工具，在它的幫助下，開發(fā)者可以輕松地實現(xiàn)加密代碼、多平臺兼容。而最重要的是，它為前端工程化提供了最好支持。vue、react等大型項目的腳手架都是利用 webpack 搭建。

所以，學(xué)習(xí)webpack可以幫助開發(fā)者更好的進行基于javascript語言的開發(fā)工作。

2. 怎么學(xué)習(xí)webpack?

如果一個新手不幸打開vue-cli中關(guān)于webpack的配置，亂起八糟的配置就像看天書一樣（我就是這樣）。

所以，學(xué)習(xí)的時候還是要從基礎(chǔ)學(xué)起，首先應(yīng)該學(xué)習(xí)常用的概念、插件的用法，最后，才能根據(jù)需要進行組合。

因此，這個系列教程先從JS、編譯ES6等方面講起，逐步延伸到CSS、SCSS等，再到多頁面、懶加載等技術(shù)，力求將知識點解構(gòu)，而不是混淆在一起。

3. 關(guān)于本課程

3.1 webpack版本

本課程不同于網(wǎng)上的v3版本，采用最新的webpack4。并且會記錄v3 -> v4升級過程中的一些問題。

3.2 課程源碼

如果你的自學(xué)能力很強，歡迎直接來看源碼。倉庫地址：https://github.com/dongyuanxin/webpack-demos

如果對您的學(xué)習(xí)、工作或者項目有幫助，歡迎幫忙 Star，更歡迎一起維護。

3.3 課程地址

全部課程地址: >>> 立即進入: https://godbmw.com/search?category=webpack4%20%E7%B3%BB%E5%88%97%E6%95%99%E7%A8%8B

3.4 課程源碼目錄 (截至 2018/7/27)

按照知識點，目錄分成了 16 個文件夾（之后還會持續(xù)更新）。代碼和配置都在對應(yīng)的文件夾下。

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: 開發(fā)模式--webpack-dev-server
16. demo16: 生產(chǎn)模式和開發(fā)模式分離

4. 致謝

此教程是在我學(xué)習(xí) mooc 網(wǎng) 四大維度解鎖 Webpack3.0 工具全技能 整理的代碼和v4.0版本的升級教訓(xùn)。歡迎大家去學(xué)習(xí)。

歡迎技術(shù)交流，引用請注明出處。
個人網(wǎng)站：GodBMW.com
原文鏈接：webpack4 系列教程: 前言