第1章 【序章】關於這門課，你需要了解得都在這裡 試看3 節 | 5分鐘

前端工程化≠Webpack ，真正的前端工程化覆蓋一個專案從建立到開發到釋出的整個流程，既是目前大廠主流的專案提效方案，更是高薪面試 “必考項”！從本章開始，讓我們一起跟隨 Sam 老師，開啟“前端工程化”得升級之旅吧！...

收起列表

• 視訊：1-1 工程化≠webpack (04:06)試看
• 圖文：1-2 【預備知識】優雅學習課程，需要的知識儲備
• 圖文：1-3 【增值服務】面試指導

第2章 企業工程化場景分析&工程化核心技術講解 試看12 節 | 129分鐘

前端工程化是如何一步步發展到今天的？它在現階段開發中的起到了怎樣關鍵的影響和作用？本章將藉助前端工程化的發展歷史，帶大家重新認識前端工程化的應用場景、適用範圍和其中的關鍵技術，如：CommonJS、ESModule、npm、webpack等...

收起列表

• 視訊：2-1 【起航】階段概覽 (04:59)
• 視訊：2-2 前端工程化發展歷史 (15:06)
• 視訊：2-3 前端工程化的應用場景 (12:34)
• 視訊：2-4 前端工程化關鍵技術之模組化詳解（上） (13:15)試看
• 視訊：2-5 前端工程化關鍵技術之模組化詳解（中） (09:48)
• 視訊：2-6 前端工程化關鍵技術之模組化詳解（下） (06:31)
• 視訊：2-7 前端工程化關鍵技術之CommonJS規範詳解（上） (11:42)
• 視訊：2-8 前端工程化關鍵技術之CommonJS規範詳解（下） (16:44)
• 視訊：2-9 前端工程化關鍵技術之ESModule規範詳解（上） (07:18)
• 視訊：2-10 前端工程化關鍵技術之ESModule規範詳解（下） (14:07)
• 視訊：2-11 前端工程化關鍵技術之npm+webpack原理 (12:47)
• 視訊：2-12 ZBestPC工程化改造需求分析 (04:01)

第3章 【初探】原生前端專案工程化改造9 節 | 76分鐘

公司老舊原生專案需要改造，如何優雅應用工程化得思維排雷? 從本章開始，將與大家一起完成“原生js專案的工程化架構升級”得任務，通過該專案實戰，你將正式入門前端工程化，成為前端工程化開發領域的實踐者！在全面掌握和實踐工程化知識體系的同時，開發效率也將獲得顯著提升！工欲善其事必先利其器，讓我們先來認識一下...

收起列表

• 視訊：3-1 webpack核心概念入門 (04:34)
• 視訊：3-2 webpack快速入門+基礎程式碼演示 (12:55)
• 視訊：3-3 webpack source-map原理講解 (04:36)
• 視訊：3-4 通過webpack loader打包css檔案 (04:13)
• 視訊：3-5 css-loader打包檔案原始碼解析（上） (10:23)
• 視訊：3-6 css-loader打包檔案原始碼解析（下） (07:26)
• 視訊：3-7 建立屬於自己的檔案型別：自定義loader開發 (12:06)
• 視訊：3-8 webpack plugin入門+BannerPlugin原始碼解析 (12:43)
• 視訊：3-9 自定義webpack plugin實現自定義頁腳註釋 (06:26)

第4章 【原生js專案】專案原始碼分析+工程化改造流程分析4 節 | 17分鐘

知己知彼，才能百戰百勝！本章將帶你在認識專案原始碼的同時，梳理工程化改造的流程以及其中需要重點關注的問題，做好戰情分析，更加從容的迎擊！

收起列表

• 視訊：4-1 ZBestPC專案改造前原始碼分析 (07:00)
• 視訊：4-2 ZBestPC專案工程化存在的問題分析 (04:10)
• 視訊：4-3 工程化改造流程梳理和難點解析 (05:44)
• 圖文：4-4 【儲備】專案預備知識梳理

第5章 【前期準備】原生JS專案工程化架構改造5 節 | 39分鐘

本章將帶你完成原生JS專案工程化改造的第一步：從搭建專案框架、將html、js、css原生程式碼移植到專案中，到進行相應的webpack處理，以工程化的思維破圈。

收起列表

• 視訊：5-1 原生js專案整合webpack (04:48)
• 視訊：5-2 使用html-webpack-plugin實現自動注入bundle (08:09)
• 視訊：5-3 首頁css移植+webpack5圖片打包新特性詳解 (13:14)
• 視訊：5-4 首頁js移植+ProvidePlugin注入全域性變數 (05:46)
• 視訊：5-5 zbestpc專案登入頁面移植 (06:17)

