《二十三》Webpack 的模块化原理

已于 2023-12-11 08:50:18 修改
阅读量26 收藏
点赞数
分类专栏： Webpack 文章标签： Webpack
于 2023-09-11 09:25:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wsln_123456/article/details/132799906
版权

Wepack 自身就已经支持模块化，开发者在代码中可以使用各种各样的模块化开发，使用 Webpack 进行打包后会对其进行转换，因此可以直接在浏览器中运行。其中最常见的 CommonJS 和 ESModule。

CommonJS 模块化实现原理：

  1. 新建 src/js/math/js 文件并编写代码。
    function sum(num1,  num2) {
    return num1 + num2
}
module.exports = {sum}
  2. 新建 src/index.js 文件并编写代码。
    const {sum} = require('./js/math.js')
console.log(sum(10,20))
  3. 在 webpack.config.js 配置文件中配置开发模式，使打包后生成的文件不进行压缩丑化，方便阅读代码。
    module.exports = {
    mode: 'development',
    devtool: 'source-map',
}
  4. 运行 webpack 命令进行打包，查看生成的 dist/main.js 文件。
    1. Webpack 会定义一个对象用来存放模块的映射。以模块的路径作为 key，以一个函数中作为 value。
    2. Webpack 会定义一个对象作为加载模块的缓存。
    3. Webpack 会定义一个函数，当加载模块时都会通过这个函数来加载。
      - 判断缓存模块中是否已经加载过该模块，如果有的话，直接返回模块导出的方法。
      - 否则的话，会从存放模块映射的对象中获取出模块要导出的变量，将其放入模块缓存对象中，并导出。
    4. 有一个立即执行函数，真正开始执行代码逻辑，调用加载模块的函数来加载引入的模块。
    // 立即执行函数
(() => {
    // 定义一个对象用来存放模块的映射。以模块的路径作为 key，以一个函数中作为 value。如果有多个模块，将会有多个 key/value
    var __webpack_modules__ = ({
        "./src/js/math.js": ((module) => {
            function sum(num1, num2) {
                return num1 + num2
            }
            // 将要导出的变量放到 module.exorts 对象中
            module.exports = {sum}
        })
    });

    // 定义一个对象作为加载模块的缓存。如果模块被初次加载，就放到这个缓存对象中，之后再读取的话就会更加方便读取
    var __webpack_module_cache__ = {};

    // 定义一个函数，当加载模块时都会通过这个函数来加载
    function __webpack_require__(moduleId) {
        // 1. 判断缓存模块中是否已经有该模块，如果有的话，直接返回模块导出的方法，就不需要再去加载一次模块中的所有代码
        var cachedModule = __webpack_module_cache__[moduleId];
        if (cachedModule !== undefined) {
            return cachedModule.exports;
        }
        // 2. 如果一次都没有加载过该模块，给 module 变量和模块缓存对象 __webpack_module_cache__[moduleId] 赋值同一个对象
        var module = __webpack_module_cache__[moduleId] = {exports: {}};
        // 3. 通过执行模块映射对象中指定的模块来获取对应导出的变量
        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
        // 4. 返回 module.exports
        return module.exports;
    }

    // 立即执行函数。真正开始执行代码逻辑
    (() => {
        // 加载 ./src/js/math.js 模块
        const {sum} = __webpack_require__("./src/js/math.js")
        console.log(sum(10, 20))
    })();

})();

ESModule 模块化实现原理：

  1. 新建 src/js/math/js 文件并编写代码。
    export function sum(num1,  num2) {
    return num1 + num2
}
  2. 新建 src/index.js 文件并编写代码。
    import {sum} from './js/math.js'
console.log(sum(10,20))
  3. 在 webpack.config.js 配置文件中配置开发模式，使打包后生成的文件不进行压缩丑化，方便阅读代码。
    module.exports = {
    mode: 'development',
    devtool: 'source-map',
}
  4. 运行 webpack 命令进行打包，查看生成的 dist/main.js 文件。
    1. Webpack 会定义一个对象用来存放模块的映射。以模块的路径作为 key，以一个函数中作为 value。
    2. Webpack 会定义一个对象作为加载模块的缓存。
    3. Webpack 会定义一个函数，当加载模块时都会通过这个函数来加载。
      - 判断缓存模块中是否已经加载过该模块，如果有的话，直接返回模块导出的方法。
      - 否则的话，会从存放模块映射的对象中获取出模块要导出的变量，将其放入模块缓存对象中，并导出。
    4. 通过三个方法来为加载模块的方法置定义三个属性：添加一个属性来标识是一个 ESModule 模块；判断属性是定义在对象本身上的而不是继承自原型链；为属性设置一层代理，访问 exports 对象的属性其实是在访问 definition 中对应的 get。
    5. 有一个立即执行函数，真正开始执行代码逻辑，调用加载模块的函数来加载引入的模块。
    // 立即执行函数
