課程亮點

• 從淺入深循序漸進，既可以當做手冊來看，又能學習到 Webpack 原理實現；
• 提供大量 Tips 技巧，Webpack 知識點面試再也不怕；
• 介紹周邊知識點，開闊眼界；
• 介紹作者真實項目的最佳實踐，可以直接在自己項目進行實踐。

課程介紹

前端工程正變得越來越復雜，模塊越來越多，用好的工具管理我們的前端工程必不可少，Webpack 就是其中的佼佼者，也是市面上的主流。這兩年 Webpack 的使用率直線上升，Vue、React、Angular 三大框架的腳手架工具都開始使用 Webpack 來做底層代碼的構建。

關于 Webpack 的內容幾乎是前端面試必問，筆試必考，工作必用的內容，甚至可以說，不會 Webpack，你連進大廠的資格都沒有。

因此很多同學在學 Webpack，但很多人都沒學好，甚至沒學會，對著官方文檔一頓 “啃”，掌握了概念，明白了一些，卻依然似懂非懂，不能靈活運用。如果你正是這樣，那你真的應該看看這個專欄。

我是 “三水清”，曾就職于新浪、騰訊等一線大廠，現在某一線大廠負責 “前端團隊中臺技術搭建和工程化建設”，在工作中直接帶領團隊成員使用 Webpack，對 Webpack 在面試中會問的，筆試中會考的，工作中會用的東西非常熟悉，另外，對 Webpack 的配置、使用中會遇到 “坑”，甚至 Webpack 內核原理也都有豐富的實踐經驗和研究。

這個專欄不僅是一個 Webpack 的學習專欄，有大量的 Tips，更是一個比官方文檔更實用，更貼合實際應用的 “Webpack 手冊”， 是一個你可以 “長期使用 “，“隨時可查” 的工具，工作中遇到的實際問題，你甚至能在專欄中找到直接或類似的配置方法、解決方案，因為這其中匯聚了我多年來的實踐經驗和具體實例！

不管你是前端小白還是想在團隊工程化建設中有所作的 leader，這個專欄都會對你有很大的幫助。

前端技術日新月異，要想跟的上技術潮流，就要不斷學習，而學習最好的方式是輸出。當我寫專欄時，我也是在總結和進步，我希望大家和我一起參與這個過程。
我會不定期補充新的內容，保持對 Webpack 的關注，有新的動向就會及時分享給你，讓這個專欄保持新鮮，讓專欄內容始終能夠適用。另，本專欄思考問題的方式和工程化思維也一定會讓你在編程思想上有所增益，不要忽視這些看不見的內功。

最后，給大家一個小彩蛋！專欄每小節末會針對本小節內容補加面試中容易被考到的高頻面試題。這樣你在學習時會更有針對性，面試時也會更從容，這個算是我送給大家的小驚喜吧！

專欄模塊

專欄共 37 講，分為三大部分和六大模塊。按照學習知識循序漸進和解決日常開發的環節來劃分為三個大部分，分別為：Webpack 開發配置、Webpack 內核原理和工程化實踐。

• Webpack 開發配置：我會從基礎概念、日常開發、上線優化三大模塊來講解；
• Webpack 內核原理：學習 Webpack 的原理實現才能夠讓我們得心應手的使用它；
• 工程化實踐：這個部分我會結合自己項目的實踐，介紹一些基于 Webpack 打造的前端工程化解決方案。

下面是六大模塊的詳細課程介紹：

入門篇

介紹 Webpack 的基本概念和解決的問題，從零搭建 Webpack 構建環境，帶領大家體驗 Webpack-CLI 的零配置打包，介紹 Webpack 的核心概念和基礎配置。

配置篇

從模塊化開發、Babel、React/Vue 配置、TypeScript 配置、CSS 樣式相關配置和靜態資源管理，到 Dev Server 環境配置，帶領大家搭建基礎開發環境。

優化篇

在優化篇，會針對生產環境的優化手段，從靜態資源體積、緩存管理和 Webpack 打包速度優化進行深入講解，并且對 Webpack 的代碼拆分（SplitChunk）和 Tree-Shaking 代碼級別的實踐講解。

原理篇

介紹 Webpack 的核心機制實現，學習 Webpack 的核心模塊 Tapable 的實現和用法，更加深入的理解 Webpack 的工作流程，理解 Webpack 的 Compiler 和 Compilation 兩個對象。

實戰篇

學習完 Webpack 的基礎知識和內核原理，和大家一起動手從工程化和項目實戰角度，通過解決項目中的實際問題，來體驗 Webpack 的強大功能。

總結篇

本章節內容偏總結和手冊功能，只要內容包括課程總結、講解 Webpack 5.0 的新技術和常用 Loader、Plugin 插件列表。