- 打包入口
import {message, methods} from './module01'
const sayHello = require('./module02')
function component() {
sayHello()
methods()
var element = document.createElement('div');
element.innerHTML = message
return element;
}
document.body.appendChild(component());
- 模块1
const message = 'hello world'
console.log('this is module01')
const methods = function(){
console.log('hello world')
}
export {message, methods}
- 模块2
const sayHello = () => {
console.log('hello world')
}
const sayBye = () => {
console.log('Bye Bye')
}
console.log('this is module02')
exports.sayHello = sayHello
exports.sayHello = sayBye
- 打包结果
打包结果是一个立即执行函数表达式
(function (modules) {
// 缓存所有模块”输出“的内容
var installedModules = {};
function __webpack_require__(moduleId) {
/*
*检查缓存中是否有该模块,如果有则返回该模块的export
*如果没有,则执行下面的步骤:运行该模块,并将模块的”输出“放置在缓存中
*/
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 创建一个新的模块
var module = installedModules[moduleId] = {
i: moduleId, // 模块的id
l: false, // 模块的”输出“是否加载到缓存中
exports: {} // 模块的”输出“
};
// 执行对应的模块,并将模块的”输出“绑定到module.exports上
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 修改是否加载的标识
module.l = true;
// 返回模块的”输出“
return module.exports;
}
// 所有的模块
__webpack_require__.m = modules;
// 所有被缓存的模块
__webpack_require__.c = installedModules;
// 定义一个getter方法
__webpack_require__.d = function (exports, name, getter) {
// 如果一个对象没有name对应的属性,则在该对象上定义该属性
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
//
__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;
};
// 定义一个方法:判断一个对象是否有某一属性
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
// __webpack_public_path__
__webpack_require__.p = "";
// 从第一个模块开始加载(执行)
return __webpack_require__(__webpack_require__.s = 0);
})// 匿名函数定义结束
([
/* 0:打包的起点,起始模块 */
(function (module, __webpack_exports__, __webpack_require__) {
// 由于该模块使用了ES6语法import,所以需要在“输出”的对象上定义 __esModule属性
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", {
value: true
});
/* 表明模块1是通过ES6语法来导入的 */
var __WEBPACK_IMPORTED_MODULE_0__module01__ = __webpack_require__(1);
// 表明模块2是通过CommonJS语法来导入的
const sayHello = __webpack_require__(2)
function component() {
sayHello()
// 调用模块1输出的b方法
Object(__WEBPACK_IMPORTED_MODULE_0__module01__["b"])()
var element = document.createElement('div');
// 使用模块1输出的a属性
element.innerHTML = __WEBPACK_IMPORTED_MODULE_0__module01__["a"]
return element;
}
document.body.appendChild(component());
/***/
}),
/* 1 */
(function (module, __webpack_exports__, __webpack_require__) {
// 当前模块是通过ES6语法来导入/输出模块的
"use strict";
/* 根据顺序,将当前模块输出定义在 __webpack_exports__上 */
__webpack_require__.d(__webpack_exports__, "a", function () {
return message;
});
/* harmony export (binding) */
__webpack_require__.d(__webpack_exports__, "b", function () {
return methods;
});
const message = 'hello world'
console.log('this is module01')
const methods = function () {
console.log('hello world')
}
}),
/* 2 */
(function (module, exports) {
const sayHello = () => {
console.log('hello world')
}
const sayBye = () => {
console.log('Bye Bye')
}
console.log('this is module02')
// 模块2是通过CommonJS的方式输出的,所以直接在exports上添加“输出”结果
exports.sayHello = sayHello
exports.sayHello = sayBye
/***/
})
]);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。