浅谈Webpack 是如何加载模块的


Posted in Javascript onMay 24, 2018

Webpack 在前端开发中作为模块打包工具非常受开发者的青睐,丰富的 loader 使它可以实现各种各样的功能。本文将通过 webpack 来打包一个 js 文件,看看 webpack 是如何加载各个模块的。

两个简单的源文件

为了方便分析 webpack 加载模块的原理,我们准备了两个文件:

hello.js

const hello = {
 say: arg => {
  console.info('hello ' + arg || 'world');
 }
};

export default hello;

index.js

import Hello from './hello';

Hello.say('man');

index.js 作为入口文件,引用了 hello.js 模块。

Webpack 打包

在命令行执行 webpack index.js bundle.js 对入口文件进行打包,生成 bundle.js ,大体结构为(为了方便阅读,我删除了部分多余的代码):

浅谈Webpack 是如何加载模块的

可以看到,最终生成的文件以 (function (modules) {})([模块1, 模块2]) 的方式启动,我们定义的模块被包装成一个个匿名函数,然后以数组的形式传递个一个匿名函数 function (modules) {},在这个匿名函数中定义了一个 __webpack_require__() 函数,用来加载模块,最后,通过 return __webpack_require__(__webpack_require__.s = 0); 来加载第一个模块 index.js

__webpack_require__() 函数

该函数接收一个 moduleId 作为参数,这个参数就是各个模块在数组中的索引,

function __webpack_require__(moduleId) {
  /******/
  /******/ // Check if module is in cache
  /******/
  if (installedModules[moduleId]) {
   /******/
   return installedModules[moduleId].exports;
   /******/
  }
  /******/ // Create a new module (and put it into the cache)
  /******/
  var module = installedModules[moduleId] = {
   /******/
   i: moduleId,
   /******/
   l: false,
   /******/
   exports: {}
   /******/
  };
  /******/
  /******/ // Execute the module function
  /******/
  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  /******/
  /******/ // Flag the module as loaded
  /******/
  module.l = true;
  /******/
  /******/ // Return the exports of the module
  /******/
  return module.exports;
  /******/
 }

其中 installedModules 是用来缓存执行过的模块。通过 modules[moduleId].call() 来执行模块,最后返回模块的 exports。

模块接受的参数

以 hello.js 模块为例

(function (module, __webpack_exports__, __webpack_require__) {

  "use strict";
  const hello = {
   say: arg => {
    console.info('hello ' + arg || 'world');
   }
  };

  /* harmony default export */
  __webpack_exports__["a"] = (hello);

  /***/
 })

webpack 会向模块传递 module, __webpack_exports__, __webpack_require__ 三个参数,前两个是用来导出模块内的变量,第三个参数为前面介绍的 __webpack_require__() 的引用,用来导入其它模块。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
JS如何判断json是否为空
Jul 06 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
使用Javascript简单计算器
Nov 17 Javascript
解决VUE双向绑定失效的问题
Oct 29 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
处理JavaScript值为undefined的7个小技巧
Jul 28 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
详解javascript中的变量提升和函数提升
May 24 #Javascript
JavaScript轮播停留效果的实现思路
May 24 #Javascript
vue2单元测试环境搭建
May 24 #Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 #Javascript
vue组件name的作用小结
May 23 #Javascript
linux 后台运行node服务指令方法
May 23 #Javascript
You might like
关于PHP实现异步操作的研究
2013/02/03 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
Js中sort()方法的用法
2006/11/04 Javascript
Javascript typeof 用法
2008/12/28 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python根据时间获取周数代码实例
2019/09/30 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
python代码区分大小写吗
2020/06/17 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
2014年毕业演讲稿范文
2014/05/13 职场文书
促销活动总结模板
2014/07/01 职场文书
颐和园英文导游词
2015/01/30 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
2016年小学生清明节广播稿
2015/12/17 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