webpack打包代码实现

webpack模块加载

(function (modules) {
  //1.定义对象用来缓存被加载过的模块
  let installedModules = {}
  //2.定义一个 _webpack_require_方法替换 import require 加载操作
  function __webpack_require__(moduleId) {
    //2-1 判断当前缓存中是否存在要被加载的模块内容，如果存在，直接返回
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports
    }
    //2-2 如果当前缓存中不存在则需要自己定义 {} 执行被导入模块内容加载
    let module = installedModules[moduleId] = {
      i: moduleId,//存放id
      l: false,//是否加载
      exports: {}
    }
    //2-3 调用当前moduleId对应的函数，完成内容的加载
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)

    //2-4 调用完成之后，修改l的值为true 标识当前模块内容加载完成
    module.l = true
    //2-5 加载完成 将拿回内容返回至调用位置
    return module.exports
  }
  //3.定义 m 属性保存modules
  __webpack_require__.m = modules
  //4.定义 c 属性保存cache
  __webpack_require__.c = installedModules
  //5.定义 o 方法用于判断对象的身上是否存在指定的属性
  __webpack_require__.o = function (object, property) {
    return Object.prototype.hasOwnProperty(object, property)
  }
  //6.定义d方法用于在对象的身上添加指定的属性，同时给该属性添加一个 getter
  __webpack_require__.d = function (exports, name, getter) {
    if (__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter })
    }
  }
  //7. 定义 r 方法标记当前模块是es6类型
  __webpack_require__.r = function (exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" })
    }
    Object.defineProperty(exports, '__esModule', { value: true })
  }
  //8 定义 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
  }
  //11 定义 t 方法，用于加载指定 value的模块内容 之后对内容进行处理再返回
  __webpack_require__.t = function (value, mode) {
    //加载value对应的模块内容 value一般为模块id
    //1 8 加载了可以直接返回的内容 commonJs规范
    if (mode & 1) {
      value = __webpack_require__(value); //记载后重新赋值给value
    }
    if (mode & 8) {
      return value
    }
    //esmodule规范
    if ((mode & 4) && typeof value === 'object' && value && value.__esModule) {
      return value;
    }

    //8与4都不成立 需要定义ns来通过 default 属性返回内容

    var ns = Object.create(null);
    __webpack_require__.r(ns);//标记esmodule

    Object.defineProperty(ns, 'default', { enumerable: true, value: value });
    if (mode & 2 && typeof value != 'string') {
      for (var key in value) {
        //如果为对象  遍历 给每一个属性添加一个getter方法
        __webpack_require__.d(ns, key, function (key) {
          return value[key];
        }.bind(null, key));
      }
    }
    return ns;
  };
  //9 定义 P 属性，用于i保存资源访问路径
  __webpack_require__.p = ""
  //10 调用 __webpack_require__ 方法执行模块导入与加载操作
  return __webpack_require__(__webpack_require__.s = "./src/index.js")

})
  ({
    "./src/main.js":
      (function (module, exports) {
        console.log('ssssssssss')
      })
  });

异步模块加载

• 通过 import()实现指定模块的懒加载操作
• 懒加载的核心原理就是创建jsonp 即动态创建script标签
• t方法针对内容进行不同的处理（处理方式取决于传入的数字 8 6 7 3 2 1）

webpack编译流程

• 配置初始化
• 内容编译
• 输出编译后内容
  时间驱动型事件流工作机制
  将不同的插件串联起来，完成所有工作
  核心 complier(负责编译) compilation(负责创建bundles)
  tapable 本身就是一个独立的库 在webpack大量使用
  tapable工作流程
• 实例化 hook 注册事件监听
• 通过 hook 触发事件监听
• 执行懒编译生成的可执行代码

Hook执行特点

• Hook:普通钩子，监听器之间互相独立不干扰
• BailHook: 熔断钩子，某个监听返回非 undefined 时后续不执行
• WaterfallHook: 瀑布钩子，上一个监听的返回值可传递至下一个
• LoopHook:循环钩子，如果当前未返回false 则一直执行

Hook本质是tapable实例对象，Hook执行机制可分为同步和异步
tapable库同步钩子

• SynckHook
• SyncBailHook
• SyncWaterfallHook
• SyncLoopHook
  tapable库异串行钩子
• AsyncSeriesHook
• AsyncSeriesBailHook
• AsyncSeriesWaterfallHook
  tapable库异并行钩子
• AsyncParalleHook
• AsyncParalleBailHook

const { SyncHook } = require('tapable')

let hook = new SyncHook(['name', 'age'])

hook.tap('one', function (name, age) {
  console.log('one--->', name, age)
})

hook.tap('two', function (name, age) {
  console.log('two--->', name, age)
})

hook.call('jay', 40)