工程目录如下
    image.png
    index.js 的代码如下

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

    a.js的代码如下

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

    main.js 代码如下 下面代码我将其注释删除啦

    1. (() => {
    2.       // 将导入的模块保存在 __webpack_modules__ 下的属性中
    3.     var __webpack_modules__ = ({
    4.         "./src/a.js": // 属性名为引入路径
    5.             ((module) => {
    6.                 eval("console.log(\"module a\")\r\nmodule.exports = \"a\";\n\n//# sourceURL=webpack://analysis/./src/a.js?");
    7.             })
    8.     });
    10.     var __webpack_module_cache__ = {}; // 导入文件的缓存 
    11.     function __webpack_require__(moduleId) {
    12.         if (__webpack_module_cache__[moduleId]) {
    13.           //当导入的文件有缓存时 直接返回导出结果
    14.             return __webpack_module_cache__[moduleId].exports;
    15.         }
    16.           // 当导入的文件没有缓存时为其添加缓存
    17.         var module = __webpack_module_cache__[moduleId] = {
    18.             exports: {}
    19.         };
    20.           // 执行导入的文件
    21.         __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    22.         // 将其结果返回
    23.         return module.exports;
    24.     }
    25.         // 此时是入口文件的执行函数
    26.     (() => {
    27.         eval("console.log(\"index module\")\r\nvar a = __webpack_require__(/*! ./a */ \"./src/a.js\")\r\na.abc();\r\nconsole.log(a)\n\n//# sourceURL=webpack://analysis/./src/index.js?");
    28.     })();
    29. })()
    30.     ;

    当在index.js引入 jQuery
    image.png
    会发现main.js 中执行导入文件会添加使用call函数来执行 代码如下
    image.png
    简单的代码

    1. //合并两个模块
    2. //  ./src/a.js
    3. //  ./src/index.js
    4. (function (modules) {
    5.     var moduleExports = {}; //用于缓存模块的导出结果
    6.     //require函数相当于是运行一个模块，得到模块导出结果
    7.     function __webpack_require(moduleId) { //moduleId就是模块的路径
    8.         if (moduleExports[moduleId]) {
    9.             //检查是否有缓存
    10.             return moduleExports[moduleId];
    11.         }
    12.         var func = modules[moduleId]; //得到该模块对应的函数
    13.         var module = {
    14.             exports: {}
    15.         }
    16.         func(module, module.exports, __webpack_require); //运行模块
    17.         var result = module.exports; //得到模块导出的结果
    18.         moduleExports[moduleId] = result; //缓存起来
    19.         return result;
    20.     }
    21.     //执行入口模块
    22.     return __webpack_require("./src/index.js"); //require函数相当于是运行一个模块，得到模块导出结果
    23. })({ //该对象保存了所有的模块，以及模块对应的代码
    24.     "./src/a.js": function (module, exports) {
    25.         eval("console.log(\"module a\")\nmodule.exports = \"a\";\n //# sourceURL=webpack:///./src/a.js")
    26.     },
    27.     "./src/index.js": function (module, exports, __webpack_require) {
    28.         eval("console.log(\"index module\")\nvar a = __webpack_require(\"./src/a.js\")\na.abc();\nconsole.log(a)\n //# sourceURL=webpack:///./src/index.js")
    29.     }
    30. });

    为何使用eval来使用 eval里的代码会被浏览器解析为在一个另一个环境去执行的，故报错信息也是提示这个环境里的报错代码
    案例如下

    1. let a = 123;
    2. let b = 123;
    3. let c = 123;
    4. console.log(a.abc()) // 此处会报错

    直接运行的结果为
    下图为报错信息
    image.png
    单击进去查看后
    image.png
    当其为eval函数执行时

    1. let b = 123;
    2. let c = 123;
    3. eval("let a = 123; \n a.abc();") // 此处会报错

    报错信息
    image.png
    单击进去查看为
    image.png
    你会发现只有两行代码，其余代码均没有显示，这样能更好的排错