加入收藏 | 设为首页 | 会员中心 | 我要投稿 惠州站长网 (https://www.0752zz.com.cn/)- 办公协同、云通信、物联设备、操作系统、高性能计算!
当前位置: 首页 > 建站 > 正文

浅谈 Webpack 背后的运行机制

发布时间:2019-08-16 14:43:35 所属栏目:建站 来源:Alan
导读:副标题#e# 在平时开发中我们经常会用到 Webpack这个时下最流行的前端打包工具。它打包开发代码,输出能在各种浏览器运行的代码,提升了开发至发布过程的效率。 我们知道一份 Webpack配置文件主要包含入口( entry)、输出文件( output)、模式、加载器( Loader

首先,加载函数使用了闭包变量 installedModules,用来将已加载过的模块保存在内存中。接着是初始化模块对象,并把它挂载到缓存里。然后是模块的执行过程,加载入口文件时 modules[moduleId] 其实就是 ./src/index.js 对应的模块函数。执行模块函数前传入了跟模块相关的几个实参,让模块可以导出内容,以及加载其他模块的导出。最后标识该模块加载完成,返回模块的导出内容。

根据 __webpack_require__ 的缓存和导出逻辑,我们得知在整个 IIFE 运行过程中,加载已缓存的模块时,都会直接返回 installedModules[moduleId].exports,换句话说,相同的模块只有在第一次引用的时候才会执行模块本身。

模块执行函数

__webpack_require__ 中通过 modules[moduleId].call() 运行了模块执行函数,下面我们就进入到 webpackBootstrap 的参数部分,看看模块的执行函数。

  1. /*** 入口模块 ./src/index.js ***/ 
  2. "./src/index.js": (function (module, __webpack_exports__, __webpack_require__) { 
  3. "use strict"; 
  4. // 用于区分 ES 模块和其他模块规范,不影响理解 demo,战略跳过。 
  5. __webpack_require__.r(__webpack_exports__); 
  6. /* harmony import */ 
  7. // 源模块代码中,`import {plus} from ./utils/math.js ;` 语句被 loader 解析转化。 
  8. // 加载 "./src/utils/math.js" 模块, 
  9. var _utils_math_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/utils/math.js"); 
  10. console.log( Hello webpack! ); 
  11. console.log( 1 + 2: , Object(_utils_math_js__WEBPACK_IMPORTED_MODULE_0__["plus"])(1, 2)); 
  12. }), 
  13.  
  14.  
  15. "./src/utils/math.js": (function (module, __webpack_exports__, __webpack_require__) { 
  16. "use strict"; 
  17. __webpack_require__.r(__webpack_exports__); 
  18. /* harmony export (binding) */ 
  19. // 源模块代码中,`export` 语句被 loader 解析转化。 
  20. __webpack_require__.d(__webpack_exports__, "plus", function () { 
  21. return plus; 
  22. }); 
  23. const plus = (a, b) => { 
  24. return a + b; 
  25. }; 
  26. }) 

(编辑:惠州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读