webpack构建结果分析

  • 生成一个自执行函数,并将所有的模块组装成数组传入该函数中,始终初始化入口指向的模板
(function(){})([module1, module2, module3])
  • 每一个模块用一个函数包裹
function(module, __webpack_exports__, __webpack_require__){
// module 当前模块对应的模块对象
// __webpack_exports__ 当前模块导出对象
// __webpack_require__ 加载模块,内部检测是否被加载过,加载过返回导出内容,否则初始化后导出内容
}
  • 每一个模块会初始执行一次,缓存到内存中,并保留引用
module = {
  i: '表示模块编号,即唯一表示'
  l: 'bool值,表示是否被初始化加载'
  export: '对象,当前模块导出的内容'
}
  • 动态import的导入会被解析成Promise.resolve().then(导入模块).then(紧跟着执行的代码)
  • chunk的引入是用过动态添加script标签引用解决的