webpack4 系列教程: 前言

1. 什麼是webpack?

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

因此，學習webpack能夠幫助開發者更好的進行基於javascript語言的開發工做。

2. 怎麼學習webpack?

若是一個新手不幸打開vue-cli中關於webpack的配置，亂起八糟的配置就像看天書同樣（我就是這樣）。

因此，學習的時候仍是要從基礎學起，首先應該學習經常使用的概念、插件的用法，最後，才能根據須要進行組合。

所以，這個系列教程先從JS、編譯ES6等方面講起，逐步延伸到CSS、SCSS等，再到多頁面、懶加載等技術，力求將知識點解構，而不是混淆在一塊兒。

3. 關於本課程

3.1 webpack版本

本課程不一樣於網上的v3版本，採用最新的webpack4。而且會記錄v3 -> v4升級過程當中的一些問題。

3.2 課程源碼

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

若是對您的學習、工做或者項目有幫助，歡迎幫忙 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 個文件夾（以後還會持續更新）。代碼和配置都在對應的文件夾下。

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: 生產模式和開發模式分離

4. 致謝

此教程是在我學習 mooc 網 四大維度解鎖 Webpack3.0 工具全技能 整理的代碼和v4.0版本的升級教訓。歡迎你們去學習。

歡迎技術交流，引用請註明出處。
我的網站：GodBMW.com
原文連接：webpack4 系列教程: 前言