前言
上篇文章我们聊了模块化的“发展史”，虽然有着诸多的模块化方案，但时至今日，依然没有官方的普及的浏览器支持，因此我们依然需要“模块构建”方案的辅助。
什么是模块构建（module bundling)?
字面意思，把多个模块（以及他们的依赖）按照正确的顺序写进一个文件。
为什么需要构建呢？
我们将项目拆分成多个模块，以多个文件的形式存储，如果不做任何处理，在 HTML 中引入这些文件，加载开销是庞大的。而“构建”可以将多个文件打包一个文件，减少文件的数量，也就减少了浏览器请求的开销。另外，构建的同时还可以去除一些无用的字符（空格，注释），也可以减小文件的体积。Gulp 和 Grunt 都是这类的“构建工具”。
构建（打包）的多种方式
我们知道浏览器并不原生“支持” CommonJS 和 AMD （ES6 模块化方案也只是草案阶段）等模块化体系，因此需要借助特殊的工具将你的模块转换成浏览器“认识”的代码。我们称之为模块加载器 -- module loader / module bundler，常见的有Browserify, RequireJS, Webpack...
Browserify 来打包 CommonJS
Browserrify 通过解析语法树（AST)，定位到require语法的调用处，计算得出整个项目的依赖关系图。然后按照正确的顺序，将模块打包进一个文件。最后你只需要在页面上引入一个bundle.js文件。
RequireJS 来打包 AMD
如果你使用 AMD 规范来组织模块，那你可以使用 RequireJS 使模块动态地加载。
Webpack
随着 Webpack 的出世，Browserify 和 RequireJS 逐渐退出历史舞台。Webpack 被设计成一种任何模块体系都适用的模块加载器。并且有诸多特性（code split, loader, plugin）使得它在现在工程化体系中独占鳌头。
ES6 Module
大家现在常用 ES6 模块，但为了使代码能在浏览器端能运行，我们还需要做些转换。首先使用 Babel 将 ES6 代码转换成 ES5 代码，可选择 Common JS, AMD, UMD 格式。然后用模块转换器将转换后的代码打包。
最后
随着语言的进化，或许早晚有一天我们会遇见万宗归一吧。
