浅谈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 相关文章推荐
jquery tools之tooltip
Jul 25 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
Vue中 key keep-alive的实现原理
Sep 18 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
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
php中cookie的作用域
2008/03/27 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php实现session自定义会话处理器的方法
2015/01/27 PHP
php写app用的框架整理
2019/09/29 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
基于JQuery实现页面定时弹出广告
2020/05/08 jQuery
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
python实现解数独程序代码
2017/04/12 Python
详解用python实现简单的遗传算法
2018/01/02 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
新任教师自我鉴定
2014/02/24 职场文书
地理科学专业自荐信
2014/09/01 职场文书
返乡农民工证明
2015/06/24 职场文书
2019广播稿怎么写
2019/04/17 职场文书
超级实用!五步法则,教你写好年终工作总结
2019/12/05 职场文书