我的编程空间,编程开发者的网络收藏夹
学习永远不晚

webpack模块化的原理是什么

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

webpack模块化的原理是什么

本篇内容介绍了“webpack模块化的原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

commonjs

在webpack中既可以书写commonjs模块也可以书写es模块,而且不用考虑浏览器的兼容性问题,我们来分析一下原理。

首先搞清楚commonjs模块化的处理方式,简单配置一下webpack,写两个模块编译一下看一下:

webpack.config.js

module.exports = {    mode: "development",    devtool: "none"}

index.js

const a = require('./a')console.log(a)

a.js

const a = 'a';module.exports = a;

编译结果

查看编译结果,可以发现webpack对于每个模块的做法类似于node,将每个模块放在一个函数环境中并向其中传入一些必要的参数。webpack将这些模块组成一个对象(属性名是模块路径(模块id),属性值为模块内容)传入一个立即执行函数,立即执行函数中定义了一个函数 __webpack_require__类似node中的require函数,实现了导入模块的作用。

webpack模块化的原理是什么

打包结果中删去了一些注释和暂时用不要的代码,可以很明显的看出来实现commonjs模块化的关键就是这个 __webpack_require__ 函数,通过传入模块id来得到模块的导出。

require 函数

__webpack_require__ 函数的实现:

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

如果熟悉node就很容易理解这个函数了:

  • 首先查看这个模块是否已经被加载过,所以就需要一个全局变量installedModules用来记录所有被加载过模块的导出

  • 没有加载过的模块就先构造一个module对象,关键是要有一个 exports 属性

  • 执行模块代码并返回模块导出值

最终的一步就是需要加载启动模块,也就是IIFE的最后一句:

return __webpack_require__("./class="lazy" data-src/index.js");

ES Module

es 模块化的处理方式是需要借助 __webpack_require__ 实现的,首先看一些刚才被删除的代码:

__webpack_require__.r

该函数用于标识es模块的导出

// 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__.d

用于处理es模块的具名导出

// 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__.o

就是给 hasOwnPreperty 换了个名字

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

我们改一下模块代码看看纯es Module导入导出的编译结果:

index.js

import a, { test } from './a'import b from './b'console.log(a);test();console.log(b)

a.js

const a = 'a';function test() { }export default a;export { test }

b.js

const b = 'b';export default b;

参考资料 前端进阶面试题详细解答

编译结果

{    "./class="lazy" data-src/a.js": (function (module, __webpack_exports__, __webpack_require__) {        "use strict";        __webpack_require__.r(__webpack_exports__);                __webpack_require__.d(__webpack_exports__, "test", function () { return test; });        const a = 'a';        function test() { }                __webpack_exports__["default"] = (a);    }),    "./class="lazy" data-src/b.js": (function (module, __webpack_exports__, __webpack_require__) {        "use strict";        __webpack_require__.r(__webpack_exports__);        const b = 'b';                __webpack_exports__["default"] = (b);    }),    "./class="lazy" data-src/index.js": (function (module, __webpack_exports__, __webpack_require__) {        "use strict";        __webpack_require__.r(__webpack_exports__);                var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./class="lazy" data-src/a.js");                var _b__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./class="lazy" data-src/b.js");        console.log(_a__WEBPACK_IMPORTED_MODULE_0__["default"])        Object(_a__WEBPACK_IMPORTED_MODULE_0__["test"])();        console.log(_b__WEBPACK_IMPORTED_MODULE_1__["default"])    })}

根据编译结果可以很明白的看出来,和 commonjs 编译出来的结果差不多,核心都是使用 __webpack_require__ 函数,区别在于es模块化,exports 对象首先就会被__webpack_require__.r标记为es module,对于默认导出就是 exportsdefault 属性,对于具名导出使用 __webpack_require__.d 包装了一下,目的是让这些具名导出在模块之外只能读不能被修改(这是es module的特点)。

v5 的变化

但是为什么 default 没有被__webpack_require__.d 处理,这不合理啊。本来是使用的 webpack 4打包的,然后换了webpack 5试了一下,webpack 5打包的结果中 default 也被处理了,这可能是webpack 4的一个小bug吧。

webpack5的编译结果有些许的不同,但是整个逻辑是没有变的:

webpack模块化的原理是什么

两种模块化交互

webpack 是支持两种模块化代码共存的,虽然不建议这样做。首先我们先看一下他们互相导入的时候的导入结果是什么样的:

webpack模块化的原理是什么

webpack模块化的原理是什么

我们来看看 webpack 是如何实现的,先修改一下模块:

index.js

