webpack4 系列教程: 前言

godbmw發表於2018-07-27
Web

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 系列教程: 前言

相關文章