Webpack是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。

webpack已經(jīng)是大部分前端項目打包工具的首選，grunt、glup、browserify等逐漸淪為輔助甚至完全被替代。在grunt、glup、browserify等已經(jīng)相當火了之后，webpack長江后浪推前浪，把前輩們拍死在沙灘上，實力驚人。

根據(jù)GitHub上的迭代發(fā)展看來，通過Issues、Release、Commit等看，webpack發(fā)展相當不錯，已經(jīng)有2.2版本，最大的更新應(yīng)該是支持ES6 Modules，根據(jù)ES6的特性來做一些Code Splitting等。

老式的任務(wù)運行器的方式：你的標記、樣式和 JavaScript 是分離的。你必須分別管理它們每一個，并且你需要確保每一樣都達到產(chǎn)品級

任務(wù)運行器(task runner)，例如 Gulp，可以處理許多不同的預(yù)處理器(preprocesser)和轉(zhuǎn)換器(transpiler)，但是在所有的情景下，它都需要一個輸入源并將其壓縮到一個編譯好的輸出文件中。然而，它是在每個部分的基礎(chǔ)上這樣做的，而沒有考慮到整個系統(tǒng)。這就造成了開發(fā)者的負擔：找到任務(wù)運行器所不能處理的地方，并找到適當?shù)姆绞綄⑺羞@些模塊在生產(chǎn)環(huán)境中聯(lián)合在一起。

Webpack 試圖通過提出一個大膽的想法來減輕開發(fā)者的負擔：如果有一部分開發(fā)過程可以自動處理依賴關(guān)系會怎樣？如果我們可以簡單地寫代碼，讓構(gòu)建過程最終只根據(jù)需求管理自己會怎樣？

Webpack 的方式：如果 Webpack 了解依賴關(guān)系，它會僅捆綁我們在生產(chǎn)環(huán)境中實際需要的部分

如果你過去幾年一直參與 web 社區(qū)，你已經(jīng)知道解決問題的首選方法：使用 JavaScript 來構(gòu)建。而且 Webpack 嘗試通過 JavaScript 傳遞依賴關(guān)系使得構(gòu)建過程更加容易。不過這個設(shè)計真正的亮點不是簡化代碼管理部分，而是管理層由 100% 有效的 JavaScript 實現(xiàn)（具有 Nodejs 特性）。Webpack 能夠讓你編寫有效的 JavaScript，更好更全面地了解系統(tǒng)。

換句話來說：你不需要為 Webpack 寫代碼。你只需要寫項目代碼。而且 Webpack 就會持續(xù)工作（當然需要一些配置）。

簡而言之，如果你曾經(jīng)遇到過以下任何一種情況：

載入有問題的依賴項
意外引入一些你不需要在生產(chǎn)中用上的 CSS 樣式表和 JS 庫，使項目膨脹
意外的兩次載入（或三次）庫
遇到作用域的問題 —— CSS 和 JavaScript 都會有
尋找一個讓你在 JavaScript 中使用 Node/Bower 模塊的構(gòu)建系統(tǒng)，要么就得依靠一個令人發(fā)狂的后端配置才能正確地使用這些模塊
需要優(yōu)化資產(chǎn)asset交付，但你擔心會弄壞一些東西
等等……

那么你可以從 Webpack 中收益了。它通過讓 JavaScript 輕松處理你的依賴關(guān)系和加載順序，而不是通過開發(fā)者的大腦。最好的部分是，Webpack 甚至可以純粹在服務(wù)器端運行，這意味著你還可以使用 Webpack 構(gòu)建漸進增強式網(wǎng)站