# 基本概念

var webpackPath=require('path').resolve(__dirname,'node_modules', 'webpack-cli', 'bin', 'cli.js');
require(webpackPath);

const path=require('path');
module.exports={
    mode:"development",
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    }
}

seal(callback) {
const connectChunkAndModule = (chunk, module) => {
    if (module.addChunk(chunk)) {
        chunk.addModule(module);
    }
};

addChunk(chunk) {
        if (this._chunks.has(chunk)) return false;
        this._chunks.add(chunk);
        return true;
    }
    addModule(module) {
        if (!this._modules.has(module)) {
            this._modules.add(module);
            return true;
        }
        return false;
    }
}
this.createModuleAssets();
this.createChunkAssets();
    this.assets[file] = source;

a.js
/**
let a=1;
let b=2;
export function log(val) {
    console.log(val);
}
export default {
    a,
    b
}
app.js
import tt from './a'
import {log} from './a'
console.log(tt.b)
log(tt.b)

 */

(function (modules) { // 启动入口
  //模块缓存
  var installedModules = {};

  //require函数
  function __webpack_require__(moduleId) {

    // 检查模块是否在缓存中
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 创建一个模块并且放置到缓存中
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };

    // 执行模块函数
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

    // 设置模块为已经加载
    module.l = true;

    // 返回模块的导出对象
    return module.exports;
  }

  //为了导出对象定义getter函数
  __webpack_require__.d = function(exports, name, getter) {
    if(!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  //在导出对象上定义__esModule
  __webpack_require__.r = function(exports) {
    if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };

  //判断对象身上是否有自己这个属性
  __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

  //加载入口模块并且返回默认导出对象
  return __webpack_require__(__webpack_require__.s = "./src/app.js");
})
/************************************************************************/
({

"./src/a.js":
(function(module, __webpack_exports__, __webpack_require__) {
 eval(`
      __webpack_require__.r(__webpack_exports__);//表示这个一个es6 module
      //定义一个模块的getter
      __webpack_require__.d(__webpack_exports__, \"log\", function() { return log; });
      let a=1;//定义两个变量
      let b=2;
      function log(val) {
        console.log(val);
      }
      //默认导出对象{a,b}
      __webpack_exports__[\"default\"] = ({a,b});
     `);
  }),

  "./src/app.js":
  (function(module, __webpack_exports__, __webpack_require__) {
 eval(`
 __webpack_require__.r(__webpack_exports__);
 var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/a.js");
 console.log(_a__WEBPACK_IMPORTED_MODULE_0__["default"].b)
 _a__WEBPACK_IMPORTED_MODULE_0__["log"](_a__WEBPACK_IMPORTED_MODULE_0__[\"default\"].b)`);
  })
});

/**
app.js
let play=document.getElementById('play');
play.addEventListener('click',() => {
    import('./video.js').then(video => {
        let name=video.getName();
        console.log(name);
    });
});
lazy.js
export function getName() {
    return 'zxmf';
}
 */
(function (modules) { // 启动函数
  //安装一个JSONP回调函数,为了懒加载chunk,发出JSONP请求，回来后调用此回调函数
  function webpackJsonpCallback(data) {
    debugger;
    var chunkIds = data[0];//获取的ids
    var moreModules = data[1];//额外的模块对象

   //把额外的模块对象添加到模块对象中，然后把所有的chunkIds设置为已经加载，并且触发回调
     var moduleId,chunkId,i=0,resolves=[];
     //循环所有的chunkIds
    for(;i < chunkIds.length; i++) {
       chunkId=chunkIds[i];//模块id
       //如果是在等待成功，则添加到解决数组中
      if(installedChunks[chunkId]) {
        resolves.push(installedChunks[chunkId][0]);
      }
      installedChunks[chunkId] = 0;//设置为加载完成
     }
     //合并新模块到老的模块对象
    for(moduleId in moreModules) {
      if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
        modules[moduleId] = moreModules[moduleId];
      }
     }
     //就是也缓存在数组里一份数据
    if(parentJsonpFunction) parentJsonpFunction(data);
   //让promise从前往后都成功
    while(resolves.length) {
      resolves.shift()();
    }

  };

  // 模块缓存
  var installedModules = {};

 //对象用来加载和存放chunk,一个chunk可以包含多个模块，一个模块可以被多个模块包含
 //chunk=undefined  表示未加载
 //chunk=null  表示预加载/预获取
 //chunk=promise  表示加载中
 //chunk=0  表示加载完成
  var installedChunks = {
    "main": 0
  };

  //返回脚本路径函数
  function jsonpScriptSrc(chunkId) {
   //公开路径+chunkId+bundle.js后缀
    return __webpack_require__.p + "" + chunkId + ".bundle.js"
  }

  // require函数
  function __webpack_require__(moduleId) {
    //检查模块ID是否在缓存中
    if(installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
   //创建模块对象并且放置到缓存中
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    };

   //执行模块函数
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

   //把模块标记为已经加载
    module.l = true;

   //返回模块导出对象
    return module.exports;
  }

 //入口文件里只包含入口代码块,其它的代码块需要靠这个函数来加载
  __webpack_require__.e=function requireEnsure(chunkId) {
     //promise数组
    var promises = [];

    // JSONP chunk loading for javascript
   //先获取这个代码块的加载状态
    var installedChunkData = installedChunks[chunkId];
    if(installedChunkData !== 0) { //0意味着已经安装
      //一个promise标示正在加载，有值就是promise
      if(installedChunkData) {
        promises.push(installedChunkData[2]);
      } else {
         //在chunk缓存中开启promise installedChunkData=[resolve,reject,promise]
        var promise = new Promise(function(resolve, reject) {
          installedChunkData = installedChunks[chunkId] = [resolve, reject];
         });
       //把promise放进去
        promises.push(installedChunkData[2] = promise);

        // 开始加载代码块
        var head = document.getElementsByTagName('head')[0];//获取head
        var script = document.createElement('script');//创建脚本
        var onScriptComplete;//脚本加载完毕

        script.charset = 'utf-8';//字符编码
        script.timeout = 120;//超时时间
        if (__webpack_require__.nc) {//加入随机数保证安全
          script.setAttribute("nonce", __webpack_require__.nc);
        }
        script.src = jsonpScriptSrc(chunkId);//指定加载的连接地址

        onScriptComplete = function (event) {//脚本加载完成
          // 在IE下避免内存泄漏
          script.onerror = script.onload = null;
          clearTimeout(timeout);//如果回来的就清除定时器
          var chunk = installedChunks[chunkId];//取的对象
          if(chunk !== 0) {//如果还未加载
            if(chunk) {//如果有值
              var errorType = event && (event.type === 'load' ? 'missing' : event.type);
              var realSrc = event && event.target && event.target.src;
              var error = new Error('Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')');
              error.type = errorType;
              error.request = realSrc;
              chunk[1](error);//用错误对象让promise失败
            }
            installedChunks[chunkId] = undefined;//表示未加载
          }
        };
        var timeout = setTimeout(function(){
          onScriptComplete({ type: 'timeout', target: script });
         },120000);
       //加载正确什么都不干，加载不正确就报错
        script.onerror = script.onload = onScriptComplete;
        head.appendChild(script);
      }
     }
    //返回了一个promise
    return Promise.all(promises);
  };

  // expose the modules object (__webpack_modules__)
  __webpack_require__.m = modules;

  // expose the module cache
  __webpack_require__.c = installedModules;

  // define getter function for harmony exports
  __webpack_require__.d = function(exports, name, getter) {
    if(!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  // define __esModule on exports
  __webpack_require__.r = function(exports) {
    if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };

  // create a fake namespace object
  // mode & 1: value is a module id, require it
  // mode & 2: merge all properties of value into the ns
  // mode & 4: return value when already ns object
  // mode & 8|1: behave like require
  __webpack_require__.t = function(value, mode) {
    if(mode & 1) value = __webpack_require__(value);
    if(mode & 8) return value;
    if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
    var ns = Object.create(null);
    __webpack_require__.r(ns);
    Object.defineProperty(ns, 'default', { enumerable: true, value: value });
    if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
    return ns;
  };

  // getDefaultExport function for compatibility with non-harmony modules
  __webpack_require__.n = function(module) {
    var getter = module && module.__esModule ?
      function getDefault() { return module['default']; } :
      function getModuleExports() { return module; };
    __webpack_require__.d(getter, 'a', getter);
    return getter;
  };

  // Object.prototype.hasOwnProperty.call
  __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

  // __webpack_public_path__
  __webpack_require__.p = "";

  // on error function for async loading
  __webpack_require__.oe = function(err) { console.error(err); throw err; };
  //获取老的数组 或声明一个空数组,等懒加载的chunk回来后就会调用这个方法
  //挂载到全局是为了方便在其它文件中调用
  var jsonpArray=window["webpackJsonp"]=window["webpackJsonp"]||[];
  //绑定this指针
  var oldJsonpFunction=jsonpArray.push.bind(jsonpArray);
  //让它的push方法等于json回调,回调函数里面也会调用老的数组的push方法
  jsonpArray.push=webpackJsonpCallback;
  //再浅克隆一个数组,这个一般是用来防止并发的，只取老数组里的元素
  jsonpArray=jsonpArray.slice();
  //循环jsonArray,都传给webpackJsonpCallback,让回调都执行了
  for (var i=0;i<jsonpArray.length;i++) webpackJsonpCallback(jsonpArray[i]);
  //把加载到的数据赋给parentJsonpFunction
  var parentJsonpFunction = oldJsonpFunction;

  // Load entry module and return exports
  return __webpack_require__(__webpack_require__.s = "./src/app.js");
})
({

"./src/app.js":
(function(module, exports, __webpack_require__) {
eval(`let play = document.getElementById('play');\nplay.addEventListener('click',() => {\n\t__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./video.js */ \"./src/video.js\")).then(video => {\n\t\tlet name=video.getName();\n\t\tconsole.log(name);\n\t});\n});`);
})
});

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
 "./src/video.js":
 (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getName\", function() { return getName; });\nfunction getName() {\n\treturn 'zxmf';\n}\n\n//# sourceURL=webpack:///./src/video.js?");
 })
}]);