第6章 【效能優化】原生JS專案工程化效能優化 試看9 節 | 65分鐘

本章將完成原生專案的進階升級，將囊括各種工程化的高階技巧，包括：js/css檔案分離、treeshaking原理和應用、splitChunk、ejs模板等等處理。理論和實踐都不放過，乾貨滿滿，不容錯過！

收起列表

• 視訊：6-1 專案優化進階之多js分離 (05:29)
• 視訊：6-2 專案開發模式配置+CopyWebpackPlugin自動拷貝配置 (09:31)
• 視訊：6-3 效能優化之從bundle剝離css資源 (06:03)
• 視訊：6-4 效能優化之js&css壓縮+treeshaking特性詳解 (11:48)試看
• 視訊：6-5 精化：詳細講解treeshaking的使用前提和觸發條件 (07:00)
• 視訊：6-6 劃重點：詳細講解splitChunkj特性 (16:10)
• 視訊：6-7 利用ejs實現公共程式碼複用 (06:26)
• 視訊：6-8 利用CleanWebpackPlugin清空dist目錄 (02:18)
• 圖文：6-9 【拓展】webpack常用優化手段

第7章 【加餐】原生JS專案Vue進階改造9 節 | 55分鐘

企業實際應用中，我們往往會應用MVVM框架進一步提升開發效率，本章我們將對原生專案使用Vue框架進行升級，還會同時實現Vue MPA、Vue SPA兩種執行模式，徹底帶大家搞懂如何將webpack模組化升級到Vue框架。

收起列表

• 視訊：7-1 webpack多配置檔案改造 (05:49)
• 視訊：7-2 完成Vue專案構建前的準備工作 (04:31)
• 視訊：7-3 編寫Vue專案構建配置檔案 (10:14)
• 視訊：7-4 首頁和登入頁面移植到Vue框架 (10:51)
• 視訊：7-5 Vue MPA應用移植和工程問題解決 (09:40)
• 視訊：7-6 Vue2升級Vue3原理講解+構建指令碼升級 (06:41)
• 視訊：7-7 Vue2升級Vue3原始碼改造 (06:20)
• 作業：7-8 【階段任務】專案進階升級改造
• 圖文：7-9 專案任務操作手冊

第8章 【進擊】大型專案工程化改造8 節 | 56分鐘

大型前端專案提出改造需求，什麼樣的工程化解決方案更實用？從本章開始，將與大家一起完成“Vue2-Vue3專案工程化架構升級”得任務，通過該專案實戰，你將擁有更廣闊的開發思路，在企業工程化架構升級中更快上手，成為前端工程化架構升級最優方案的提供者。在專案工程化改造準備環節，Sam老師將從升級需求和構建原始碼兩個角度...

收起列表

• 視訊：8-1 vue2-elm架構升級需求分析 (05:05)
• 視訊：8-2 vue2-elm專案啟動+構建命令分析 (08:06)
• 視訊：8-3 vue2-elm專案開發模式構建原始碼分析 (07:10)
• 視訊：8-4 深入理解開發模式下時為什麼要啟動express服務 (04:52)
• 視訊：8-5 http服務原理講解+express服務快速搭建 (09:16)
• 視訊：8-6 express核心概念middleware深入講解 (07:04)
• 視訊：8-7 express異常中介軟體和異常捕獲機制詳解 (06:10)
• 視訊：8-8 express https服務+靜態資源服務搭建實戰 (07:19)

第9章 【HMR原理解析】vue-cli核心原始碼解析6 節 | 57分鐘

理論實踐不分家。打好理論基礎，才能更好實戰開發。想要對vue2-elm進行完美的工程化架構升級，那你一定要知道這個核心中介軟體： devMiddleware。除了這個外掛外，本章還會對其他webpack外掛進行詳解，包括：HMR、vue-cli、hotMiddleware等。...

收起列表

• 視訊：9-1 核心中介軟體：webpack-dev-middleware例項化原始碼解析 (09:33)
• 視訊：9-2 devMiddleware中介軟體核心處理邏輯解析 (14:49)
• 視訊：9-3 深入講解HMR實現原理 (08:24)
• 視訊：9-4 hotMiddleware原始碼執行流程詳解 (10:56)
• 視訊：9-5 HMR客戶端實現原理詳解 (10:05)
• 視訊：9-6 vue-cli構建原始碼流程梳理 (03:10)

第10章 【Vue3框架升級】大型前端專案Vue2升級Vue3實戰9 節 | 52分鐘

你知道如何對vue2專案進行vue3升級嗎？你知道進行vue3升級時需要重點關注哪些內容嗎？比你高薪的同事可能早已掌握了這些，快跟隨課程行動起來吧！！本章內容將帶你實現vue2專案的vue3專案升級，全面擁抱vue3。

