Webpack JS 模块化原理

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

最近一直在看一些和 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 回帖 • 250 关注

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 164 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 36 关注
  • 阿里巴巴

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

    43 引用 • 221 回帖 • 58 关注
  • Hexo

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

    22 引用 • 148 回帖 • 14 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2388 回帖
  • Follow
    4 引用 • 12 回帖 • 10 关注
  • OneDrive
    2 引用 • 2 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用 • 1 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 4 关注
  • Visio
    1 引用 • 2 回帖 • 1 关注
  • 深度学习

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

    54 引用 • 44 回帖
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 108 关注
  • PostgreSQL

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

    22 引用 • 22 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 555 关注
  • Outlook
    1 引用 • 5 回帖 • 3 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 127 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 9 关注
  • 工具

    子曰:“工欲善其事,必先利其器。”

    298 引用 • 763 回帖
  • SQLite

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

    5 引用 • 7 回帖 • 7 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 200 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    118 引用 • 54 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 701 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 31 关注
  • 印象笔记
    3 引用 • 16 回帖 • 1 关注