打包原理

打包原理

webpack 打包原理，实际上就是，通过主文件 index.js确定依赖，将所有依赖的文件，通过路径找到文件，并将文件内容放入函数中执行，其中可能需要用到 module，exports，require。

所以需要自己实现一个 require 函数，来根据文件路径找到对应函数并运行，在通过自定义的 module 拿到导出结果，并返回。

(function (modules) {
  var moduleExports = {}; // 缓存状态
  function _require(moduleId) {
    if (moduleExports[moduleId]) return moduleExports[moduleId]; // 使用缓存
    var func = modules[moduleId];
    var module = {
      exports: {},
    };
    func.call(module.exports, module, module.exports, _require); // 运行依赖文件，获取导出结果。
    var result = module.exports;
    moduleExports[moduleId] = result; // 添加缓存
    return result;
  }
  _require("./a.js"); // 引入主文件 ，应该是 index.js
})({
  // 读取文件，将文件内容放到函数中。
  "./a.js": function (module, exports, require) {
    var b = require("./b.js");
    console.log(b);
    exports.nb = b + 1;
  },
  "./b.js": function (module, exports, require) {
    module.exports = {
      b: 1111,
    };
  },
});