浅谈Webpack 是如何加载模块的

更新时间：2018年05月24日 09:46:56 作者：MockingBird

这篇文章主要介绍了Webpack 是如何加载模块的，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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 ，大体结构为（为了方便阅读，我删除了部分多余的代码）：

可以看到，最终生成的文件以 (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__() 的引用，用来导入其它模块。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

绘制微信小程序验证码功能的实例代码
这篇文章主要介绍了绘制微信小程序验证码功能的实例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
前台js改变Session的值(用ajax实现)
前台js改变Session的值,有很多的新手朋友对此问题会很陌生，本文将提供解决方法，需要了解的朋友可以参考下
2012-12-12
判断是否是IE6版本并给出提示升级浏览器
一个与浏览器有关的脚本，也是大家从事WEb前端编程常见的编程技巧，就是判断浏览器的版本，如果发现版本不符合你的设计要求，就给出提示升级浏览器，这样你的网页会更有体验。
2010-06-06
解决layui中table异步数据请求不支持自定义返回数据格式的问题
今天小编就为大家分享一篇解决layui中table异步数据请求不支持自定义返回数据格式的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
这篇文章主要介绍了Bootstrap简单实用的表单验证插件BootstrapValidator用法,结合实例形式详细分析了Bootstrap表单验证插件BootstrapValidator基本功能、原理、用法及操作注意事项,需要的朋友可以参考下
2020-03-03
TypeScript学习笔记之类型窄化篇
目前用TypeScript的人越来越多,尤其是一些大厂,大的项目,github上面很多开源项目也都是ts语法编译的,这篇文章主要给大家介绍了关于TypeScript学习笔记之类型窄化的相关资料,需要的朋友可以参考下
2021-09-09
js编写三级联动简单案例
这篇文章主要为大家分享了JavaScript编写三级联动简单案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Javascript中的this,bind和that使用实例
这篇文章主要介绍了Javascript中的this,bind和that使用实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12
配置Webpack SourceMap 实践教程
这篇文章主要介绍了如何配置Webpack SourceMap，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2024-03-03
JavaScript中数组双重去重的方法总结
这篇文章主要为大家学习介绍了JavaScript中数组双重去重的几个常用方法，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-07-07

浅谈Webpack 是如何加载模块的

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具