webpack打包之有依赖es2015模块

一、入口文件main.js

import { isDepend } from './depend.js';
import { fn } from './depend2.js';

if(isDepend){
    console.log('依赖模块1');
} else {
    console.log('没有依赖模块');
}

fn();

function mainFn(){
    console.log('这是主模块');
}

二、依赖模块depend.js

const isDepend = true;
export { isDepend }

三、依赖模块depend2.js

function fn() {
    console.log('依赖模块2');
}
export { fn }

四、出口文件bundle.js

1、浏览代码

2、本质

(function(modules) {
    //...
 })([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

var _depend = __webpack_require__(1);

var _depend2 = __webpack_require__(2);

if (_depend.isDepend) {
    console.log('依赖模块1');
} else {
    console.log('没有依赖模块');
}

(0, _depend2.fn)();

function mainFn() {
    console.log('这是主模块');
}

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var isDepend = true;
exports.isDepend = isDepend;

/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
function fn() {
    console.log('依赖模块2');
}
exports.fn = fn;

/***/ })
/******/ ])

五、总结

可以看到出口文件有调用__webpack_require__函数，webpack的作用得以发挥。