玩轉webpack-程柳鋒-極客時間-返現優惠

極客時間出品的《玩轉webpack》由程柳鋒所作，程柳鋒是騰訊高階工程師，IVWEB團隊社群和工程化負責人。本課全方位掌握webpack核心技能和優化策略。

訂閱價格：

用我的邀請購買，還會額外返現12元。購買連結：http://gk.link/a/103FR也可以掃描頁面最下方海報圖中的二維碼購買。

購買的朋友請加我微訊號 dismissmewp ，備註：返現。

已有2812人購買 · 共84講 · 84課時，約600分鐘，限時 ¥68原價 ¥99專欄為視訊課程，可以通過極客時間APP/小程式/網站學習。

課程背景

近幾年來，前端領域飛速發展，工作早已不再是切幾張圖，寫幾個頁面那麼簡單，而是需要前端開發者更加專注業務需求。webpack，就是這麼一款工具，將前端不斷出現的新模組、新資源、新需求，進行自動化整合、梳理、輸出，極大提高了我們的工作效率。

同時，webpack 憑藉著自身社群生態豐富，配置靈活和外掛化擴充套件，官方更新迭代速度快等優點，已成為前端構建領域裡最炙手可熱的構建工具。在 GitHub上，webpack 也擁有著 48.8k 的 star。
可是，不少前端人，對於 webpack 的使用和了解只停留在了 20% 的基礎功能上。每天開發寫 npm run dev，該上線了按 npm run build，執行個命令，webpack 就幫你打包好了。

很多人根本不知道，這整個過程究竟發生了什麼，導致之後出現問題，也無法對症下藥，無從下手。以下這些情景，你肯定或多或少都遇到過：

拿到一份用 vue-cli 和 create-react-app 生成的 webpack 配置，卻不知道它們的含義；

想要深入瞭解 webpack 內部原理，但發現看不懂 webpack 原始碼，也不知該從何下手；

在做專案構建時，遇到速度或體積的問題時，發現自己拿不出一套完善的優化思路；

在社群的外掛和 loader 不滿足實際專案時，卻無法自定義出一個定製化的外掛和 loader，來解決眼下的問題。

其實，掌握 webpack 是具有一定的學習曲線和成本的。如何理解 webpack “一切皆為模組”的打包理念？如何快速掌握 webpack 的構建配置？如何讓 webpack 成為升職加薪利器，而不是成為一名“ webpack 配置工程師”？

課程介紹

我是誰？我在前端開發方面有哪些經驗？

你好，我是程柳鋒。

目前我在騰訊擔任 IVWEB 團隊的社群和工程化負責人，也是前端工作流和規範工具 Feflow 的作者，這個貢獻也獲得了“騰訊 2018 年度十佳內部開源專案” 的獎項。

在騰訊工作期間，我先後參與了 NOW 直播、NOW 交友、群送禮、群視訊等直播類產品的前端開發工作。

目前負責約 40 人的 Web 前端團隊的工程效率建設，我曾經主導團隊將 Fis3 構建切換到 webpack4，這個過程中涉及到多頁面打包、SSR、PWA、Prerender 等多種構建場景，和多例項構建、並行壓縮、公共資源分包、Tree-Shaking、動態 Polyfill 等構建策略。這個經歷使我對 webpack 構建的打包速度和體積優化有了非常豐富的實戰經驗，同時也讓我對前端工作流和團隊開發規範實施有了深刻的認識。

為什麼要深入掌握 webpack ？

首先，這個和我們目前的應用場景和開發方式是息息相關的。最近十年，手機、移動平板和可穿戴裝置的迅速普及。Web 前端的開發觸角也從傳統的 PC 網頁的開發發展到多終端的開發，所以我們就需要同時兼顧 PC、H5 等各類不同解析度的網頁開發。因此，針對不同的應用場景做不同的打包就顯得很重要了，比如針對 PC 端的中後臺應用，我們需要支援單頁應用的打包構建。而 H5 頁面通常對效能和可訪問性有著極高的要求，因此需要通過構建來支援服務端渲染和 PWA 離線快取。

其次， Node.js 自 2009 年釋出以來，至今已歷時十年。這十年間，整個 Node.js 社群異常繁榮。迄今為止，已經有 80 多萬的第三方元件，並且這個數字每天還在快速增加。而 NPM 的元件在瀏覽器端的 JS 程式碼中並不能直接引入，這個時候就需要藉助 webpack 等構建工具來快速複用各種優秀成熟的元件，從而加速 Web 開發。

