1. 什麼是 ? 前端目前最主流的 打包工具，在它的幫助下，開發者可以輕鬆地實現加密代碼、多平臺相容。而最重要的是，它為 前端工程化 提供了最好支持。 、`react`等大型項目的腳手架都是利用 webpack 搭建。 所以，學習 可以幫助開發者更好的進行基於 語言的開發工作。 2. 怎麼學習 ? ...
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 課程地址
3.4 課程源碼目錄 (截至 2018/7/27)
按照知識點，目錄分成了 16 個文件夾（之後還會持續更新）。代碼和配置都在對應的文件夾下。
- demo01: 打包
JS - demo02: 編譯
ES6 - demo03: 多頁面解決方案--提取公共代碼
- demo04: 單頁面解決方案--代碼分割和懶載入
- demo05: 處理
CSS - demo06: 處理
Scss - demo07: 提取
Scss(CSS等等) - demo08: JS Tree Shaking
- demo09: CSS Tree Shaking
- demo10: 圖片處理--識別, 壓縮,
Base64編碼, 合成雪碧圖 - demo11: 字體文件處理
- demo12: 處理第三方
JS庫 - demo13: 生成
Html文件 - demo14:
WatchMode && Clean Plugin - demo15: 開發模式--
webpack-dev-server - demo16: 生產模式和開發模式分離
4. 致謝
此教程是在我學習 mooc 網 四大維度解鎖 Webpack3.0 工具全技能 整理的代碼和v4.0版本的升級教訓。歡迎大家去學習。
歡迎技術交流，引用請註明出處。
個人網站：Yuan Xin
原文鏈接：webpack4 系列教程: 前言
