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

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

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

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

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

Webpack 試圖通過提出一個大膽的想法來減輕開發(fā)者的負(fù)擔(dān)：如果有一部分開發(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ù)工作（當(dāng)然需要一些配置）。

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

第一部分：概念

Webpack 概述
入口起點(Entry Points)
輸出(Output)
加載器(Loaders)
插件(Plugins)
構(gòu)建目標(biāo)(Targets)
模塊(Modules)
模塊解析(Module Resolution)
模塊熱替換(Hot Module Replacement)
配置(Configuration)
依賴圖表(Dependency Graph)

第二部分：指南

安裝
起步
從 v1 遷移到 v2
Authoring Libraries
Shimming
Tree Shaking
Webpack 和 Typescript
處理兼容
代碼拆分 - CSS
代碼拆分 - 庫(Libraries)
代碼拆分 - 使用 require.ensure
代碼拆分(Code Splitting)
惰性加載 - React
改善構(gòu)建性能
公共路徑(Public Path)
管理依賴
緩存(Caching)
開發(fā)
開發(fā) - Vagrant
模塊熱替換 - React
生產(chǎn)環(huán)境構(gòu)建
整合 task/test （任務(wù)/測試）運行器
整合 task/test （任

第三部分：文檔

API
配置
加載器
插件
開發(fā)

相關(guān)搜索：Webpack 參考手冊