在学习完webpack编译后对于结果的一个浅析,下面自己简单实现一个编译结果。
总共有三个模块: a.js,b.js,以及入口模块index.js
a.js
var a = {
name: 'ahha',
age: 18
}
module.exports = a;`
b.js
const modeuleA = require('./a');
console.log('模块a', modeuleA);
var moduleB = {
name: 'xiaowang',
age: 20
}
module.exports = moduleB;
入口模块index.js
const b = require('./b');
console.log('模块b', b);
var c = {
name: 'xiaoli',
age: 22
}
console.log('模块c', c);
下面是自己实现的一个导出结果,详情请见注释
// 立即执行函数,调用及执行,不污染全局
(function (modules) {
var moduleExports = {
}; // 用来缓存模块的导出结果,不用下次再去得到模块缓存
// __webpack_require__函数相当于运行一个函数,得到模块的导出结果
function __webpack_require__(moduleId) {
if (moduleExports[moduleId]) {
// 检查是否有缓存
return moduleExports[moduleId]
}
var func = modules[moduleId]; // 拿到该模块的对应的函数
var module = {
exports: {
}
}
func(module, module.exports, __webpack_require__)