(() => {
    "use strict";

    // 定义一个对象用来存放模块的映射。以模块的路径作为 key，以一个函数中作为 value。如果有多个模块，将会有多个 key/value
    var __webpack_modules__ = ({
        "./src/js/math.js": ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
            // 调用 r 的目的是为了记录该模块是一个 ESModule
            __webpack_require__.r(__webpack_exports__);
            // 调用 d 的目的是为了设置一层代理。访问 exports.sum 其实是在访问 definition 中的 get 方法
            __webpack_require__.d(__webpack_exports__, {
                sum: () => (sum)
            });
            function sum(num1, num2) {
                return num1 + num2
            }
        })

    });

    // 定义一个对象作为加载模块的缓存。如果模块被初次加载，就放到这个缓存对象中，之后再读取的话就会更加方便读取
    var __webpack_module_cache__ = {};

    // 定义一个函数，当加载模块时都会通过这个函数来加载
    function __webpack_require__(moduleId) {
        // 1. 判断缓存对象中是否有该模块，如果有的话，直接返回模块导出的方法，就不需要再去加载一次模块中的所有代码
        var cachedModule = __webpack_module_cache__[moduleId];
        if (cachedModule !== undefined) {
            return cachedModule.exports;
        }
        // 2. 如果一次都没有加载过该模块，给 module 变量和模块缓存对象 __webpack_module_cache__[moduleId] 赋值同一个对象
        var module = __webpack_module_cache__[moduleId] = {exports: {}};
        // 3. 通过执行模块映射对象中指定的模块来获取对应导出的变量
        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
        // 4. 返回 module.exports
        return module.exports;
    }

    // 立即执行函数。给 __webpack_require__ 函数添加了一个 d 属性，为属性设置一层代理，访问 exports 对象的属性其实是在访问 definition 中对应的 get
    (() => {
        __webpack_require__.d = (exports, definition) => {
            for (var key in definition) {
                if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
                    Object.defineProperty(exports, key, {enumerable: true, get: definition[key]});
                }
            }
        };
    })();

    // 立即执行函数。给 __webpack_require__ 函数添加了一个 o 属性，判断属性是定义在对象本身上的而不是继承自原型链
    (() => {
        __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
    })();

    // 立即执行函数。给 __webpack_require__ 函数添加了一个 r 属性，添加 __esModule = true 属性来标识是一个 ESModule 模块
    (() => {
        __webpack_require__.r = (exports) => {
            if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
                Object.defineProperty(exports, Symbol.toStringTag, {value: 'Module'});
            }
            Object.defineProperty(exports, '__esModule', {value: true});
        };
    })();

    // 立即执行函数。真正开始执行代码逻辑
	var __webpack_exports__ = {};
    (() => {
        // 调用 r 的目的是为了记录该模块是一个 ESModule
        __webpack_require__.r(__webpack_exports__);
        // 加载 ./src/js/math.js 模块
        var _js_math_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/math.js");
        console.log((0, _js_math_js__WEBPACK_IMPORTED_MODULE_0__.sum)(10, 20))
    })();

})();

CommonJS 加载 ESModule 的原理：

在 Webpack 中，可以通过 CommonJS 导入通过 ESModule 导出的内容。

  1. 新建 src/js/math/js 文件并编写代码。
    export function sum(num1,  num2) {
  return num1 + num2
}
  2. 新建 src/index.js 文件并编写代码。
    const {sum} = require('./js/math.js')
console.log(sum(10,20))
  3. 在 webpack.config.js 配置文件中配置开发模式，使打包后生成的文件不进行压缩丑化，方便阅读代码。
    module.exports = {
    mode: 'development',
    devtool: 'source-map',
}
  4. 运行 webpack 命令进行打包，查看生成的 dist/main.js 文件。
    // 立即执行函数
