目前為止，webpack 在 GitHub 上已擁有 48.8k 的 star，在前端代碼打包器領域内，算得上是 時下最流行的前端打包工具。它可以分析各個模塊的依賴關系，最終打包成我們常見的靜态文件：.js 、 .css 、 .jpg 、.png，極大地提升了開發至發布過程的效率。

所以，不少人稱它為：模塊打包機

webpack 工作流程圖

可是，不少前端人，對于 webpack 的使用和了解隻停留在了 20% 的基礎功能上，一方面是因為大家覺得對 webpack “淺嘗辄止”即可，另一方面是因為 webpack 難上手：

1. 有着衆多新概念。 比如 entry、output、mode、loaders 和 Plugins、熱更新、Code Spliting、Tree-Shaking 等等，就能讓初學者望而生畏。

2. 過重的插件體系。 插件體系是 webpack 的核心，可以說，webpack 的生态就是建立在衆多插件之上的。但一個簡單的構建項目，可能就需要 14 個插件：7 個第三方插件 7 個 webpack 内置插件。按照平均一個插件含有 2-3 個配置項（這已經是往低了算了）來計算，14 個插件就有 30 多項配置。

不過，作為一個老前端人，我特别想囑咐大家一句：不管你是使用 React、Angular.js 還是 Vue，深入掌握 webpack 的使用及原理，收獲絕對會超過你的想象：

• 首先，webpack 可以極大提升你的工作效率，擴闊你的前端技術棧。
• 其次，webpack 十分有利于你去做跨端開發，比如小程序、Weex、React Native、Electron 等框架的打包。

而且，由于前端工程化越來越受重視，不少大廠在面試前端時，webpack 相關知識點是必考項。比如下面這些面試題，看看你能不能給出讓面試官滿意的回答。

• 有哪些常見的 loader？他們能解決什麼問題？
• webpack 的構建流程是什麼? 從讀取配置到輸出文件的整個過程
• 是否寫過 loader 和 Plugin ？描述一下編寫 loader 或 Plugin 的思路？
• webpack 的熱更新是如何做到的？說明其原理？
• 如何利用 webpack 來優化前端性能？（提高性能和體驗）

所以當極客時間的編輯找到我，想讓我開一門工具課時，我很樂意當一個貢獻者，把我對 webpack 的理解與運用分享出來。

我認為系統掌握 webpack，是有一定學習路線的。比如在掌握 webpack 打包的速度、體積，及頁面加載時的性能優化之前，你需要先搞懂 webpack 内部的運行原理和插件機制。這樣，你才能理解并徹底掌握後面的知識點。

于是，就有了極客時間新上線的視頻課程 《玩轉 webpack》，這門課是基于最新的 webpack 4 來設計，覆蓋 webpack 入門、配置、實戰、優化、原理等方方面面的内容。我會循序漸進地帶你從工程化角度，全方位掌握 webpack 的核心技能和優化策略。

無論你是對 webpack 一無所知的初學者，還是經驗豐富的前端工程師，都能夠通過這個課程，提升對 webpack 的理解，并在 Web 開發中更高效地運用 webpack。