# webpack
> At its core, webpack is a static module bundler for modern JavaScript applications.
> 從本質上來講，webpack是一個現代的JavaScript應用的`**靜態模塊打包工具**`。
重點：模塊和打包
## 前端模塊化
在前面學習中，我已經用了大量的篇幅解釋了為什么前端需要模塊化。
而且我也提到了目前使用前端模塊化的一些方案：AMD、CMD、CommonJS、ES6。
在ES6之前，我們要想進行模塊化開發，就必須借助于其他的工具，讓我們可以進行模塊化開發。
并且在通過模塊化開發完成了項目后，還需要處理模塊間的各種依賴，并且將其進行整合打包。
\*\*而webpack其中一個核心就是讓我們可能進行模塊化開發，并且會幫助我們處理模塊間的依賴關系。
而且不僅僅是JavaScript文件，我們的CSS、圖片、json文件等等在webpack中都可以被當做模塊來使用（在后續我們會看到）。
這就是webpack中模塊化的概念。
\*\*
## 打包
就是將webpack中的各種資源模塊進行打包合并成一個或多個包(Bundle)。
供`瀏覽器`或者`node服務`去使用
**并且在打包的過程中，還可以對資源進行處理，比如壓縮圖片，將scss轉成css，將ES6語法轉成ES5語法，將TypeScript轉成JavaScript等等操作**。
但是打包的操作似乎grunt/gulp也可以幫助我們完成，它們有什么不同呢？
（后面介紹）
## 組件化和模塊化的區別
> Tips：大家可能也經常聽到組件化這個名詞，模塊化一般指的是可以被抽象封裝的最小/最優代碼集合，模塊化解決的是功能耦合問題；組件化則更像是模塊化進一步封裝，根據業務特點或者不同的場景封裝出具有一定功能特性的獨立整體；另外，前端提到組件化更多的是具有模板、樣式和 js 交互的 UI 組件。
## 工程化
當我們開發的 Web 應用越來越復雜的時候，會發現我們面臨的問題會逐漸增多：
1. 模塊多了，依賴管理怎么做；
2. 頁面復雜度提升之后，多頁面、多系統、多狀態怎么辦；
3. 團隊擴大之后，團隊合作怎么做；
4. 怎么解決多人研發中的性能、代碼風格等問題；
5. 權衡研發效率和產品迭代的問題。
這些問題就是軟件工程需要解決的問題。工程化的問題需要運用工程化工具來解決，得益于 Nodejs 的發展，前端這些年在工程化上取得了不俗的成績。前端工程化早期，是以 Grunt、Gulp 等構建工具為主的階段，這個階段解決的是重復任務的問題，它們將某些功能拆解成固定步驟的任務，然后編寫工具來解決，比如：圖片壓縮、地址添加 hash、替換等，都是固定套路的**重復你性工作**。
而現階段的 Webpack 則更像是從一套解決 JavaScript 模塊化依賴打包開始，利用強大的插件機制，逐漸解決前端資源依賴管理問題，依附社區力量逐漸進化成一套前端工程化解決方案。
## 什么是 webpack
> 本質上，Webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器（static module bundler）。在 Webpack 處理應用程序時，它會在內部創建一個依賴圖（dependency graph），用于映射到項目需要的每個模塊，然后將所有這些依賴生成到一個或多個 bundle。
像 Grunt、Gulp 這類構建工具，打包的思路是：`遍歷源文件`→`匹配規則`→`打包`，這個過程中**做不到按需加載**，即對于打包起來的資源，到底頁面用不用，打包過程中是不關心的。
webpack 跟其他構建工具本質上不同之處在于：**webpack 是從入口文件開始，經過模塊依賴加載、分析和打包三個流程完成項目的構建**。在加載、分析和打包的三個過程中，可以針對性的做一些解決方案，比如`code split`（拆分公共代碼等）。
當然，Webpack 還可以輕松的解決傳統構建工具解決的問題：
* 模塊化打包，一切皆模塊，JS 是模塊，CSS 等也是模塊；
* 語法糖轉換：比如 ES6 轉 ES5、TypeScript；
* 預處理器編譯：比如 Less、Sass 等；
* 項目優化：比如壓縮、CDN；
* 解決方案封裝：通過強大的 Loader 和插件機制，可以完成解決方案的封裝;