(function () {
   // 定义一个对象用来存放模块的映射。以模块的路径作为 key，以一个函数中作为 value。如果有多个模块，将会有多个 key/value
  var __webpack_modules__ = ({
    "./src/js/math.js": (function (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
        "use strict";
         // 调用 r 的目的是为了记录该模块是一个 ESModule
        __webpack_require__.r(__webpack_exports__);
         // 调用 d 的目的是为了设置一层代理。访问 exports.sum 其实是在访问 definition 中的 get 方法
        __webpack_require__.d(__webpack_exports__, {
          sum: function () { return sum; }
        });
        function sum(num1, num2) {
          return num1 + num2
        }
      })
  });

   // 定义一个对象作为加载模块的缓存。如果模块被初次加载，就放到这个缓存对象中，之后再读取的话就会更加方便读取
  var __webpack_module_cache__ = {};

   // 定义一个函数，当加载模块时都会通过这个函数来加载
  function __webpack_require__(moduleId) {
     // 1. 判断缓存对象中是否有该模块，如果有的话，直接返回模块导出的方法，就不需要再去加载一次模块中的所有代码
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }
      // 2. 如果一次都没有加载过该模块，给 module 变量和模块缓存对象 __webpack_module_cache__[moduleId] 赋值同一个对象
    var module = __webpack_module_cache__[moduleId] = {exports: {}};
     // 3. 通过执行模块映射对象中指定的模块来获取对应导出的变量
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
     // 4. 返回 module.exports
    return module.exports;
  }

    // 立即执行函数。给 __webpack_require__ 函数添加了一个 d 属性，为属性设置一层代理，访问 exports 对象的属性其实是在访问 definition 中对应的 get
  !function () {
    __webpack_require__.d = function (exports, definition) {
      for (var key in definition) {
        if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
          Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
        }
      }
    };
  }();

   // 立即执行函数。给 __webpack_require__ 函数添加了一个 o 属性，判断属性是定义在对象本身上的而不是继承自原型链
  !function () {
    __webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
  }();

    // 立即执行函数。给 __webpack_require__ 函数添加了一个 r 属性，添加 __esModule = true 属性来标识是一个 ESModule 模块
  !function () {
    __webpack_require__.r = function (exports) {
      if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
      }
      Object.defineProperty(exports, '__esModule', { value: true });
    };
  }();

  // 立即执行函数。真正开始执行代码逻辑
  !function () {
    // 加载 ./src/js/math.js 模块
    const math = __webpack_require__("./src/js/math.js")
    console.log(math.sum(10, 20))
  }();
})();

ESModule 加载 CommonJS 的原理：

在 Webpack 中，可以通过 ESModule 导入通过 CommonJS 导出的内容。

  1. 新建 src/js/math/js 文件并编写代码。
    function sum(num1,  num2) {
  return num1 + num2
}
module.exports = {sum}
  2. 新建 src/index.js 文件并编写代码。
    import {sum} from './js/math.js'
console.log(sum(10,20))
  3. 在 webpack.config.js 配置文件中配置开发模式，使打包后生成的文件不进行压缩丑化，方便阅读代码。
    module.exports = {
    mode: 'development',
    devtool: 'source-map',
}
  4. 运行 webpack 命令进行打包，查看生成的 dist/main.js 文件。
