Webpack JS 模块化原理

本贴最后更新于 1866 天前,其中的信息可能已经天翻地覆

最近一直在看一些和 JS 模块化发展历程的东西,正好呢,也想了解一下 Webpack 在我们背后帮我们做了那些事情,所以就有了今天的这篇文章。

首先我们自然需要搭建一个最简单的 Webpack 环境,我这里也上传到了 github

我们这里只建立一个最简单的模块依赖,只有两个文件

// index.js
import sayHello from './mod'

sayHello()
// mod.js
function sayHello() {
  console.log('Hello')
}

export default sayHello

接下来我们需要用 dev 模式来进行打包

webpack --mode development --config webpack.config.js

输出

接下来我们直接观察最终的输出来查看最终结果

由于代码量不小,我就讲一些解释写在注释之中。

// 这个一个非常巨大的IIFE 参数在这个函数的后面,由Webpack直接导出生成
;(function(modules) {
  var installedModules = {} // 该对象为模块缓存
  /**
   * @param {*} moduleId
   * 模块的key实际上在开发环境和生产环境是不同的 
   * 在生成环境中是一个数字id 而开发环境是一个字符串的key
   */
  function __webpack_require__(moduleId) {
    // 如果该模块已经导出过了 直接返回缓存
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports
    }
    // 建立一个基本模块 准备进行安装
    var module = (installedModules[moduleId] = {
      i: moduleId,
      l: false,
      exports: {}
    })
    
    // 每个模块都被封装成了一个函数
    // 这里就执行该函数 获取导出值
    // 请注意参数顺序
    // 这里可以思考一下 为什么当我们使用CommonJS模块导出的时候
    // module.exports = xx 有效 但直接 exports = xx无效
    // 原因其实就是因为 exports = xx只是给函数的实参重新赋值而已
    // 但module.exports是一个真正的外部应用 改变是有效的
    modules[moduleId].call(
      module.exports,
      module,
      module.exports,
      __webpack_require__
    )

    module.l = true
    // 一旦完成调用 该模块的导出值就会注射到module.exports上
    // 无论你在默认的exports上增加属性 还是直接改变module.exports的指向
    return module.exports
  }

  // 这里面都是一些工具函数 应该是提供给每个模块内部去使用

  __webpack_require__.m = modules

  __webpack_require__.c = installedModules
 
  // 这个工具函数用于ES Module导出多个模块的情况 实质上就是挂载为exports对象的属性
  __webpack_require__.d = function(exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, {
        enumerable: true,
        get: getter
      })
    }
  }
  __webpack_require__.r = function(exports) {
    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, {
        value: 'Module'
      })
    }
    Object.defineProperty(exports, '__esModule', { value: true })
  }
  __webpack_require__.t = function(value, mode) {
    if (mode & 1) value = __webpack_require__(value)
    if (mode & 8) return value
    if (mode & 4 && typeof value === 'object' && value && value.__esModule)
      return value
    var ns = Object.create(null)
    __webpack_require__.r(ns)
    Object.defineProperty(ns, 'default', {
      enumerable: true,
      value: value
    })
    if (mode & 2 && typeof value != 'string')
      for (var key in value)
        __webpack_require__.d(
          ns,
          key,
          function(key) {
            return value[key]
          }.bind(null, key)
        )
    return ns
  }

  __webpack_require__.n = function(module) {
    var getter =
      module && module.__esModule
        ? function getDefault() {
            return module['default']
          }
        : function getModuleExports() {
            return module
          }
    __webpack_require__.d(getter, 'a', getter)
    return getter
  }

  __webpack_require__.o = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property)
  }

  __webpack_require__.p = '' // Load entry module and return exports

  return __webpack_require__((__webpack_require__.s = './index.js'))
})({
  './index.js': function(module, __webpack_exports__, __webpack_require__) {
    'use strict'
    // 同样的 在开发模式和生产模式下 IIFE传入到参数也不同 开发模式为一个对象 而生成模式是一个数组
    // 可以看到 第一步其实就是使用工具函数,设定该模块是一个ESModule 
    // 如果是CommonJS模块的话,其实就不会帮你去改变参数的名字了,第二个参数就会是exports
    // ESModule 改参数名应该是为了避免冲突
    eval(
      '__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _mod_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./mod.js */ "./mod.js");\n\n\nObject(_mod_js__WEBPACK_IMPORTED_MODULE_0__["default"])()\n\n\n//# sourceURL=webpack:///./index.js?'
    )
  },

  './mod.js': function(module, __webpack_exports__, __webpack_require__) {
    'use strict'
    eval(
      '__webpack_require__.r(__webpack_exports__);\nfunction sayHello() {\n  console.log(\'Hello\')\n}\n\n/* harmony default export */ __webpack_exports__["default"] = (sayHello);\n\n\n//# sourceURL=webpack:///./mod.js?'
    )
  }
})

总结

  1. 整个 JS 的运行过程是一个大型的 IIFE,并在这个函数的尾部运行根 JS 模块(入口 JS 文件)
  2. 模块将会被封装进一个函数,并被传入该模块的上下文
  3. 一但需求某个模块 将会优先检查模块缓存,如果未装载,则触发模块函数,获取最终导出
  4. 对于 ES Module,他会转换成类似 CommonJS 的模块化规范
  5. webpack 的打包在不同环境下有很大的差异,如在开发环境下会利用 eval 来进行 sourceMap 的映射(当然这只是一种 sourceMap 的映射方式)
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 261 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    52 引用 • 40 回帖
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 627 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    727 引用 • 1322 回帖 • 22 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 6 关注
  • gRpc
    11 引用 • 9 回帖 • 52 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    8 引用 • 30 回帖 • 413 关注
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 4 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 475 关注
  • Unity

    Unity 是由 Unity Technologies 开发的一个让开发者可以轻松创建诸如 2D、3D 多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。

    25 引用 • 7 回帖 • 196 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 268 回帖 • 67 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 67 关注
  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 62 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    66 引用 • 114 回帖 • 247 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 534 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 141 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 368 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 651 关注
  • 创业

    你比 99% 的人都优秀么?

    83 引用 • 1399 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 130 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    406 引用 • 3569 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 4 关注