webpack打包编译结果的原理分析

/**
 * 这是webpack打包的编译结果的原理，首先一个立即执行函数，这样使得调用js后立即执行
 */
(function (modules) {
    // 使用一个对象来缓存所有的模块，这样使的不会重复导入模块
    var storeResult = {};
    function __webpack_require(modulePath) {
        // 如果缓存里面导入过该模块，那么不需要在重新导入模块,返回改模块导出的结果
        if (storeResult[modulePath]) {
            return storeResult[modulePath];
        }
        // 获取执行的结果函数
        var func = modules[modulePath];
        var module = {
            exports: {}
        }
        // 执行函数获取结果
        func(module, module.exports, __webpack_require);
        var moduleResult = module.exports; // 获取模块导出的结果
        storeResult[modulePath] = moduleResult;
        return moduleResult;
    }

    // 运行'./src/index.js' 这个函数，所有使用一个函数来运行
    return __webpack_require('./src/index.js')
})({
    // 采用回调参数的形式传递所有的模块，所有的模块以路径作为key,value是一个函数，来执行所有模块里面的东西
    './src/index.js': function (module, exports, __webpack_require) {
        // var b = __webpack_require('./src/b.js')
        // console.log(b); 
        // 使用eval的作用是为了适应js的虚拟引擎，然后通过浏览器可以认识的锚点，来定位打包后错误的位置 //# sourceURL=webpack:///./src/index.js?
        eval(" var b = __webpack_require('./src/b.js');\n  console.log(b);//# sourceURL=webpack:///./src/index.js?")
    },
    './src/a.js': function (module, exports, __webpack_require) {
        // console.log("this is a module");
        // module.exports = "a";
        eval("console.log(\"this is a module\");\n module.exports = \"a\";//# sourceURL=webpack:///./src/a.js?")
    },
    './src/b.js': function (module, exports, __webpack_require) {
        // var a = __webpack_require("./src/a.js");
        // console.log("this is b module");
        // console.log(a);
        // module.exports = "b";
        eval("var a = __webpack_require(\"./src/a.js\");\nconsole.log(\"this is b module\");\nconsole.log(a);\n module.exports =\"b\";\n//# sourceURL=webpack:///./src/b.js?")
    }
})

模块化代码如下图：

结果和webpack得出的一样，如下: