webpack模块化的原理

最新推荐文章于 2024-06-04 23:25:11 发布

gogo2027

最新推荐文章于 2024-06-04 23:25:11 发布

阅读量258

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/gogo2027/article/details/127249820

版权

webpack 中实现模块化的核心就是函数，无论是commonjs模块化还是es 模块都是通过该函数来导入的。并且利用立即执行函数的特点实现了作用域的封闭避免了全局变量的污染，非常的巧妙。

摘要由CSDN通过智能技术生成

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函数，实现了导入模块的作用。

打包结果中删去了一些注释和暂时用不要的代码，可以很明显的看出来实现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__("./src/index.js");

ES Module

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

__webpack_require__.r

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

// define __esModule on exports
__webpack_require__.r = function (exports) {
     
   if (

最低0.47元/天解锁文章