Webpack编译结果分析-526互联

编译结果分析

观察编译结果后，模拟打包模块

// 改对象中保存了所有的模块，以及模块对应的代码
var modules = 

((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;
  } 
  // 执行入口模块
  __webpack_require("./src/index.js") // require函数相当于是运行一个模块，得到模块导出结果。
  __webpack_require('./src/a.js');
  __webpack_require('./src/a.js');
  __webpack_require('./src/a.js');
})({ // 该对象保存了所有的模块，以及模块对应的代码
  "./src/a.js": function(module, __webpack_require) {
    eval("console.log(\"module a\")\nmodule.exports = \"a\";\n //# sourceURL=webpack:/// ./src/a.js"); 
    // console.log('module a')
    // module.exports = 'a'
  },
  "./src/index.js": function(module, exports, __webpack_require) {
    eval("console.log(\"index module\");\nvar a = __webpack_require('./src/a.js');console.log(a);\n //# sourceURL=webpack:/// ./src/index.js");
    // console.log("index module");
    // var a = __webpack_require('./src/a.js');
    // console.log(a);
  }
})

Webpack