最後，當下前端社群裡最為流行的三大框架 React、Angular.js 和 Vue，它們的一些語法，比如 JSX 和 Vue 指令，這些都是瀏覽器無法直接解析的，也需要經過構建工具進行轉換，而 webpack 毫無疑問是前端構建領域裡最耀眼的一顆星。無論你前端走那條線，你都要有很強的 webpack 知識。熟悉 webpack 的使用和原理可以讓你拓寬前端技術棧，在發現頁面打包的速度和資源體積的問題時能夠知道如何排查問題和優化手段，同時，熟悉 webpack 的原理將會對其它跨端開發比如小程式、Weex、ReactNative、Electron 等框架的打包快速上手。

初學者在學習 webpack 的過程中會遇到哪些困難？

剛剛接觸 webpack 的開發者可能對 webpack 的打包理念：一切皆為模組感到困惑，在 webpack 中，不僅僅 JS 是模組，其它的 HTML、CSS、圖片和字型等都可以成為模組。

其次，webpack 的配置異常靈活，並且具備強大的外掛化擴充套件能力。因為這個原因，很多開發者都曾經自嘲“就缺一個 webpack 配置工程師了”。上手 webpack 確實是需要了解 webpack 裡面的眾多新的概念：entry，output，mode，loaders 和 plugins、熱更新、Code Spliting、Tree-Shaking 等，這個可能會讓初學者感到 webpack 很複雜，望而生畏，也造成一定的學習成本。

另外，webpack 的進一步深入學習是有一定的學習曲線的。包括 webpack 打包的速度、體積、頁面載入時的效能優化等，是需要具備比較全面的 webpack 專業知識，搞懂 webpack 內部的執行原理和外掛機制才能深入掌握。

因此本課程設計的時候遵循由淺入深的原則，內容方面共分為 4 個階段：基礎篇、進階篇、原理篇和實戰篇。基礎篇主要是幫你掌握 webpack 的核心概念和開發必備技巧，進階篇將會讓你以工程化的思維去編寫一份健壯可維護的 webpack 構建配置，同時掌握 webpack 構建速度和體積的優化策略，原理篇將會通過 webpack 原始碼讓你瞭解 webpack 內部的執行原理和編寫自定義 Loader 和外掛的能力，實戰篇將會從一個 Web 商城專案出發，講解 webpack 如何運用到實際的專案中去，並且最大化地提升開發階段和釋出階段的構建體驗。

本課程適用於前端開發者和跨端開發者的學習，能夠幫助初學者和開發者克服 webpack 學習的障礙，輕鬆掌握 webpack 的核心技能。學完後，你將會對 webpack 的知識體系有一個全面和深入的瞭解，並在工作中能夠高效的使用 webpack 去完成各類前端專案的打包構建工作。

玩轉webpack專欄作者

程柳鋒，騰訊高階工程師，負責 IVWEB 團隊的社群和工程化。同時，他還在空閒時間開發了「前端工作流和規範工具 Feflow」專案，獲得了“騰訊 2018 年度十佳內部開源專案” 獎項。

在騰訊，他曾主導團隊將 Fis3 構建切換到 webpack4，過程中涉及到多頁面打包、SSR、PWA、Prender 等多種構建場景，和多例項構建、並行壓縮、公共資源分包、tree shaking、動態 Polyfill 等構建策略。
這些經歷，使他對 webpack 構建的打包速度和體積優化有了非常豐富的實戰經驗，同時也對前端工作流和團隊開發規範實施有了深刻的認識。
工欲善其事，必先利其器。跟著學，保證你對 webpack 的掌握可以超過 80% 的前端人，進入一個全新的前端技術棧。

課程亮點

整個課程基於最新版 webpack 4 設計，遵循由淺入深的原則，將內容分為 4 個階段。

基礎篇：從最基礎的知識講起，由淺入深，教你掌握 webpack 的核心概念和開發必備技巧。

進階篇：帶你編寫 webpack 構建配置的同時，輕鬆掌握構建速度和體積的優化策略。

原理篇：抽絲剝繭，通過 webpack 原始碼，讓你瞭解 webpack 內部的執行原理的同時，也具備編寫自定義 loader和外掛的能力。

實戰篇：從一個 Web 商城專案出發，講解 webpack 如何運用到實際的專案中，並且最大化地提升開發階段和釋出階段的構建體驗。

無論你是對 webpack 一無所知的初學者，還是經驗豐富的前端工程師，都能夠通過這個課程，提升對 webpack 的理解，建立屬於你自己的 webpack 知識體系，並在工作中能夠高效的使用 webpack，完成各類前端專案的打包構建工作。

