一. 模块化乱炖

脚本合并是基于模块化标准的，javascript模块化是一个十分凌乱的话题，各种【MD】标准乱飞还要外加一堆【.js】的标准实现。现代化前端我的项目多基于框架进行开发，较为风行的框架外部根本曾经对立遵循ES6的模块化规范，只管反对度不一，但通过构建工具能够解决浏览器反对滞后的问题；基于nodejs的服务端我的项目原生反对CommonJs规范；而开发中引入的一些工具类的库，热门的工具类库为了能同时兼容浏览器和node环境，通常会应用UMD规范（Universal Module Definition） 来实现模块化，对UMD范式不理解的读者能够先浏览《javascript根底修炼(4)——UMD标准的代码推演》一文，甚至有些第三方库并没有遵循任何模块化计划。如果不借助构建工具，想要对各类计划实现兼容是非常复杂的。

二. webpack与模块化

webpack默认反对的是CommonJs标准，毕竟它是nodejs反对的模块治理形式，而没有node哪来的webpack。但同时为了扩大其应用场景，webpack在版本迭代中也退出了对ES harmony标准和AMD标准的兼容。

webpack如何辨认CommonJs模块

webpack打包后输入文件的根本构造是上面这个样子的：

(function(modules) { // webpackBootstrap    // 模块缓存对象    var installedModules = {};    // webpack外部的模块援用函数    function __webpack_require__(moduleId) {        // 加载入口JS        // 输入        return module.exports;    }    // 挂载模块数组    __webpack_require__.m = modules;    // ...    // 在__webpack_require__挂载多个属性    // 传入入口JS模块ID执行函数并输出模块    return __webpack_require__(__webpack_require__.s = 0);});// 蕴含所有模块的数组([    /* id为0 */    (function(module, exports) {        console.log('1')    })]);

简化当前实际上就是一个自执行函数:

(function(modules){    return __webpack_require__(0);}([Module0,Module1...]))

能够看到__webpack_reqruie__( )这个办法的参数就是模块的惟一ID标识，返回值就是module.exports，所以webpack对于CommonJs标准是原生反对的。

webpack如何辨认ES Harmony模块

对于ES Harmony标准不相熟的能够查看《ES6 Module语法》一文。

先应用import命令加载一个CommonJs标准导出的模块，查看打包后的代码能够看到模块援用的局部被转换成了上面这样：

__webpack_require__.r(__webpack_exports__);/* harmony import */ var _components_component10k_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./components/component10k.js");/* harmony import */var _components_component10k_js__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_components_component10k_js__WEBPACK_IMPORTED_MODULE_0__);

简化一下再来看：

__webpack_require__.r(__webpack_exports__);var a = __webpack_require__("./components/component10k.js");var b = __webpack_require__.n(a);

这里波及到两个工具函数:

这个办法是给模块的exports对象加上ES Harmony标准的标记，如果反对Symbol对象，则为exports对象的Symbol.toStringTag属性赋值Module,这样做的后果是exports对象在调用toString办法时会返回'Module'（笔者并没有查到这种写法的原因）;如果不反对Symbol对象，则将exports.__esModule赋值为true。

另一个工具函数是：

传入了一个模块，返回一个getter办法，此处是一个高阶函数的利用，实现的性能是当模块的__esModule属性为真时，返回一个getDefault( )办法，否则返回getModuleExports( )办法.

回过头再来看下面的简化代码：

// 增加ES Harmony标准模块标记__webpack_require__.r(__webpack_exports__);// a实际上失去了模块通过module.exports输入的对象var a = __webpack_require__("./components/component10k.js");// 依据a的模块化标准类型返回不同的getter函数，当getter函数执行时才会真正失去模块对象var b = __webpack_require__.n(a);
总结一下，webpack所做的解决相当于对模块减少了代理，如果被加载模块合乎ES Harmony标准，则返回module['default']，否则返回module。这里的module泛指模块输入的对象。

再应用import加载一个应用export语法输入的ES Harmony模块，查看打包后果中的模块文件能够看到:

//component10k.js模块文件在main.bundle.js中的内容__webpack_require__.r(__webpack_exports__);__webpack_exports__["default"] = (function(){    Array.from('component10k');})

能够看到输入的内容间接绑定到了输出模块的default属性上，因为这个模块被打上了__esModule的标记，所以援用它的模块会通过module['default']来取用其内容，也就正好命中了模块的输入内容。

webpack如何辨认AMD模块

咱们将component10k.js模块改为用AMD标准定义:

define(function(){    console.log('test');})

查看通过webpack打包后，这个模块变成了如下的样子：

var __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_RESULT__ = (function(){    console.log('test');}).call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));

简化一下：

var result;!(result=(function(){}).call(...),result!==undefined && module.exports = result);

形象一下：

var result;!(expression1,expression2 && expression3)

这里波及的javascript的基本知识较多，逗号表达式的优先级最低，所以最初参加运算，逗号表达式会从左到右顺次执行语句，并返回最初一个表达式的后果，&&为短路运算语法，即前一个条件成立时才计算前面的表达式，赋值语句执行完后会将所赋的值返回。此处外层的!(expression )语法起了什么作用，笔者也没看懂，心愿理解的读者多多指教。

所以，webpack对于AMD模块的解决，实际上是加了一层封装，将模块运行的后果挂载到了webpack模块的module.exports对象上。