Webpack JS 模块化原理

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

最近一直在看一些和 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)、图片等都作为模块来使用和处理。

    42 引用 • 130 回帖 • 248 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 815 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 17 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    199 引用 • 543 回帖
  • Oracle

    Oracle(甲骨文)公司,全称甲骨文股份有限公司(甲骨文软件系统有限公司),是全球最大的企业级软件公司,总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年,甲骨文已超越 IBM,成为继 Microsoft 后全球第二大软件公司。

    107 引用 • 127 回帖 • 336 关注
  • 996
    13 引用 • 200 回帖 • 8 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Office

    Office 现已更名为 Microsoft 365. Microsoft 365 将高级 Office 应用(如 Word、Excel 和 PowerPoint)与 1 TB 的 OneDrive 云存储空间、高级安全性等结合在一起,可帮助你在任何设备上完成操作。

    5 引用 • 34 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 760 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 2 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 3 关注
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    89 引用 • 150 回帖 • 1 关注
  • WordPress

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

    67 引用 • 114 回帖 • 193 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 344 关注
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    52 引用 • 190 回帖
  • 星云链

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

    3 引用 • 16 回帖 • 1 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖 • 2 关注
  • Unity

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

    25 引用 • 7 回帖 • 122 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 38 关注
  • 持续集成

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

    15 引用 • 7 回帖 • 2 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 631 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    170 引用 • 315 回帖
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 4 关注
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