/******/ // getDefaultExport function for compatibility with non-harmony modules 解决ES module和Common js module的冲突，ES则返回module['default'] /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ };
为了避免跟非ES Modules冲突？冲突在哪里呢？
其实这部分如果你看到babel转换ES Modules源码就知道了，为了兼容模块，会把ES Modules直接挂在exports.default上，然后加上__esModule属性，引入的时候判断一次是否是转换模块，是则引入module['default']，不是则引入module
我们再多引入几个ES Modules看看效果
// src/es.js export function es() { console.log('ES Modules'); } export function esTwo() { console.log('ES Modules Two'); } export function esThree() { console.log('ES Modules Three'); } export function esFour() { console.log('ES Modules Four'); }
我们多引入esTwo和esFour，但是不使用esFour
// src/index.js import { es, esTwo, esFour} from './es.js'; console.log('hello world'); es(); esTwo();
得出
/******/ (function(modules) { // webpackBootstrap // ... /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__es_js__ = __webpack_require__(1); console.log('hello world'); Object(__WEBPACK_IMPORTED_MODULE_0__es_js__["a" /* es */])(); Object(__WEBPACK_IMPORTED_MODULE_0__es_js__["b" /* esTwo */])(); /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["a"] = es; /* harmony export (immutable) */ __webpack_exports__["b"] = esTwo; /* unused harmony export esThree */ /* unused harmony export esFour */ function es() { console.log('ES Modules'); } function esTwo() { console.log('ES Modules Two'); } function esThree() { console.log('ES Modules Three'); } function esFour() { console.log('ES Modules Four'); } /***/ }) /******/ ]);
嗯嗯其实跟前面是一样的，举出这个例子重点在哪里呢，有没有注意到注释中
/* unused harmony export esThree */ /* unused harmony export esFour */
esThree是我们没有引入的模块，esFour是我们引用但是没有使用的模块，webpack均对它们做了unused的标记，其实这个如果你使用了webpack插件uglify，通过标记，就会把esThree和esFour这两个未使用的代码消除（其实它就是tree-shaking)
AMD
我们再来看看webpack怎么支持AMD
新增src/amd.js
// src/amd.js define([ ],function(){ return { amd:function(){ console.log('AMD'); } }; });
修改index.js
// src/index.js define([ './amd.js' ],function(amdModule){ amdModule.amd(); });
得到
/******/ (function(modules) { // webpackBootstrap // ... 省略代码 /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(1) ], __WEBPACK_AMD_DEFINE_RESULT__ = function(amdModule){ amdModule.amd(); }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); /***/ }), /* 1 */ /***/ (function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ ], __WEBPACK_AMD_DEFINE_RESULT__ = function(){ return { amd:function(){ console.log('AMD'); } }; }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); /***/ }) /******/ ]);
先看amd.js整理一下代码
function(module, exports, __webpack_require__) { var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__; !( __WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function() { return { amd: function() { console.log('AMD'); } }; }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__) ); })
简单来讲收集define Array然后置入返回函数，根据参数获取依赖
apply对数组拆解成一个一个参数
再看index.js模块部分