AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

深入了解 webpack 模块加载原理（下）

2023-08-17 106
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 深入了解 webpack 模块加载原理（下）

__webpack_require__.d()

// define getter function for harmony exports
__webpack_require__.d = function(exports, name, getter) {
    if(!__webpack_require__.o(exports, name)) {
        Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
};

原来 __webpack_require__.d() 是给 __webpack_exports__ 定义导出变量用的。例如下面这行代码：

__webpack_require__.d(__webpack_exports__, "default", function() { return test2; });

它的作用相当于 __webpack_exports__["default"] = test2。这个 "default" 是因为你使用 export default 来导出函数，如果这样导出函数：

export function test2() {}

它就会变成 __webpack_require__.d(__webpack_exports__, "test2", function() { return test2; });

__webpack_require__.r()

// define __esModule on exports
__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__.r() 函数的作用是给 __webpack_exports__ 添加一个 __esModule 为 true 的属性，表示这是一个 ES6 module。

添加这个属性有什么用呢?

主要是为了处理混合使用 ES6 module 和 CommonJS 的情况。

例如导出使用 CommonJS module.export = test2 导出函数，导入使用 ES6 module import test2 from './test2。

打包后的代码如下：

// index.js
__webpack_require__.r(__webpack_exports__);
var _test2__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/test2.js");
var _test2__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_test2__WEBPACK_IMPORTED_MODULE_0__);
function test() {}
test()
_test2__WEBPACK_IMPORTED_MODULE_0___default()()
//# sourceURL=webpack:///./src/index.js?
// test2.js
function test2() {}
module.exports = test2
//# sourceURL=webpack:///./src/test2.js?

从上述代码可以发现，又多了一个 __webpack_require__.n() 函数：

__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;
};

先来分析一下入口模块的处理逻辑：

  1. 将 __webpack_exports__ 导出对象标识为 ES6 module。
  2. 加载 test2.js 模块，并将该模块的导出对象作为参数传入 __webpack_require__.n() 函数。
  3. __webpack_require__.n 分析该 export 对象是否是 ES6 module，如果是则返回 module['default'] 即 export default 对应的变量。如果不是 ES6 module 则直接返回 export。

按需加载

按需加载，也叫异步加载、动态导入，即只在有需要的时候才去下载相应的资源文件。

在 webpack 中可以使用 import 和 require.ensure 来引入需要动态导入的代码，例如下面这个示例：

// index.js
function test() {}
test()
import('./test2')

// test2.js
export default function test2() {}

其中使用 import 导入的 test2.js 文件在打包时会被单独打包成一个文件，而不是和 index.js 一起打包到 bundle.js。

这个 0.bundle.js 对应的代码就是动态导入的 test2.js 的代码。

接下来看看这两个打包文件的内容：