《玩轉webpack》專欄詳細目錄

第一章：wepack與構建發展簡史

1. 課程介紹
2. 內容綜述
3. 為什麼需要構建工具？
4. 前端構建演變之路
5. 為什麼選擇webpack ?
6. 初識 webpack
7. 環境搭建：安裝webpack
8. webpack初體驗：一個最簡單的例子
9. 通過 npm script 執行 webpack

第二章：webpack基礎用法

1. webpack核心概念之entry
2.  webpack核心概念之output
3.  webpack核心概念之loaders
4.  webpack核心概念之plugins
5.  webpack核心概念之mode
6.  解析 ES6 和 React JSX
7. 解析 CSS、Less 和 Sass
8. 解析圖片和字型
9.  webpack中的檔案監聽
10.  webpack中的熱更新及原理分析
11. 檔案指紋策路^：chunkhash、contenthash 和 hash
12.  HTML、CSS和JS程式碼壓縮

第三章：webpack進階用法

1. 自動清理構建目錄產物
2. PostCSS外掛autoprefixer自動補齊CSS3字首
3. 移動端CSS px自動轉換成rem
4. 靜態資源內聯
5. 多頁面應用打包通用方案
6. 使用 sourcemap
7. 提取頁面公共資源
8.  Tree Shaking的使用和原理分析
9.  Scope Hoisting的使用和原理分析
10. 程式碼分割和動態import
11. 在 webpack 中使用 ESLint
12. webpack實現SSR打包
13. Prerender■渲染骨架屏
14. webpack打包元件和基礎庫
15. 優化構建時命令列的顯示曰志
16. 構建異常和中斷處理

第四章：編寫可維護的webpack構建配置

1. 構建配置包設計
2. 功能模坱設計和目錄結構
3. 使用ESLint規範構建指令碼
4. 冒煙測試介紹和實際運用
5. 單元測試和測試覆蓋率
6. 持續整合和Travis CI
7. 釋出構建包到npm社群
8.  Git Commit 規範和 changelog 生成
9. 語義化版本（Semantic Versioning)規範格式

第五章：webpack構建速度和體積優化策略

1. 如何分析頁面打包問題？
2. 初級分析：使用webpack內建的stats
3. 速度分析：使用 speed-measure-webpack-plugin
4. 體積分析：使用 webpack-bundle-analyzer
5. 使用高版本的webpack和Node.js
6. 多程式/多例項枸建
7. 多程式並行壓縮程式碼
8. 使用exterals分離基礎包
9. 進一步分包：預編譯資源模組 充分利用快取提升二次構建速度
10. 縮小構建目標
11.  使用 Scope Hoisting
12. 使用Tree Shaking擦除無用的JS和CSS
13. 使用webpack進行圖片壓縮
14. 使用動態Polyfill服務

第六章：通過原始碼掌握webpack打包原理

1. webpack的本質與Tapable介紹
2.  Tapable中的Sync*型別的鉤子
3.  Tapable中的async*型別的鉤子
4.  webpack中的事件流
5.  compile 和 compilation 物件介紹
6.  webpack的入口檔案
7.  webpack引數傳遞與編譯啟動
8. 編譯與構建主流程
9. 生成最終assets
10. 通過emit輸出構建資源到path
11. 動手編寫一個簡易的webpack

第七章：編寫loader和外掛

1. loader的執行順序
2.  loader匹配檔案的可選方式
3. 寫一個自動合成雪碧圖的loader
4.  webpack Plugin AP丨介紹
5.  compiler物件介紹
6.  compilation物件介紹
7. 寫一個壓縮構建資源為zip包的外掛

第八章：React全家桶和webpack開發商城專案

1. 商城技術棧選型和整體架構
2. 商城介面ui設計與模組拆分
3.  React全家桶環境搭建
4. 編寫服務端API
5. 登入註冊頁模坱開發
6. 商城列表頁模坱開發
7. 商城詳情頁模坱開發
8. 商城訂單頁模坱開發
9.  webpack在開發和生產鈽境打包

課程收穫

快速掌握基礎技能和進階用法；

熟悉打包速度和體積優化策略；

深入原始碼瞭解打包構建原理；

編寫健壯易維護的 webpack 配置。

我的公眾號：猿人學 Python 上會分享更多心得體會，敬請關注。

***版權申明:若沒有特殊說明，文章皆是猿人學 yuanrenxue.com 原創，沒有猿人學授權，請勿以任何形式轉載。***