/******/ (function(modules) { // webpackBootstrap //... 省略代码 /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports, __webpack_require__) { let cj = __webpack_require__(1); console.log('hello world'); cj(); /***/ }), /* 1 */ /***/ (function(module, exports) { function a() { console.log("CommonJS"); } module.exports = a; /***/ }) /******/ ]);
我们可以看到模块数组多了个引入的文件，然后index.js模块函数多了个参数__webpack_require__，去引用文件（__webpack_require__在上一节有介绍），整体上就是依赖的模块修改了module.exports，然后主模块执行依赖模块，获取exports即可
ES2015 import
新增src/es.js
// src/es.js export default function b() { console.log('ES Modules'); }
修改src/index.js
// src/index.js import es from './es.js'; console.log('hello world'); es(); webpack.config.js不变，执行webpack /******/ (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" /* default */])(); /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["a"] = b; function b() { console.log('ES Modules'); } /***/ }) /******/ ]);
我们可以看到它们都变成了严格模式，webpack自动采用的
表现其实跟CommonJS相似，也是传入export然后修改，在主模块再require进来，
我们可以看到这个
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
这个干嘛用的？其实就是标记当前的exports是es模块，还记得之前的__webpack_require__.n吗，我们再拿出来看看