收起列表

• 視訊：10-1 為什麼要升級vue3——vue3與vue2對比 (07:36)
• 視訊：10-2 vue3升級流程分析+vue3依賴升級 (03:56)
• 視訊：10-3 vue2-elm專案啟動指令碼升級 (06:27)
• 視訊：10-4 專案vue3升級後編譯錯誤的解決 (05:35)
• 視訊：10-5 vue-router和vuex語法升級 (07:06)
• 視訊：10-6 介面升級+圖片連結升級 (04:51)
• 視訊：10-7 首頁vue3語法升級 (10:38)
• 視訊：10-8 vuex和vue-router移植要點解析 (03:47)
• 視訊：10-9 vue3.2 setup語法糖升級 (01:38)

第11章 【Webpack效能優化】大型前端專案工程化升級實戰9 節 | 75分鐘

大型前端專案工程龐大而複雜，因此，我們在對其進行效能優化的同時，更要深入理解其核心外掛的實現原理，才能真正掌握如何應用webpack更加從容優雅的進行效能優化。

收起列表

• 視訊：11-1 webpack效能優化原理和目標 (03:35)
• 視訊：11-2 深入分析構建速度測量外掛speed-measure-webpack-plugin (12:16)
• 視訊：11-3 深入分析構建體積檢測外掛webpack-bundle-analyzer (09:44)
• 視訊：11-4 構建效能優化之多程序thread-loader (09:04)
• 視訊：11-5 【精華】webpack5分包策略詳解 (10:23)
• 視訊：11-6 分包檔案拷貝和模板的自動引用 (09:28)
• 視訊：11-7 利用webpack5 cache特性大幅提升構建效能 (07:49)
• 視訊：11-8 image-webpack-loader實現圖片5倍壓縮 (07:04)
• 視訊：11-9 purgecss-webpack-plugin優化css體積 (05:21)

第12章 【Webpack5】前端構建工具Webpack5升級指南8 節 | 87分鐘

完成了專案的效能優化後，我們還要緊跟時代腳步，對專案進行webpack5的全面升級。包括升級原專案中webpack4語法，升級webpack-cli版本、module語法，還添加了css-minimizer-webpack-plugin外掛。webpack5升級是專案質變的關鍵要素之一

收起列表

• 視訊：12-1 webpack4和5構建結果對比 (12:43)
• 視訊：12-2 webpack4和5快取特性對比 (10:23)
• 視訊：12-3 webpack快取外掛hard-source-webpack-plugin (04:40)
• 視訊：12-4 webpack4和5構建結果對比 (12:09)
• 視訊：12-5 webpack5高階特性：URIs解析 (12:42)
• 視訊：12-6 webpack5高階特性：TreeShaking和SideEffects (10:08)
• 視訊：12-7 webpack5高階特性：模組聯邦 (17:03)
• 視訊：12-8 webpack5高階特性：PackageExports (06:18)

第13章 【通關】前端工程化腳手架設計16 節 | 121分鐘

大型前端團隊技術棧龐雜、技術體系不一致，如何統一團隊的工程體系、實現工程規範和標準對齊？從本章開始，將與大家一起完成“imooc-build 工程化腳手架開發”的任務，通過該專案實戰，你將能夠獨立完成對大型專案的前端工程化架構升級以及工程化腳手架的搭建，成為前端工程化架構升級的領導者。在正式啟動之前，讓我們先...

收起列表

• 視訊：13-1 為什麼需要前端工程化腳手架？ (10:31)
• 視訊：13-2 深入腳手架的實現原理 (10:55)
• 視訊：13-3 腳手架開發流程介紹 (06:06)
• 視訊：13-4 快速搭建腳手架和腳手架本地除錯方法 (04:20)
• 視訊：13-5 腳手架引數解析方法封裝1 (07:35)
• 視訊：13-6 imooc-ls腳手架遍歷檔案功能實現 (07:03)
• 視訊：13-7 imooc-ls支援查詢全部檔案和列表渲染模式 (05:04)
• 視訊：13-8 深入講解MacOS（含Linux）檔案許可權體系 (05:17)
• 視訊：13-9 解析MacOS（含Linux）檔案型別和許可權儲存原理 (08:00)
• 視訊：13-10 應用fs.Stat的mode屬性獲取檔案型別 (06:57)
• 視訊：13-11 使用與運算（&）獲取檔案許可權 (09:00)
• 視訊：13-12 應用id命令獲取使用者資訊 (08:52)
• 視訊：13-13 檔案容量和建立時間的獲取 (06:34)
• 視訊：13-14 資料夾下級檔案數量功能開發 (02:38)
• 視訊：13-15 腳手架自動化測試流程講解和指令碼開發 (10:42)
• 視訊：13-16 檔案型別+許可權自動化測試指令碼開發 (10:28)

