前端模块化打包工具
“高内具，低耦合”
"Everything is a module"(万物皆模块)

1、什么是模块化

是一种将系统分离成独立功能部分的方法，严格定义模块接口、模块间具有透明性。

1.1、模块化历史

1.1.1、无模块化时代

• 全局变量泛滥；
• 命名冲突；
• 依赖关系管理。

//a.js
var a = function(){
  alert('a');
}
//b.js
var b = function(){
  a();
}
//index.html
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>

1.1.2、模块萌芽时代

• 使用立即执行函数（IIFE）

//实例1：
var moduleA = function(){
  var a, b;
  return {
    message: function(c){
      alert(a + b + c);
    }
  }
}();
//实例2：
(function(window){
  window.jQuery = window.$ = jQuery;
})(window);

1.1.3、现代模块时代

1.1.3.1、CommonJS

var math = require('math');
math.add(2, 3);//5

1.1.3.2、AMD(RequireJS)/CMD(SeaJS)

AMD是RequireJS在推广过程中对模块定义的规范化产出；
CMD是SeaJS在推广过程中对模块定义的规范化产出。
区别：

• 从依赖的模块，AMD是提前执行，CMD是延迟执行；
• 从依赖的位置，AMD推崇依赖前置，CMD推崇依赖就近。

//AMD：
define(['./a', './b'], function(a, b){
  //依赖必须在开始就书写
  a.doSomething();
  b.doSomething();
});
require(['math'], function(math){
  math.add(2, 3);
});

//CMD：
define(function(require, exports, module){
  var a  = require('./a');//依赖就近书写
  a.doSomething();
  var b = require('./b');//依赖就近书写
  b.doSomething();
});

1.1.3.3、ES6(Module)

import math from 'math';
math.add(2, 3);//5

2、为什么使用WebPack