// bundle.js
(function(modules) { // webpackBootstrap
    // install a JSONP callback for chunk loading
    function webpackJsonpCallback(data) {
        var chunkIds = data[0];
        var moreModules = data[1];
        // add "moreModules" to the modules object,
        // then flag all "chunkIds" as loaded and fire callback
        var moduleId, chunkId, i = 0, resolves = [];
        for(;i < chunkIds.length; i++) {
            chunkId = chunkIds[i];
            if(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
                resolves.push(installedChunks[chunkId][0]);
            }
            installedChunks[chunkId] = 0;
        }
        for(moduleId in moreModules) {
            if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
                modules[moduleId] = moreModules[moduleId];
            }
        }
        if(parentJsonpFunction) parentJsonpFunction(data);
        while(resolves.length) {
            resolves.shift()();
        }
    };
    // The module cache
    var installedModules = {};
    // object to store loaded and loading chunks
    // undefined = chunk not loaded, null = chunk preloaded/prefetched
    // Promise = chunk loading, 0 = chunk loaded
    var installedChunks = {
        "main": 0
    };
    // script path function
    function jsonpScriptSrc(chunkId) {
        return __webpack_require__.p + "" + chunkId + ".bundle.js"
    }
    // The require function
    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;
    }
    // This file contains only the entry chunk.
    // The chunk loading function for additional chunks
    __webpack_require__.e = function requireEnsure(chunkId) {
        var promises = [];
        // JSONP chunk loading for javascript
        var installedChunkData = installedChunks[chunkId];
        if(installedChunkData !== 0) { // 0 means "already installed".
            // a Promise means "currently loading".
            if(installedChunkData) {
                promises.push(installedChunkData[2]);
            } else {
                // setup Promise in chunk cache
                var promise = new Promise(function(resolve, reject) {
                    installedChunkData = installedChunks[chunkId] = [resolve, reject];
                });
                promises.push(installedChunkData[2] = promise);
                // start chunk loading
                var script = document.createElement('script');
                var onScriptComplete;
                script.charset = 'utf-8';
                script.timeout = 120;
                if (__webpack_require__.nc) {
                    script.setAttribute("nonce", __webpack_require__.nc);
                }
                script.src = jsonpScriptSrc(chunkId);
                // create error before stack unwound to get useful stacktrace later
                var error = new Error();
                onScriptComplete = function (event) {
                    // avoid mem leaks in IE.
                    script.onerror = script.onload = null;
                    clearTimeout(timeout);
                    var chunk = installedChunks[chunkId];
                    if(chunk !== 0) {
                        if(chunk) {
                            var errorType = event && (event.type === 'load' ? 'missing' : event.type);
                            var realSrc = event && event.target && event.target.src;
                            error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
                            error.name = 'ChunkLoadError';
                            error.type = errorType;
                            error.request = realSrc;
                            chunk[1](error);
                        }
                        installedChunks[chunkId] = undefined;
                    }
                };
                var timeout = setTimeout(function(){
                    onScriptComplete({ type: 'timeout', target: script });
                }, 120000);
                script.onerror = script.onload = onScriptComplete;
                document.head.appendChild(script);
            }
        }
        return Promise.all(promises);
    };
    // expose the modules object (__webpack_modules__)
    __webpack_require__.m = modules;
    // expose the module cache
    __webpack_require__.c = installedModules;
    // define getter function for harmony exports
    __webpack_require__.d = function(exports, name, getter) {
        if(!__webpack_require__.o(exports, name)) {
            Object.defineProperty(exports, name, { enumerable: true, get: getter });
        }
    };
    // define __esModule on exports
    __webpack_require__.r = function(exports) {
        if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
            Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
        }
        Object.defineProperty(exports, '__esModule', { value: true });
    };
    // create a fake namespace object
    // mode & 1: value is a module id, require it
    // mode & 2: merge all properties of value into the ns
    // mode & 4: return value when already ns object
    // mode & 8|1: behave like require
    __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;
    };
    // getDefaultExport function for compatibility with non-harmony modules
    __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;
    };
    // Object.prototype.hasOwnProperty.call
    __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
    // __webpack_public_path__
    __webpack_require__.p = "";
    // on error function for async loading
    __webpack_require__.oe = function(err) { console.error(err); throw err; };
    var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
    var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
    jsonpArray.push = webpackJsonpCallback;
    jsonpArray = jsonpArray.slice();
    for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
    var parentJsonpFunction = oldJsonpFunction;
    // Load entry module and return exports
    return __webpack_require__(__webpack_require__.s = "./src/index.js");
})({
  "./src/index.js":(function(module, exports, __webpack_require__) {
    eval("function test() {}\r\n\r\ntest()\r\n__webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./test2 */ \"./src/test2.js\"))\n\n//# sourceURL=webpack:///./src/index.js?");
  })
});

// 0.bundle.js
(window["webpackJsonp"] = window["webpackJsonp"] || []).push(
  [
    [0],
    {
      "./src/test2.js":(function(module, __webpack_exports__, __webpack_require__) {
        "use strict";
        eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return test2; });\nfunction test2() {}\n\n//# sourceURL=webpack:///./src/test2.js?");
      })
    }
  ]
);

这次打包的代码量有点膨胀，bundle.js 代码居然有 200 行。我们来看看相比于同步加载的 webpack 模块规范，它有哪些不同：

  1. 定义了一个对象 installedChunks，作用是缓存动态模块。
  2. 定义了一个辅助函数 jsonpScriptSrc()，作用是根据模块 ID 生成 URL。
  3. 定义了两个新的核心函数 __webpack_require__.e() 和 webpackJsonpCallback()。
  4. 定义了一个全局变量 window["webpackJsonp"] = []，它的作用是存储需要动态导入的模块。
  5. 重写 window["webpackJsonp"] 数组的 push() 方法为 webpackJsonpCallback()。也就是说 window["webpackJsonp"].push() 其实执行的是 webpackJsonpCallback()。

而从 0.bundle.js 文件可以发现，它正是使用 window["webpackJsonp"].push() 来放入动态模块的。动态模块数据项有两个值，第一个是 [0]，它是模块的 ID；第二个值是模块的路径名和模块内容。

然后我们再看一下打包后的入口模块的代码，经过美化后：

function test() {}
test()
__webpack_require__.e(0).then(__webpack_require__.bind(null, "./src/test2.js"))
//# sourceURL=webpack:///./src/index.js?

原来模块代码中的 import('./test2') 被翻译成了 __webpack_require__.e(0).then(__webpack_require__.bind(null, "./src/test2.js"))。

那 __webpack_require__.e() 的作用是什么呢？

__webpack_require__.e()