第14章 【腳手架框架】前端工程化腳手架框架搭建14 節 | 121分鐘

在明確了工程化腳手架的實際應用場景後，我們更清楚了腳手架需要實現的功能。接下來，讓我們正式進入腳手架的開發搭建工作吧！

收起列表

• 視訊：14-1 為什麼要使用腳手架框架？ (05:13)
• 視訊：14-2 腳手架框架之框架搭建+引數解析1 (08:48)
• 視訊：14-3 腳手架框架之subcommand解析 (07:23)
• 視訊：14-4 commander框架幫助文件生成規則 (03:42)
• 視訊：14-5 commander options基礎特性解析 (13:04)
• 視訊：14-6 commander options高階特性解析 (10:18)
• 視訊：14-7 高能：利用Option物件建立腳手架屬性 (16:10)
• 視訊：14-8 自定義Option處理函式 (06:35)
• 視訊：14-9 高階特性：Option引數疊加處理1 (07:34)
• 視訊：14-10 Command基本用法解析 (08:14)
• 視訊：14-11 Argument高階用法解析 (05:33)
• 視訊：14-12 Commander action this用法+鉤子函式 (06:55)
• 視訊：14-13 腳手架框架搭建之Node版本校驗 (15:57)
• 視訊：14-14 腳手架框架搭建之命令註冊 (05:12)

第15章 【腳手架build模組】工程化腳手架build模組開發 11 節 | 119分鐘

腳手架需要實現的核心功能之一，即統一底層打包流程。這個功能需要我們開發build模組，本章就將帶領大家實現 build 命令的邏輯，完成build命令的實現及配置。

收起列表

• 視訊：15-1 Node檔案監聽chokidar庫詳解 (09:35)
• 視訊：15-2 chokidar實現原理和原始碼分析 (10:17)
• 視訊：15-3 通過chokidar實現config配置檔案監聽 (06:02)
• 視訊：15-4 劃重點：Node啟動子程序方法之execFile+exec (11:43)
• 視訊：15-5 劃重點：Node啟動子程序方法之spawn+fork (12:04)
• 視訊：15-6 子程序執行指令碼獲取預設埠號 (06:48)
• 視訊：15-7 Node實現埠號是否被佔用功能校驗 (06:33)
• 視訊：15-8 detect-port庫原始碼分析 (15:17)
• 視訊：15-9 Node內建庫net詳解 (15:01)
• 視訊：15-10 命令列互動實現方案inquirer詳解 (14:21)
• 視訊：15-11 實現配置檔案修改後服務自動重啟 (11:17)

第16章 【腳手架build模組】工程化腳手架dev模組開發

腳手架需要實現的另一個核心功能，即統一專案底層啟動命令。而在這個功能中，我們需要開發出dev模組。本章將帶領大家新增 start 命令並實現其邏輯。完成腳手架兩大核心功能的開發。

第17章 【腳手架外掛模組】工程化腳手架進階功能：外掛能力開發

乾貨不嫌多！帶大家開發完腳手架核心功能後，我們還未大家準備了腳手架開發的進階內容：外掛能力開發。無論需求怎麼提，你都能輕鬆穩住。

第18章 【加餐】常用工程化工具介紹

在實戰了三個工程化架構升級的大專案後，相信大家對實戰工程化架構升級一定充滿信心。為了讓大家更好的深入實戰，我們還提供了幾個常用工程化工具的介紹，如：gulp、rollup、eslint、husky、prettier等，全方位護航工程化架構升級實戰...

第19章 【加餐】webpack5原始碼解析

在專案中我們用到了那麼多webpack5技術，怎麼能沒有深度的原始碼解析呢？本章就將深度解析webpack實現原理和核心原始碼，徹底搞懂webpack5 實現原理。

第20章 【加餐】vue-loader原始碼解析

vue-loader代表了一個非常複雜的webpack loader，通過對vue-loader的深度解析，不僅可以講透loader的執行機制，同時其中的程式碼有很多可以借鑑之處

第21章 【加餐】vue-cli5原始碼解析

vue-cli5腳手架搭建執行是課程中非常具有難度的一環。為了讓大家更好的掌握vue-cli腳手架的實現原理，我們將深入探究vue-cli5原始碼，包括實現原理、執行流程原始碼，husky、lint-staged等內容的介紹和實現原理分析。想不徹底掌握vue-cli腳手架都難。...

資源共享微：cbq2393159