基础webpack打包后的文件分析

两个文件,index.js,login.js,login导出变量,index.js引入,并使用,使用webpack打包

(function(modules){
  //定义对象缓存加载过的对象
  let installedModules = {};
  //定义函数,替换import,require加载操作,导出模块对应的exports
  function __webpack_require__(moduleId) {
    //判断当前缓存中是都存在要被加载,存在直接返回
    if(installedModules[moduleId]){
      return installedModules[moduleId].exports
    }
    //如果没有被缓存,就需要执行模块,获取exports
    let module=installedModules[moduleId]={
      i:moduleId,
      l:false,
      exports:{}
    }
    //调用当前模块id对应的函数
    modules[moduleId].call(module.exports,module,module.exports,__webpack_require__)
    //修改l属性为true,标识已经加载这个模块
    module.l=true
    //导出exports
    return module.exports
  }
  //定义m属性用来保存modules,挂载在上面的处理函数身上
  __webpack_require__.m=modules
  //定义c属性用来保存缓存
  __webpack_require__.c=installedModules
  //定义o方法用来判断对象的身上是否存在指定的属性
  __webpack_require__.o=function(obj,key){
    return Object.prototype.hasOwnProperty(obj,key)
  }
  //d方法,往对象身上添加指定的属性,并且给该属性提供getter
  __webpack_require__.d=function(exports,name,getter){
    if(!__webpack_require__.o(exports,name)){
      Object.defineProperty(exports,name,{enumerable:true,get:getter})
    }
  }
  //r方法,用于表示当前模块是es6类型,并添加对应的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})
  }
  //n方法,用于设置具体的getter
  __webpack_require__.n=function(module){
    let getter=module&&module.__esModule?
      function getDefault(){return module['default']}:
      function getModuleExports(){return module}

      __webpack_require__.d(getter,'a',getter)

      return getter
  }

  //定义p属性,用来保存配置文件中的public设置的值
  __webpack_require__.p=''
  //调用__webpack_require__方法执行模块的导入和加载
  return __webpack_require__(__webpack_require__.s='./src/index.js')
})
({
    "./src/index.js":
    (function(module, exports, __webpack_require__) {
      let name=__webpack_require__(/*! ./login */ "./src/login.js")
      console.log('index.js内容执行了')
      console.log(name);
    }),
    "./src/login.js":
    (function(module, exports) {
      //commomJs的导出
      module.exports='wsy'
      // export default 'wsy'
      // export const age=22
    })
    }
)

整体呢,就是一个IIFE,入参就是需要解析的模块