浅谈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点击弹出下拉菜单的小例子
Aug 01 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
详解Vue方法与事件
Mar 09 Javascript
基于vue2.0实现的级联选择器
Jun 09 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
Jan 19 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 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程序员工具
2008/05/26 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
Python异常处理总结
2014/08/15 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python装饰器用法实例分析
2019/01/14 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
护理毕业生自荐信范文
2013/12/22 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
员工加薪申请报告
2015/05/15 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