4. 编译结果分析

webpack编译以后的结果,就是一个普普通通的函数

手写编译函数

a.js

console.log('module a');
module.exports='a';

index.js

console.log('index module');
var a=require('./a')b 
conosle.log(a);

//合并两个模块
//  ./src/a.js
//  ./src/index.js
(function (modules) {
    var moduleExports = {}; //用于缓存模块的导出结果
    //require函数相当于是运行一个模块，得到模块导出结果
    function __webpack_require(moduleId) { //moduleId就是模块的路径
        if (moduleExports[moduleId]) {
            //检查是否有缓存
            return moduleExports[moduleId];
        }
        var func = modules[moduleId]; //得到该模块对应的函数
        var module = {
            exports: {}
        }
        func(module, module.exports, __webpack_require); //运行模块
        var result = module.exports; //得到模块导出的结果
        moduleExports[moduleId] = result; //缓存起来
        return result;
    }
    //执行入口模块
    return __webpack_require("./src/index.js"); //require函数相当于是运行一个模块，得到模块导出结果
})({ //该对象保存了所有的模块，以及模块对应的代码
    "./src/a.js": function (module, exports) {
        eval("console.log(\"module a\")\nmodule.exports = \"a\";\n //# sourceURL=webpack:///./src/a.js")
    },
    "./src/index.js": function (module, exports, __webpack_require) {
        eval("console.log(\"index module\")\nvar a = __webpack_require(\"./src/a.js\")\na.abc();\nconsole.log(a)\n //# sourceURL=webpack:///./src/index.js")
    }
});

为什么代码要放在eval里面?

• 因为浏览器里面运行的是合并后的代码,在如果代码报错,很难找到是那个模块出现了错误
• 浏览器支持``”console.log(\”module a\”)\nmodule.exports = \”a\”;\n //# sourceURL=webpack:///./src/a.js”```这样的调试语法,可以指定出现错误的模块地址

学习可以很轻松

• 重过程,轻目标
• 重大局,轻细节
• 重基础,轻上层
• 重实践,轻理论