__webpack_require__.e = function requireEnsure(chunkId) {
    var promises = [];
    // JSONP chunk loading for javascript
    var installedChunkData = installedChunks[chunkId];
    if(installedChunkData !== 0) { // 0 means "already installed".
        // a Promise means "currently loading".
        if(installedChunkData) {
            promises.push(installedChunkData[2]);
        } else {
            // setup Promise in chunk cache
            var promise = new Promise(function(resolve, reject) {
                installedChunkData = installedChunks[chunkId] = [resolve, reject];
            });
            promises.push(installedChunkData[2] = promise);
            // start chunk loading
            var script = document.createElement('script');
            var onScriptComplete;
            script.charset = 'utf-8';
            script.timeout = 120;
            if (__webpack_require__.nc) {
                script.setAttribute("nonce", __webpack_require__.nc);
            }
            script.src = jsonpScriptSrc(chunkId);
            // create error before stack unwound to get useful stacktrace later
            var error = new Error();
            onScriptComplete = function (event) {
                // avoid mem leaks in IE.
                script.onerror = script.onload = null;
                clearTimeout(timeout);
                var chunk = installedChunks[chunkId];
                if(chunk !== 0) {
                    if(chunk) {
                        var errorType = event && (event.type === 'load' ? 'missing' : event.type);
                        var realSrc = event && event.target && event.target.src;
                        error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
                        error.name = 'ChunkLoadError';
                        error.type = errorType;
                        error.request = realSrc;
                        chunk[1](error);
                    }
                    installedChunks[chunkId] = undefined;
                }
            };
            var timeout = setTimeout(function(){
                onScriptComplete({ type: 'timeout', target: script });
            }, 120000);
            script.onerror = script.onload = onScriptComplete;
            document.head.appendChild(script);
        }
    }
    return Promise.all(promises);
};

它的处理逻辑如下：

  1. 先查看该模块 ID 对应缓存的值是否为 0，0 代表已经加载成功了，第一次取值为 undefined。
  2. 如果不为 0 并且不是 undefined 代表已经是加载中的状态。然后将这个加载中的 Promise 推入 promises 数组。
  3. 如果不为 0 并且是 undefined 就新建一个 Promise，用于加载需要动态导入的模块。
  4. 生成一个 script 标签，URL 使用 jsonpScriptSrc(chunkId) 生成，即需要动态导入模块的 URL。
  5. 为这个 script 标签设置一个 2 分钟的超时时间，并设置一个 onScriptComplete() 函数，用于处理超时错误。
  6. 然后添加到页面中 document.head.appendChild(script)，开始加载模块。
  7. 返回 promises 数组。

当 JS 文件下载完成后，会自动执行文件内容。也就是说下载完 0.bundle.js 后，会执行 window["webpackJsonp"].push()。

由于 window["webpackJsonp"].push() 已被重置为 webpackJsonpCallback() 函数。所以这一操作就是执行 webpackJsonpCallback() ，接下来我们看看 webpackJsonpCallback() 做了哪些事情。

webpackJsonpCallback()

对这个模块 ID 对应的 Promise 执行 resolve()，同时将缓存对象中的值置为 0，表示已经加载完成了。相比于 __webpack_require__.e()，这个函数还是挺好理解的。

小结

总的来说，动态导入的逻辑如下：

  1. 重写 window["webpackJsonp"].push() 方法。
  2. 入口模块使用 __webpack_require__.e() 下载动态资源。
  3. 资源下载完成后执行 window["webpackJsonp"].push()，即 webpackJsonpCallback()。
  4. 将资源标识为 0，代表已经加载完成。由于加载模块使用的是 Promise，所以要执行 resolve()。
  5. 再看一下入口模块的加载代码 __webpack_require__.e(0).then(__webpack_require__.bind(null, "./src/test2.js"))，下载完成后执行 then() 方法，调用 __webpack_require__() 真正开始加载代码，__webpack_require__() 在上文已经讲解过，如果不了解，建议再阅读一遍。

更多文章，敬请关注

