前言：webapp 一般來說是一個單頁面應用，每一個視圖以異步的方式進行加載，頁面在加載的過程中會加載大量的js代碼，為了保證這些代碼在瀏覽器快速有序的的加載，需要我們使用模塊化系統(tǒng)
模塊系統(tǒng)的發(fā)展（隨便巴拉幾個）
1.CommonJS
服務器端的node.js遵循的就是CommonJS規(guī)范，改規(guī)范的核心思想就是允許模塊通過require方法來同步加載所依賴的其他模塊，然后通過exports或者module.exports來導出需要暴露的接口
優(yōu)缺點：便于重用，但是同步的模塊加載方式不適合在瀏覽器環(huán)境中，瀏覽器資源是異步加載的
實現(xiàn)：服務器端的Node.js，Browserify，瀏覽器端的 CommonJS 實現(xiàn)，可以使用 NPM 的模塊，但是編譯打包后的文件體積可能很大，modules-webmake，類似Browserify，還不如 Browserify 靈活，wreq，Browserify 的前身
2.AMD
Asynchronous Module Definition規(guī)范其實只有一個主要接口define(id?, dependencies?, factory)，它要在聲明模塊的時候指定所有的依賴dependencies，并且還要當做形參傳到factory中，對于依賴的模塊提前執(zhí)行，依賴前置。
define("module", ["dep1","dep2"],function(d1, d2){returnsomeExportedValue;});require(["module","../file"],function(module, file){/* ... */});
優(yōu)點：適合在瀏覽器環(huán)境中異步加載模塊，可以并行加載多個模塊
缺點：提高了開發(fā)成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢。不符合通用的模塊化思維方式，是一種妥協(xié)的實現(xiàn)
3.CMD
Common Module Definition規(guī)范和 AMD 很相似，盡量保持簡單，并與 CommonJS 和 Node.js 的 Modules 規(guī)范保持了很大的兼容性。
define(function(require, exports, module){var$ =require('jquery');varSpinning =require('./spinning');? exports.doSomething = ...module.exports = ...})
優(yōu)點：依賴就近，延遲執(zhí)行，可以很容易在 Node.js 中運行
缺點：依賴 SPM 打包，模塊的加載邏輯偏重
4.UMD
Universal Module Definition規(guī)范類似于兼容 CommonJS 和 AMD 的語法糖，是模塊定義的跨平臺解決方案。
5.ES6 模塊
ECMAScript6 標準增加了 JavaScript 語言層面的模塊體系定義。ES6 模塊的設計思想，是盡量的靜態(tài)化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。
import"jquery";exportfunctiondoStuff(){}module"localModule"{}
優(yōu)點：容易進行靜態(tài)分析，面向未來的 ECMAScript 標準
缺點：原生瀏覽器端還沒有實現(xiàn)該標準，全新的命令字，新版的 Node.js才支持
實現(xiàn)：
期望的模塊系統(tǒng)
我們期望可以兼容多種模塊風格，盡量可以利用自己已有的代碼，不僅僅只是javaScript模塊化，還有css、圖片、字體等資源也需要模塊化
前端模塊加載
前端模塊要在客戶端中執(zhí)行，所以他們需要增量加載到瀏覽器中。
模塊的加載和傳輸，我們首先能想到兩種極端的方式，一種是每個模塊文件都能單獨請求，另一種是把所有模塊打包成一個文件然后只請求一次，顯而易見，每個模塊都發(fā)起單獨的請求造成請求次數(shù)過多，導致應用啟動速度慢；一次請求加載所有的模塊導致流量浪費，初始化過程過慢。這兩種都不是好的解決方案，他們過于簡單粗暴?
分塊傳輸，按需進行懶加載，在實際用到某些模塊的時候再增量更新，才是較為合理的模塊加載方案。
要實現(xiàn)模塊的按需加載，就需要一個對整個代碼庫中的模塊進行靜態(tài)分析、編譯打包的過程。
所有資源都是模塊
在上面的分析過程中，我們提到的模塊僅僅是指JavaScript模塊文件。然而，在前端開發(fā)過程中還涉及到樣式、圖片、字體、HTML 模板等等眾多的資源。這些資源還會以各種方言的形式存在，比如 coffeescript、 less、 sass、眾多的模板庫、多語言系統(tǒng)（i18n）等等。
如果他們都可以視作模塊，并且都可以通過require的方式來加載，將帶來優(yōu)雅的開發(fā)體驗，比如：
require("./style.css");require("./style.less");require("./template.jade");require("./image.png");
那么如何做到讓require能加載各種資源呢？
靜態(tài)分析
在編譯的時候，要對整個代碼進行靜態(tài)分析，分析出各個模塊的類型和他們的依賴關系，然后將不同類型的模塊提交給適配的加載器來處理，比如一個用LESS寫的樣式模塊，可以先用LESS加載器將它轉成一個css模塊，在通過css模塊把他插入到頁面的同時，為了能利用已經存在的各種框架和已經寫好的文件，我們還需要一個模塊加載的兼容策略，來避免重寫所有的模塊
那么接下來，讓我們開始 Webpack 的神奇之旅吧。
標簽中執(zhí)行。Webpack 就是在這樣的需求中應運而生。
本文摘至：http://zhaoda.net/webpack-handbook/module-system.html