// 立即执行函数
(function () {
   // 定义一个对象用来存放模块的映射。以模块的路径作为 key，以一个函数中作为 value。如果有多个模块，将会有多个 key/value
  var __webpack_modules__ = ({
    "./src/js/math.js": (function (module) {
        function sum(num1, num2) {
          return num1 + num2
        }
        module.exports = { sum }
      })
  });

   // 定义一个对象作为加载模块的缓存。如果模块被初次加载，就放到这个缓存对象中，之后再读取的话就会更加方便读取
  var __webpack_module_cache__ = {};

   // 定义一个函数，当加载模块时都会通过这个函数来加载
  function __webpack_require__(moduleId) {
    // 1. 判断缓存对象中是否有该模块，如果有的话，直接返回模块导出的方法，就不需要再去加载一次模块中的所有代码
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
      return cachedModule.exports;
    }
    // 2. 如果一次都没有加载过该模块，给 module 变量和模块缓存对象 __webpack_module_cache__[moduleId] 赋值同一个对象
    var module = __webpack_module_cache__[moduleId] = {exports: {}};
    // 3. 通过执行模块映射对象中指定的模块来获取对应导出的变量
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    // 4. 返回 module.exports
    return module.exports;
  }

  // 立即执行函数。给 __webpack_require__ 函数添加了一个 n 属性，区分是 ESModule 还是 CommonJS 模块，通过不同的函数返回 module 并为函数设置一层代理
  !function () {
    __webpack_require__.n = function (module) {
      var getter = module && module.__esModule ?
        function () { return module['default']; } :
        function () { return module; };
      __webpack_require__.d(getter, { a: getter });
      return getter;
    };
  }();

  // 立即执行函数。给 __webpack_require__ 函数添加了一个 d 属性，为属性设置一层代理，访问 exports 对象的属性其实是在访问 definition 中对应的 get
  !function () {
    __webpack_require__.d = function (exports, definition) {
      for (var key in definition) {
        if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
          Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
        }
      }
    };
  }();

   // 立即执行函数。给 __webpack_require__ 函数添加了一个 o 属性，判断属性是定义在对象本身上的而不是继承自原型链
  !function () {
    __webpack_require__.o = function (obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
  }();

  // 立即执行函数。给 __webpack_require__ 函数添加了一个 r 属性，添加 __esModule = true 属性来标识是一个 ESModule 模块
  !function () {
    __webpack_require__.r = function (exports) {
      if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
      }
      Object.defineProperty(exports, '__esModule', { value: true });
    };
  }();

   // 立即执行函数。真正开始执行代码逻辑
  var __webpack_exports__ = {};
  !function () {
    "use strict";
     // 调用 r 的目的是为了记录该模块是一个 ESModule
    __webpack_require__.r(__webpack_exports__);
    // 加载 ./src/js/math.js 模块
    var _js_math_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/js/math.js");
    var _js_math_js__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_js_math_js__WEBPACK_IMPORTED_MODULE_0__);
    console.log((0, _js_math_js__WEBPACK_IMPORTED_MODULE_0__.sum)(10, 20))
  }();
})();
花铛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack模块化的原理
gogo2027的博客
10-31 75
在webpack中既可以书写commonjs模块也可以书写es模块，而且不用考虑浏览器的兼容性问题，我们来分析一下原理。首先搞清楚commonjs模块化的处理方式，简单配置一下webpack，写两个模块编译一下看一下：webpack.config.js index.js a.js 编译结果 查看编译结果，可以发现webpack对于每个模块的做法类似于node，将每个模块放在一个函数环境中并向其中传入一些必要的参数。webpack将这些模块组成一个对象（属性名是模块路径(模块id)，属性值为模块内容）传入一个
浅谈webpack组织模块的原理
01-19
所有的东西都模块化，最后统一编译。Webpack因为版本的不断更新以及各种各样纷繁复杂的配置选项，在使用中出现一些迷之错误常常让人无所适从。所以了解一下Webpack究竟是怎么组织编译模块的，生成的代码到底是怎么...
【webpack】webpack模块化原理学习笔记
qq_53512708的博客
11-20 239
根据webpack打包后的代码理解CommonJS与ESModule在webpack5中的实现原理
Webpack模块化原理图解
web前端开发
03-03 347
为什么需要模块化场景1A同学开发了模块a，B同学开发了模块b，在页面下通过如下方式进行引用<script src="a.js"></script>&...
webpack模块化原理-commonjs/webpack模块化原理-ES module
zzy7075的专栏
02-04 124
我们都知道，webpack作为一个构建工具，解决了前端代码缺少模块化能力的问题。我们写的代码，经过webpack构建和包装之后，能够在浏览器以模块化的方式运行。这些能力，都是因为webpack对我们的代码进行了一层包装，本文就以webpack生成的代码入手，分析webpack是如何实现模块化的。PS: webpack的模块不仅指js，包括css、图片等资源都可以以模块看待，但本文只关注js。
Webpack模块化打包工具
qq_50352386的博客
03-19 1062
1、模块回顾 1.1 什么是模块化 模块：一个封装起来有独立功能的部分 模块化是一种WEB应用分离成多个模块（独立功能部分）的方法，可将系统分割成独立的功能部分，严格定义模块接口，模块间具有透明性 为什么要有模块化？ 解决早期团队项目的变量污染 1.2 模块的实现方式 1.2.1 comm...
webpack模块化原理
weixin_30298497的博客
03-24 94
https://segmentfault.com/a/1190000010349749 webpack模块化原理-commonjs https://segmentfault.com/a/1190000010955254 webpack模块化原理-ES module https://segmentfault.com/a/1190000011435407 webpack模块...
webpack模块化实现原理
欢迎访问我的主页：https://www.bookbook.cc
05-12 225
webpack模块化实现原理
Webpack原理整理（一）模块化原理
peifeng_chen的微博
04-09 1623
演示项目样例介绍 这次来介绍下webpack模块化的原理，这次以commonJS模块化为例，先来看看项目的目录结构是怎样的。 我们再来看看主要的内容，项目的内容非常简单，在index.js中用commonJS模块引入的方法，引入了一个js文件夹下common.js导出的 mul 乘法函数。 进行打包，查看模块化原理 我们进行npm run build打包（package.json）script中的build字段要改为web...
Webpack模块化原理简析
weixin_33857679的博客
07-29 355
webpack模块化原理简析 1.webpack的核心原理 一切皆模块：在webpack中，css,html.js，静态资源文件等都可以视作模块；便于管理，利于重复利用； 按需加载：进行代码分割，实现按需加载。 2. webpack模块化原理：以js为例，分析webpack构建common.js的模块化方式。 ①构建示例代码 //...
webpack模块化原理-commonjs
csdn_girl的博客
03-14 546
https://segmentfault.com/a/1190000010349749
webpack组织模块打包Library的原理及实现
08-27
本文将深入探讨 webpack 组织模块打包 Library 的原理及其实现方法。 首先，我们要理解在 webpack 配置中 `output.library` 和 `output.libraryTarget` 这两个关键选项的作用。`output.library` 指定你想要导出的库...
harmonyos2-webpack-analyse:webpack打包结果分析；webpack模块化实现原理
07-01
webpack负责将commonjs和es6模块转化为浏览器认识的语句。 babel配置 { "presets": [ ["es2015", {"modules": false}], "stage-2" ] } 各模块均为es6模块的情况 项目结构： app.js(entry): import c from './c'; ...
JS前端模块化原理与实现方法详解
10-15
7. **模块打包工具**：在实际开发中，如Webpack、Rollup等工具用于转换和打包ES6模块或其他模块化规范，使其能在不同环境中运行。 8. **模块化最佳实践** - **单一职责原则**：每个模块只做一件事情，保持模块专注...
Javascript模块化机制实现原理详解
10-15
JavaScript模块化机制是编程实践中解决代码复用、组织和隔离的重要工具。在JavaScript早期，由于缺乏内置的模块系统，导致代码容易出现命名冲突和作用域问题。随着技术的发展，JavaScript社区提出了多种模块化规范，...
正弦波信号发生器设计教程.docx
06-22
正弦波信号发生器设计 本教程详细介绍了如何设计和实现一个正弦波信号发生器，涵盖了硬件实现和软件实现两种方法。通过硬件方法，我们使用函数发生器和示波器生成和观察正弦波信号；通过软件方法，我们使用Python和MATLAB生成和绘制正弦波信号。此外，教程还提供了一些扩展功能，以提高信号发生器的实用性和灵活性。无论您是电子工程师还是编程爱好者，都能从本教程中获得实用的技能和知识。
芯晞微 CSM2042 40V，低辍学，250 mA线性调节器 深圳市可芯电子有限公司.pdf
06-22
芯晞微 CSM2042 40V，低辍学，250 mA线性调节器 深圳市可芯电子有限公司.pdf
gaodetianqi.txt
06-22
gaodetianqi.txt
编程项目实战：基于JAVA的文件压缩与解压缩实践(源代码+论文)
最新发布
06-22
文件的压缩与解压缩，要能方便地进行，要完成的功能包括压缩功能，解压缩功能，选择文件路径，选择操作方案，选择新文件保存路径。此程序还要在压缩成功后显示被压缩文件的大小，并对非法操作给出提示。 用户可以选择文件进行压缩或解压缩操作，并选择生成保存路径，默认的保存路径为原文件目录，压缩的生成文件以原文件加.gzip后缀命名，在解压缩操作中，若输入文件不是gzip格式的压缩文件，则提示gzip文件格式不对。 程序的基本设计原则有：方便性原则、功能实用性原则和开放性原则等。程序设计时采用较好的压缩技术，能保证文件压缩的压缩比和可恢复性，确保程序有较长的生命周期。 本程序的总体目标是实现文件压缩与解压缩的便捷操作，因此需要有便捷的操作界面。 2.2使用的算法理论 2.2.1LZ77算法简介 这一算法是由Jacob Ziv和Abraham Lempel于 1977 年提出，所以命名为LZ77。这种算法模型也被称为“滑动字典”模型或“滑动窗口”模型。 压缩的模型如图1： 　　　 图1 压缩中的LZ77算法模型图 在最远匹配位置和当前处理位置之间是可以用来查找匹配的“字典”区域，随着压缩的进行，“
webpack热更新原理
06-08
Webpack热更新的原理就是利用webpack-dev-server启动一个WebSocket服务器，建立一个持久连接，然后将改变的模块信息通过WebSocket传递给客户端，并根据新的模块信息进行代码替换。因为Webpack热更新只替换了修改的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值