文章标签：
前端开发
缓存
JavaScript
存储
关键词：
Webpack原理
Webpack模块加载
Webpack模块加载原理
谭光志
目录
相关文章
大树营养快线
|
3月前
|
监控 前端开发 JavaScript
Webpack 中 HMR 插件的工作原理
【10月更文挑战第23天】可以进一步深入探讨 HMR 工作原理的具体细节、不同场景下的应用案例，以及与其他相关技术的结合应用等方面的内容。通过全面、系统地了解 HMR 插件的工作原理，能够更好地利用这一功能，为项目的成功开发提供有力保障。同时，要不断关注技术的发展动态，以便及时掌握最新的 HMR 技术和最佳实践。
大树营养快线
64 5
大树营养快线
|
3月前
|
缓存 前端开发 JavaScript
Webpack 动态加载的原理
【10月更文挑战第23天】Webpack 动态加载通过巧妙的机制和策略，实现了模块的按需加载和高效运行，提升了应用程序的性能和用户体验。同时，它也为前端开发提供了更大的灵活性和可扩展性，适应了不断变化的业务需求和技术发展。
大树营养快线
109 4
大树营养快线
|
3月前
|
缓存 前端开发 JavaScript
webpack 原理
【10月更文挑战第23天】Webpack 原理是一个复杂但又非常重要的体系。它通过模块解析、依赖管理、加载器和插件的协作，实现了对各种模块的高效打包和处理，为现代前端项目的开发和部署提供了强大的支持。同时，通过代码分割、按需加载、热模块替换等功能，提升了应用程序的性能和用户体验。随着前端技术的不断发展，Webpack 也在不断演进和完善，以适应不断变化的需求和挑战。
大树营养快线
55 0
我是快乐的嘟嘟
|
4月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
我是快乐的嘟嘟
76 10
周一同学Zelina
|
5月前
|
JavaScript 前端开发
手写一个简易bundler打包工具带你了解Webpack原理
该文章通过手写一个简易的打包工具bundler，帮助读者理解Webpack的工作原理，包括模块解析、依赖关系构建、转换源代码以及生成最终输出文件的整个流程。
周一同学Zelina
67 0
toddli
|
6月前
|
缓存 前端开发 JavaScript
Webpack 模块解析：打包原理、构造形式、扣代码补参数和全局导出
Webpack 模块解析：打包原理、构造形式、扣代码补参数和全局导出
toddli
319 1
阿珊和她的猫
|
9月前
|
前端开发 测试技术 开发者
深入理解 Webpack 热更新原理：提升开发效率的关键
深入理解 Webpack 热更新原理：提升开发效率的关键
阿珊和她的猫
437 0
八百标兵奔北坡
|
9月前
|
API 开发工具 开发者
webpack热更新原理
Webpack的Hot Module Replacement（HMR）提升开发效率，无需刷新页面即可更新模块。开启HMR需在配置中设`devServer.hot: true`。Webpack构建时插入HMR Runtime，通过WebSocket监听并处理文件变化。当模块改变，Webpack发送更新到浏览器，HMR Runtime找到对应模块进行热替换，保持应用状态。开发者可利用`module.hot` API处理热替换逻辑。
八百标兵奔北坡
81 1
C哩C哩li
|
9月前
|
缓存 前端开发 算法
Webpack 进阶：深入理解其工作原理与优化策略
Webpack 进阶：深入理解其工作原理与优化策略
C哩C哩li
204 2
北海屿鹿
|
9月前
|
自然语言处理 JavaScript 前端开发
webpack 的热更新是如何做到的？原理是什么？
webpack 的热更新是如何做到的？原理是什么？
北海屿鹿
109 0

热门文章

最新文章

  • 1
    Webpack 插件底层的实现原理是什么？
  • 2
    【vue】webpack打包vue项目并且运行在Tomcat里面
  • 3
    2.2.3 使用webpack loader
  • 4
    你真的理解 Webpack？请回答下列问题
  • 5
    webpack指南-webpack介绍-代码分割 - CSS
  • 6
    Vue 打包 chunk-vendors.js 文件过大解决方案（compression-webpack-plugin）
  • 7
    如何在本地运行 webpack 打包后的文件
  • 8
    webpack window 添加ES6支出
  • 9
    2.2.4 webpack 配置文件
  • 10
    webpack 打包去掉控制台的console.log()
  • 1
    Webpack 插件底层的实现原理是什么？
    52
  • 2
    在Webpack配置文件中，如何配置loader以处理其他类型的文件，如CSS或图片
    173
  • 3
    Webpack中loader的使用场景
    103
  • 4
    webpack 中 loader 和 plugin 的区别
    100
  • 5
    Webpack与Babel的进阶配置与优化
    76
  • 6
    配置 Webpack 进行代码分离的常见方法有哪些？
    56
  • 7
    如何配置 Webpack 进行代码分离？
    96
  • 8
    webpack相关配置
    79
  • 9
    工程化（webpack+vite）
    62
  • 10
    前端性能优化：Webpack与Babel的进阶配置与优化策略
    108

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Python Web 框架 Flask 快速入门
  • Python Web 框架 Django 快速入门
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • 基于webpack和npm的前端组件化实践
  • WEB浏览器中即将发生的安全变化

    • 相关实验场景

    更多
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • WEB网页编程实战
  • 搭建Node.js编程环境
    • 下一篇
    阿里云oss简介和如何对接使用