const { a, test } = require('./a')

a.js

import b from './b'import * as bbb from './b'console.log(bbb)console.log(b)console.log(b.b)const a = 'a';function test() { }export default a;export { test };

b.js

module.exports = {  b: () => { },  moduleName: 'b'}

编译结果

{  "./class="lazy" data-src/a.js":    (function (module, __webpack_exports__, __webpack_require__) {      "use strict";      __webpack_require__.r(__webpack_exports__);            __webpack_require__.d(__webpack_exports__, "test", function () { return test; });            var _b__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./class="lazy" data-src/b.js");            var _b__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_b__WEBPACK_IMPORTED_MODULE_0__);      console.log(_b__WEBPACK_IMPORTED_MODULE_0__)      console.log(_b__WEBPACK_IMPORTED_MODULE_0___default.a)      console.log(_b__WEBPACK_IMPORTED_MODULE_0___default.a.b)      const a = 'a';      function test() { }            __webpack_exports__["default"] = (a);    }),  "./class="lazy" data-src/b.js": (function (module, exports) {    module.exports = {      b: () => { },      moduleName: 'b'    }  }),  "./class="lazy" data-src/index.js": (function (module, exports, __webpack_require__) {    const { a, test } = __webpack_require__("./class="lazy" data-src/a.js")  })}

可以发现当通过es模块的方式去 import 一个commonjs模块时,就会把导入的模块进行一层包装,通过 __webpack_require__.n,主要目的应该是为了兼容 import * as obj from '....' 这样的语法。

该函数的具体实现:

__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模块化的原理是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

webpack模块化的原理是什么

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

webpack模块化的原理是什么

本篇内容介绍了“webpack模块化的原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!commonjs在webpack中既可以书写c
2023-07-05

webpack模块化的原理解析

webpack中实现模块化的核心就是__webpack_require__函数,无论是commonjs模块化还是es模块都是通过该函数来导入的,这篇文章主要介绍了webpack模块化的原理,需要的朋友可以参考下
2023-02-28

es6模块的原理是什么

这篇文章主要讲解了“es6模块的原理是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“es6模块的原理是什么”吧!ES6模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及
2023-07-04

es6模块是什么原理

ES6模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。ES6模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入。由于ES6模块是编译时加载,使得静态分析成为可能;有了它就能进一步拓宽JS的语法,比如引入宏和类型检验这些只能靠静态分析实现的功能。
2023-05-14

Webpack 原理与实践之如何使用 Webpack 实现模块化打包?

webpack还具备代码拆分的能力,能够将应用中所有的模块按需分块打包,不用担心全部代码打包到一起,产生单个文件过大,导致加载慢的问题。这种模块按需分块打包非常适合大型web项目。

python模块化设计原则是什么

Python模块化设计原则是一组指导原则,用于在开发Python程序时进行模块化设计。这些原则旨在提高代码的可维护性、可扩展性和可重用性。1. 单一职责原则(Single Responsibility Principle,SRP):一个模块
2023-09-22

webpack动态import原理是什么

今天小编给大家分享一下webpack动态import原理是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。例子// ind
2023-06-30

node中的模块系统原理是什么

本篇内容介绍了“node中的模块系统原理是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!模块系统并不是所有编程语言都有内置的模块系统,J
2023-07-05

Nginx的模块与工作原理是什么

小编给大家分享一下Nginx的模块与工作原理是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一. Nginx的模块与工作原理Nginx由内核和模块组成,其中
2023-06-15

node模块化是什么

这篇“node模块化是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“node模块化是什么”文章吧。什么是模块化模块化是指
2023-07-05

什么是模块化?聊聊Node模块化的那些事

什么是模块化?本篇文章给大家深度解析一下Node.js模块化的那些事,希望对大家有所帮助!
2022-11-23

什么是模块化?深析node模块化的那些事

什么是模块化?本篇文章带大家深度解析node模块化的那些事,希望对大家有所帮助!
2023-05-14

vue模块化指的是什么

这篇“vue模块化指的是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue模块化指的是什么”文章吧。在vue中,模块化
2023-07-04

python模块化指的是什么

小编给大家分享一下python模块化指的是什么,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!python可以做什么Python是一种编程语言,内置了许多有效的工具
2023-06-14

vue中什么是模块化

在vue中,模块化就是把单独的一个功能封装到一个模块(文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块(方便代码的重用,从而提升开发效率,并且方便后期的维护)。模块化开发的好处:1、条理清晰,便于维护;2、不会一次将所有数据请求回来,用户体验感好;3、模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块。
2023-05-14

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录