模块化进程

webpack 模块化加载文件解析

 // 加载器runtime
  (function (modules: Array<Function>) {
    interface moduleType {
      exports:any,
      isLoad:Boolean,
      id:string
    }
    const installModules : {[key: string]: moduleType} = {};
    // 加载器
    const _webpack_require_ = function (moduleId:string) {
      // 已经加载直接返回
      if (installModules[moduleId]) {
        return installModules[moduleId].exports
      }
      // 初始化
      const module = installModules[moduleId] = {
        exports: {},
        isLoad: false,
        id: moduleId
      }
      // 加载文件
      modules[moduleId].call(module.exports, module, module.exports, _webpack_require_)
      module.isLoad = true
      
      //返回导出的对象
      return module.exports
    }

    // 加载唯一一个入口文件
    return _webpack_require_(0)
  }([
    // 依赖数组
    // 0
    function (module, exports, _webpack_require_) {
      const dependList = [_webpack_require_(1)]
      const result = (function (dependResult) {
        dependResult.aaa = 1
      }).call(exports, dependList)

      module.exports = result
    },
    // 1
    function () {

    }
  ]))

模块化的进程

1. 原始模式,加载器选择通过<script>标签加载，然后通过各种hack判断是否加载完成。
2. AMD => define({},function(dependList){}) // 依赖前置加载
3. 引入服务端commonjs规范 => CMD => require() // 依赖就近加载
   3)通用加载定义 Umd 兼容AMDHE CMD 优先AMD 其次CMD 最后挂在window上

js模块化是针对原始的script必须严格按照加载顺序加载,且在使用阶段的js必须在最后加载的一种解决方案