a.js:

    2. console.log("module a")
    3. module.exports = "a";

    index.js:

    1. console.log("index module")
    2. var a = require("./a")
    3. a.abc();
    4. console.log(a)

    my-main.js:合并两个模块的编译结果分析

    1. //合并两个模块
    2. //  ./src/a.js
    3. //  ./src/index.js
    5. (function (modules) {
    6.     var moduleExports = {}; //用于缓存模块的导出结果
    8.     //require函数相当于是运行一个模块，得到模块导出结果
    9.     function __webpack_require(moduleId) { //moduleId就是模块的路径
    10.         if (moduleExports[moduleId]) {
    11.             //检查是否有缓存
    12.             return moduleExports[moduleId];
    13.         }
    15.         var func = modules[moduleId]; //得到该模块对应的函数
    16.         var module = {
    17.             exports: {}
    18.         }
    19.         func(module, module.exports, __webpack_require); //运行模块
    20.         var result = module.exports; //得到模块导出的结果
    21.         moduleExports[moduleId] = result; //缓存起来
    22.         return result;  //返回a.js的导出结果，用于index.js
    23.     }
    25.     //执行入口模块，容易理解的版本：require("./src/index.js")
    26.     return __webpack_require("./src/index.js"); //require函数相当于是运行一个模块，得到模块导出结果
    27. })({ //这块其实是防止全局变量污染，所以不写module
    28.     "./src/a.js": function (module, exports) {
    29.         eval("console.log(\"module a\")\nmodule.exports = \"a\";\n //# sourceURL=webpack:///./src/a.js")
    30.     },//为什么使用eval：容易调试。a.abc
    31.     "./src/index.js": function (module, exports, __webpack_require) {
    32.         eval("console.log(\"index module\")\nvar a = __webpack_require(\"./src/a.js\")\na.abc();\nconsole.log(a)\n //# sourceURL=webpack:///./src/index.js")
    34.     }
    35. });
    37. /**
    38.  * 容易理解的版本：
    39.  * var modules = {//该对象保存了所有的模块，以及模块对应的代码
    40.     "./src/a.js": function (module, exports) {
    41.         console.log("module a")
    42.         module.exports = "a";
    43.     },
    44.     "./src/index.js": function (module, exports, __webpack_require) {
    45.         console.log("index module")
    46.         var a = require("./a")
    47.         a.abc();
    48.         console.log(a)
    50.     }
    51. }
    52.  */

    abc.js:eval的理解

    1. var a = 1;
    2. var b = 2;
    3. var c = 3;
    4. eval("var d = null;\nd.abc();//# sourceURL=webpack:///./src/a.js")  // /n是换行，eval看不到其他代码的干扰
    5. ////# sourceURL=webpack:///./src/a.js   ：错误的时候提示，如下图：

    image.png
    有sourceURL=webpack:///./src/a.js
    image.png