webpack4 系列教程: 前言

DevWiki 發布于2019-08-23 10:25 / 1997人閱讀

摘要：課程地址全部課程地址立即進入課程源碼目錄截至按照知識點，目錄分成了個文件夾之后還會持續更新。個人網站原文鏈接系列教程前言

本文檔已經過時，最近內容請看：https://godbmw.com/passage/76。一共16節課程和代碼。謝謝支持。

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/dongyuanxi...

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

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: Watch Mode && Clean Plugin

demo15: 開發模式--webpack-dev-server

demo16: 生產模式和開發模式分離

4. 致謝

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96317.html

webpack-demos：全網最貼心webpack系列教程和配套代碼

摘要：全網最貼心系列教程和配套代碼歡迎關注個人技術博客。所以我花費了個多月整理了這份教程，一共分成節，每節都有講解，并且準備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網最貼心 webpack 系列教程和配套代碼歡迎關注個人技術博客：godbmw.com。每周 1 篇原創技術分享！開源教程(webpack、設計模式）、面試刷題（偏前...

LMou 2019-08-23 12:25 評論0 收藏0
webpack4系列教程（八）：使用Eslint審查代碼

摘要：使用配置完成，如何使用呢在文件中添加一條代表需要解析的文件格式，最后接上文件路徑，由于我們的主要代碼都在目錄下，這里就配置文件夾。前言：本章內容，我們在項目中加入eslint配置，來審查校驗代碼，這樣能夠避免一些比較低級的錯誤。并且在團隊協作的時候，保持同一種風格和規范能提高代碼的可讀性，進而提高我們的工作效率。安裝： eslint-config-standard 是一種較為成熟...

Chiclaim 2019-08-23 14:44 評論0 收藏0
webpack4系列教程（十）：總結

摘要：傳送門系列教程一初識系列教程二創建項目，打包第一個文件系列教程三自動生成項目中的文件系列教程四處理項目中的資源文件一系列教程五處理項目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發環境和生產環境在前端開發日益復雜的今天，我們需要一個工具來幫助我們管理項目資源，打包、編譯、預處理、后處理等等。webpack的出現無疑是前端開發者的福音，我的博文只...

hqman 2019-08-26 13:29 評論0 收藏0
webpack4 系列教程(六): 處理SCSS

摘要：只需要在處理的配置上增加編譯的即可。了解更多處理的內容本節課源碼所有課程源碼教程所示圖片使用的是倉庫圖片，網速過慢的朋友請移步原文地址系列教程六處理。根據規則放在最后的首先被執行。這節課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。了解更多處理css的內容 >>> >>> 本節課源碼 >>> 所有課程源碼教程所示圖片使用的是...

馬龍駒 2019-08-23 11:33 評論0 收藏0
webpack4 系列教程(十六)：開發模式和生產模式·實戰

摘要：作者按這是系列最后一篇教程了。這篇文章在之前所有教程的基礎上，做了一個真正意義上的項目我花費了三個月整理了這份教程，并且完善了相關示例代碼，也更熟悉的理論和應用，當然，也感謝大家的支持。好了，感慨完畢，開始正題作者按:這是webpack4系列最后一篇教程了。這篇文章在之前所有教程的基礎上，做了一個真正意義上的 webpack 項目！我花費了三個月整理了這份教程，并且完善了相關示例代...

snifes 2019-08-23 12:27 評論0 收藏0