对webpack打包后的代码进行分析
打包前
src目录下
- index.js
console.log('hello world');
var a = require('./a.js');
console.log(a)
- a.js
var a = 1;
require('./b.js')
exports.c = 3;
console.log(a.log())
- b.js
console.log('b')
打包后
(function(){
// 把模块放到一个对象中
// 键名为路径
var webpack_modules = {
// 用eval是因为方便报错
// //# sourceURL=webpack://webpackstudy/./src/b.js? (这个是告诉浏览器报错的显示路径)
'./src/a.js':(module,exports,reuqire) => {
eval("var a = 1;\r\nreuqire(/*! ./b.js */ \"./src/b.js\")\r\nexports.c = 3;\r\nconsole.log(a.log())\n\n//# sourceURL=webpack://webpackstudy/./src/a.js?");
},
// 因为b没有依赖所以没有参数
'./src/b.js':() => {
eval("console.log('b')\n\n//# sourceURL=webpack://webpackstudy/./src/b.js?");
},
'./src/index.js':function(module,exports,reuqire){
eval("console.log('hello world');\r\nvar a = reuqire(/*! ./a.js */ \"./src/a.js\");\r\nconsole.log(a)\n\n//# sourceURL=webpack://webpackstudy/./src/index.js?");
}
}
// 缓存加载过的模块
var module_cache = {};
// 导入函数 moduleId为模块id
function reuqire(moduleId) {
// 如果加载过,把以前的值返回出来
var cachedModule = module_cache[moduleId];
if (cachedModule !== undefined) {
return cachedModule.exports;
}
// 没加载过生成一个对象
var module = module_cache[moduleId] = {
exports: {}
};
// 运行模块的函数
webpack_modules[moduleId](module,module.exports,reuqire);
// 最终的结果会保存到module对象中
return module.exports;
}
// 默认会加载src下的index.js
var __webpack_exports__ = reuqire("./src/index.js");
})()