1.bundle.js

  1. (function (modules) {
  2.   // webpack的启动函数
  3.   //模块的缓存
  4.   var installedModules = {};
  5.   function __webpack_require__(moduleId) {}
  6.     //加载入口模块并且返回导出对象
  7.   return __webpack_require__((__webpack_require__.s = "./src/index.js"));
  8. })({
  9.   "./src/index.js": function (module, exports, __webpack_require__) {
  10.     var title = __webpack_require__("./src/title.js");
  11.     console.log(title);
  12.   },
  13.   "./src/title.js": function (module, exports) {
  14.     module.exports = "title";
  15.   },
  16. });

2.webpack_require

  1.   //定义在浏览器中使用的require方法
  2.   function __webpack_require__(moduleId) {
  3.     //检查模块是否在缓存中
  4.     if (installedModules[moduleId]) {
  5.       return installedModules[moduleId].exports;
  6.     }
  7.     //创建一个新的模块并且放到模块的缓存中
  8.     var module = (installedModules[moduleId] = {
  9.       i: moduleId,
  10.       l: false,
  11.       exports: {},
  12.     });
  14.     //执行模块函数
  15.     modules[moduleId].call(
  16.       module.exports,
  17.       module,
  18.       module.exports,
  19.       __webpack_require__
  20.     );
  22.     //把模块设置为已经加载
  23.     module.l = true;
  25.     //返回模块的导出对象
  26.     return module.exports;
  27.   }

2.1webpack_require.m

2.2webpack_require.c

2.3webpack_require.d

2.4webpack_require.r

2.5webpack_require.n

2.6webpack_require.o

2.7webpack_require.p

3.兼容ESModule和COMMONJS

3.1commonJS加载commonJS

3.1commonJS加载ESModule

3.1ESModule加载commonJS

3.1ESModule加载ESModule

4.异步加载实现（重写push方法和JSONP载入）