入门好文：http://zhaoda.net/webpack-handbook/

现状

在单页应用，每个视图通过异步的方式加载，这导致页面初始化和使用过程中会加载越来越多的js代码，这给前端开发和资源组织带来了巨大的挑战。

---

模块化系统的演进

<script>标签

最原始的js文件加载方式，如果把每个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，不同模块的接口调用都是一个作用域。

这种原始的加载方式暴露了一些显而易见的弊端：

全局作用域下容易造成变量冲突

偶要文件只能按照<script>的书写顺序进行加载

开发人员必须主观解决模块和代码库的依赖关系

在大型项目中各种资源难以管理，长期积累的问题导致代码库混乱不堪

CommonJS

服务器端的nodejs遵循commonjs规范，该规范的核心思想是允许模块通过require方法来同步加载所要依赖的其他模块，然后通过exports或module.exports来导出需要暴露的接口。

优点：

服务器端模块便于重用

npm中已经有将近20万个可以使用的模块包

简单并容易使用

缺点：

同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，浏览器资源是异步jia在的。

不能非阻塞的并行加载多个模块

AMD

规范其实只有一个主要接口，它在声明模块的时候指定所有的依赖，对于依赖的模块提前执行，依赖前置。

优点：

适合在浏览器环境中异步加载模块

可以并行加载多个模块

缺点：

提高了开发成本，代码的阅读和书写比较困难，模块定义方式的语义不顺畅

不符合通用的模块化思维方式，是一种妥协的实现

实现：requireJs

CMD

规范跟AMD很相似，尽量保持简单，并与CommonJS和nodejs的modules规范保持了很大的兼容性。

优点：

依赖就近，延迟执行

可以很容易在nodejs执行

缺点：

依赖SPM打包，模块的加载逻辑偏重

实现：sea.js

ES6模块

ES6标准增加了js语言层面的模块体系定义。ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。

优点：

容易进行静态分析

面相未来的ECMAScript标准

缺点：

原生浏览器端还没有实现该标准

全新的命令字，新版的nodejs才支持

实现：

Babel

---

CommonJS规范

CommonJS规范是为了解决js的作用域问题而定义的模块形式，可以使每个模块在他自身的命名空间中执行。该规范的主要内容是，模块必须通过module.exports导出对外的变量或接口，通过require()来导入其他模块的输出到当前模块作用域中。

// moduleA.js

module.exports =function(value){

    return value * 2;

}

// moduleB.js

var multiplyBy2 =require('./moduleA');

var result = multiplyBy2(4);

CommonJS是同步加载模块，但其实也有浏览器端的实现，其原理是现将所有模块都定义好并通过id索引，这样就可以方便的在浏览器环境中解析了。

更多关于CommonJS规范的内容请查看：

http://wiki.commonjs.org/wiki/CommonJS

---

AMD规范

ADM异步模块定义是为浏览器环境设计的，因为CommonJS模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。

AMD定义了一套js模块依赖异步加载标准，来解决同步加载的问题。

模块通过define函数定义在闭包中。

格式：

define(id?:String, dependencies?:String[], factory:Function|Object);

id是模块的名字，他是可选的参数。

dependencies制定了所要依赖的模块列表，它是一个数组，也是可选的参数，每个依赖的模块的输出将作为参数一次传入factory中。如果没有指定dependencies,那么他的默认值是["require", "exports", "module"]

define(function(require, exports, module){}）

factory是最后一个参数，它包裹了模块的具体实现，他是一个函数或者对象。如果是函数，那么他的返回值就是模块的输出接口或值。

用例：

定义一个名为myModule的模块，它依赖jQuery模块：

define('myModule', ['jquery'],function($){

    // $ 是 jquery 模块的输出

    $('body').text('hello world');

});

//使用

require(['myModule'],function(myModule){});

注意：在webpack中，模块名只有局部作用域，在require.js中模块名是全局作用域，可以在全局引用

定义一个没有id值的匿名模块，通常作为应用的启动函数：

define(['jquery'],function($){   

     $('body').text('hello world');

});

依赖多个模块的定义：

define(['jquery','./math.js'],function($, math){

// $ 和 math 一次传入 factory

    $('body').text('hello world');

});

模块输出：

define(['jquery'],function($){

    var HelloWorldize =function(selector){        

        $(selector).text('hello world');    

    };

    // HelloWorldize 是该模块输出的对外接口

    returnHelloWorldize;

});

在模块定义内部引用依赖：

define(function(require){

    var $ =require('jquery');    

    $('body').text('hello world');

});