webpack - 基础打包实现

红太狼 2023-09-26 08:47 46阅读 0赞

**目录**

webpack基础打包

webpack函数打包

分析webpack基础打包后产出的bundle.js

自定义webpack函数

Compiler类实现

实现代码分享

--------------------

### webpack基础打包 ###

webpack基础打包指的是不依赖于外部loader、plugin，只依靠webpack自身，对JS文件进行的打包操作。

下面我们将分析和实现webpack@5.74.0的基础打包逻辑。

### webpack函数打包 ###

webpack除了可以使用webpack命令打包，还支持使用webpack暴露的函数进行打包。

首先，我们建立一个项目webpack\_advance，将其变为node项目

![bdc9aa40e4ba49d7ae8d5b33b4e9bbc8.png][]

然后，安装webpack

![b687a171e38d4e328e5fe979fa9dcf54.png][]

注意，这里不安装webpack-cli，因为我们不使用webpack命令执行打包，而是使用webpack暴露的函数进行打包。

项目目录结构以及代码如下

![5399b2ad0fca4a4da1efeb790878d7c7.png][]

我们在项目根目录下定义一个build.js来使用webpack函数进行打包

![9d7e92a01c0d40a7ade6964fef287640.png][]

运行build.js执行打包操作

![8400ce8bc4084a64a8ee2d8a887279e0.png][]

将打包后文件引入html中检查，发现没问题

![7051dee542fc4c2fa888d89d74aafcd2.png][]

### 分析webpack基础打包后产出的bundle.js ###

我们如果想要自己实现一个webpack基础打包器，则必须要了解webpack基础打包的逻辑，而分析打包产出的bundle.js是了解webpack基础打包逻辑的重要途径。

打包产出后的bundle.js中存在非常多的注释，吓人，因此我们去掉无意义的分隔注释，然后干净的代码如下所示

(() => {
      // webpackBootstrap
      var __webpack_modules__ = {
        "./src/index.js": (
          __unused_webpack_module,
          __unused_webpack_exports,
          __webpack_require__
        ) => {
          eval(
            'const { sum, sub } = __webpack_require__(/*! ./js/utils */ "./src/js/utils.js");\r\n\r\nconsole.log(sum(1, 2));\r\nconsole.log(sub(1, 2));\r\n\n\n//# sourceURL=webpack://webpack_advance/./src/index.js?'
          );
        },
    
        "./src/js/utils.js": (module) => {
          eval(
            "const sum = (a, b) => a + b;\r\nconst sub = (a, b) => a - b;\r\n\r\nmodule.exports = {\r\n  sum,\r\n  sub,\r\n};\r\n\n\n//# sourceURL=webpack://webpack_advance/./src/js/utils.js?"
          );
        },
      };
    
      // The module cache
      var __webpack_module_cache__ = {};
    
      // The require function
      function __webpack_require__(moduleId) {
        // Check if module is in cache
        var cachedModule = __webpack_module_cache__[moduleId];
        if (cachedModule !== undefined) {
          return cachedModule.exports;
        }
        // Create a new module (and put it into the cache)
        var module = (__webpack_module_cache__[moduleId] = {
          // no module.id needed
          // no module.loaded needed
          exports: {},
        });
    
        // Execute the module function
        __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    
        // Return the exports of the module
        return module.exports;
      }
    
      // startup
      // Load entry module and return exports
      // This entry module can't be inlined because the eval devtool is used.
      var __webpack_exports__ = __webpack_require__("./src/index.js");
    })();

我们将代码进行折叠

![df40ba64d82b45c6baa903b10e9dae40.png][]

发现，webpack打包后产出的bundle.js内容其实就是一个立即执行函数（IFIE），并且这个立即执行函数并未接收外部参数（PS：这和webpack4的实现不同）。

立即执行函数体中由四块内容组成：

*  \_\_webpack\_modules\_\_ 对象定义
 *  \_\_webpack\_module\_cache\_\_ 对象定义
 *  \_\_webpack\_require\_\_ 函数定义
 *  var \_\_webpack\_exports\_\_ = \_\_webpack\_require\_\_("./src/index.js") 执行语句

如果bundle.js执行的话，则立即执行函数体中先完成变量和函数的声明以及初始化，然后执行下面代码

![6c16dd9d4b5840e584e7454324bcc535.png][]

而\_\_webpack\_require\_\_函数首次调用时的入参取值其实就是webpack.config.js配置的entry

![a77bb28c7d3e4b43a63a147873f9a014.png][]

之后\_\_webpack\_require\_\_函数内部会先去\_\_webpack\_module\_cache\_\_缓存对象中查找./src/index.js模块是否被加载过，若被加载过，则直接从\_\_webpack\_module\_cache\_\_取出加载结果返回

![08127338cc2c4707b5429a253aea4003.png][]

若\_\_webpack\_module\_cache\_\_缓存中不能存在./src/index.js模块，则取出**\_\_webpack\_modules\_\_\['./src/index.js'\]**对应的函数来执行

![aea20e7ec7674c9fafbb133cb17fa467.png][]

即执行下面函数

![455684c7081640daab99ed0d849c6123.png][]

而在执行过程中时，又调用了\_\_webpack\_require\_\_('./src/utils.js')，于是又去\_\_webpack\_module\_cache\_\_缓存中查找./src/utils.js模块是否已经加载过，发现没有，则又继续取**\_\_webpack\_modules\_\_\['./src/utils.js'\]**对应的函数来执行

![7a5020e9c75b431992daa258e24cd2f3.png][]

而此次执行过程中，会返回一个执行结果，最终作为\_\_webpack\_require\_\_函数的返回值，并缓存在\_\_webpack\_module\_cache\_\_中

![f9d7aab5832041c0ba640b9439eeac79.png][]

因此，通过以上执行流程的分析，我们可以知道，源码中的使用的模块化导入语法，如commonjs规范的require，最终会被替换为\_\_webpack\_require\_\_，而\_\_webpack\_require\_\_函数的核心是：通过eval来执行已变为字符串的JS模块代码，并缓存缓存JS模块的导出结果

![7d420a82b8fc432e825f5be593405542.png][]

如果我们多打包几个不同项目代码，会发现基础打包输出的bundle.js的内容中，改变的只有\_\_webpack\_modules\_\_，里面保存的是模块依赖图中的源文件的相对路径和字符串格式源代码

![bc6854ed49bc4a4ca7fe0b57d47faa28.png][]

其余部分如\_\_webpack\_module\_cache\_\_、\_\_webpack\_require\_\_定义是不变的，而var \_\_webpack\_exports\_\_ = \_\_webpack\_require\_\_("**./src/index.js**");中\_\_webpack\_require\_\_首次调用的入参会随着webpack.config.js的entry改变而改变。

因此webpack基础打包其实就是在一个bundle.js模板中中嵌入相应数据，如下图所示

![1f125eaaa46a425b877a1aee89e365f1.png][]

### 自定义webpack函数 ###

我们选择模拟实现webpack函数打包，因为相比webpack命令打包实现起来更加方便一点。

首先，我们改变引入的webpack包为我们自定义的，如下图所示

![e208defa5e044e3abc544b75895c296b.png][]

然后，为了满足webpack函数的返回值设计，我们需要定义一个Compiler类，将其实例作为webpack函数的返回值

![39de7df07bde4b9a8129cc63faf4cc1e.png][]

Compiler类就是实现webpack基础打包的关键，下面是Compiler类的基础结构实现，构造函数接收一个config入参，存在一个实例方法run，我们需要在run方法中开启基础打包流程

![f2d450e03a7b40c3b624c1a5abda35e6.png][]

### Compiler类实现 ###

Compiler类用于实现webpack基础打包核心逻辑的，它需要做的事情很简单：

> 从entry入口模块开始进行模块依赖分析，将依赖图中所有模块的相对路径和源码字符串（需要替换源码字符串中require为\_\_webpack\_require\_\_）获取出来，形成键值对存入一个对象中，最后将该对象数据填充到bundle.js模板中

虽然听上去很简单，但是实现起来却不容易。

首先基础打包的主流程逻辑应该写在Complier类的实例方法run中，流程逻辑如下图所示

![f010d126636b487da5d7d5789994844c.png][]

run中首先调用denpendenciesAnalyze方法从入口模块进行模块依赖分析，并生成模块相对路径和模块源码字符串组成的键值对存入this.module中

![1a83e824c5524cf8b1d713820d251c64.png][]

得到this.module对象后，我们需要将其填充到打包文件模板中，这里没有使用ejs模板，因为ejs太.....一言难尽了，我这里使用模板字符串\`\`搞得，虽然排版难看了一点，但是使用起来得心应手

![6e8318f7dfc64c8e8a658206afd0cd9d.png][]

得到填充数据的打包文件模板源码后，根据webpack.config.js配置的output来创建打包目录和打包文件

![153b89d9b68c45a8a161a74197d3c346.png][]

执行我们自己实现的webpack函数来进行打包

![d6522e774ddf4a9886962fd754a5cb30.gif][]

此时打包后的bundle.js内容如下

(() => {
        // webpackBootstrap
        var __webpack_modules__ = {
          
        "./src/index.js": (
            __unused_webpack_module,
            __unused_webpack_exports,
            __webpack_require__
          ) => {
            eval("const {\n  sum,\n  sub\n} = __webpack_require__(\"./src/js/utils.js\");\n\nconsole.log(sum(1, 2));\nconsole.log(sub(1, 2));");
          },
        
        "./src/js/utils.js": (
            module,
            __unused_webpack_exports,
            __webpack_require__
          ) => {
            eval("const {\n  a\n} = __webpack_require__(\"./src/js/common.js\");\n\nconsole.log(a);\n\nconst sum = (a, b) => a + b;\n\nconst sub = (a, b) => a - b;\n\nmodule.exports = {\n  sum,\n  sub\n};");
          },
        
        "./src/js/common.js": (
            module,
            __unused_webpack_exports,
            __webpack_require__
          ) => {
            eval("module.exports = {\n  a: 1\n};");
          },
        
        };
        // The module cache
        var __webpack_module_cache__ = {};
        // The require function
        function __webpack_require__(moduleId) {
          // Check if module is in cache
          var cachedModule = __webpack_module_cache__[moduleId];
          if (cachedModule !== undefined) {
            return cachedModule.exports;
          }
          // Create a new module (and put it into the cache)
          var module = (__webpack_module_cache__[moduleId] = {
            // no module.id needed
            // no module.loaded needed
            exports: {},
          });
    
          // Execute the module function
          __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
    
          // Return the exports of the module
          return module.exports;
        }
        // startup
        // Load entry module and return exports
        // This entry module can't be inlined because the eval devtool is used.
        var __webpack_exports__ = __webpack_require__("./src/index.js");
      })();

### 实现代码分享 ###

[qwx427219/webpack5\_base: webpack5基础打包能力模拟实现 (github.com)![icon-default.png?t=M85B][icon-default.png_t_M85B]https://github.com/qwx427219/webpack5\_base][qwx427219_webpack5_base_ webpack5_ _github.com_icon-default.png_t_M85B_icon-default.png_t_M85B_https_github.com_qwx427219_webpack5_base]

[bdc9aa40e4ba49d7ae8d5b33b4e9bbc8.png]: https://img-blog.csdnimg.cn/bdc9aa40e4ba49d7ae8d5b33b4e9bbc8.png
[b687a171e38d4e328e5fe979fa9dcf54.png]: https://img-blog.csdnimg.cn/b687a171e38d4e328e5fe979fa9dcf54.png
[5399b2ad0fca4a4da1efeb790878d7c7.png]: https://img-blog.csdnimg.cn/5399b2ad0fca4a4da1efeb790878d7c7.png
[9d7e92a01c0d40a7ade6964fef287640.png]: https://img-blog.csdnimg.cn/9d7e92a01c0d40a7ade6964fef287640.png
[8400ce8bc4084a64a8ee2d8a887279e0.png]: https://img-blog.csdnimg.cn/8400ce8bc4084a64a8ee2d8a887279e0.png
[7051dee542fc4c2fa888d89d74aafcd2.png]: https://img-blog.csdnimg.cn/7051dee542fc4c2fa888d89d74aafcd2.png
[df40ba64d82b45c6baa903b10e9dae40.png]: https://img-blog.csdnimg.cn/df40ba64d82b45c6baa903b10e9dae40.png
[6c16dd9d4b5840e584e7454324bcc535.png]: https://img-blog.csdnimg.cn/6c16dd9d4b5840e584e7454324bcc535.png
[a77bb28c7d3e4b43a63a147873f9a014.png]: https://img-blog.csdnimg.cn/a77bb28c7d3e4b43a63a147873f9a014.png
[08127338cc2c4707b5429a253aea4003.png]: https://img-blog.csdnimg.cn/08127338cc2c4707b5429a253aea4003.png
[aea20e7ec7674c9fafbb133cb17fa467.png]: https://img-blog.csdnimg.cn/aea20e7ec7674c9fafbb133cb17fa467.png
[455684c7081640daab99ed0d849c6123.png]: https://img-blog.csdnimg.cn/455684c7081640daab99ed0d849c6123.png
[7a5020e9c75b431992daa258e24cd2f3.png]: https://img-blog.csdnimg.cn/7a5020e9c75b431992daa258e24cd2f3.png
[f9d7aab5832041c0ba640b9439eeac79.png]: https://img-blog.csdnimg.cn/f9d7aab5832041c0ba640b9439eeac79.png
[7d420a82b8fc432e825f5be593405542.png]: https://img-blog.csdnimg.cn/7d420a82b8fc432e825f5be593405542.png
[bc6854ed49bc4a4ca7fe0b57d47faa28.png]: https://img-blog.csdnimg.cn/bc6854ed49bc4a4ca7fe0b57d47faa28.png
[1f125eaaa46a425b877a1aee89e365f1.png]: https://img-blog.csdnimg.cn/1f125eaaa46a425b877a1aee89e365f1.png
[e208defa5e044e3abc544b75895c296b.png]: https://img-blog.csdnimg.cn/e208defa5e044e3abc544b75895c296b.png
[39de7df07bde4b9a8129cc63faf4cc1e.png]: https://img-blog.csdnimg.cn/39de7df07bde4b9a8129cc63faf4cc1e.png
[f2d450e03a7b40c3b624c1a5abda35e6.png]: https://img-blog.csdnimg.cn/f2d450e03a7b40c3b624c1a5abda35e6.png
[f010d126636b487da5d7d5789994844c.png]: https://img-blog.csdnimg.cn/f010d126636b487da5d7d5789994844c.png
[1a83e824c5524cf8b1d713820d251c64.png]: https://img-blog.csdnimg.cn/1a83e824c5524cf8b1d713820d251c64.png
[6e8318f7dfc64c8e8a658206afd0cd9d.png]: https://img-blog.csdnimg.cn/6e8318f7dfc64c8e8a658206afd0cd9d.png
[153b89d9b68c45a8a161a74197d3c346.png]: https://img-blog.csdnimg.cn/153b89d9b68c45a8a161a74197d3c346.png
[d6522e774ddf4a9886962fd754a5cb30.gif]: https://img-blog.csdnimg.cn/d6522e774ddf4a9886962fd754a5cb30.gif
[icon-default.png_t_M85B]: https://csdnimg.cn/release/blog_editor_html/release2.2.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M85B
[qwx427219_webpack5_base_ webpack5_ _github.com_icon-default.png_t_M85B_icon-default.png_t_M85B_https_github.com_qwx427219_webpack5_base]: https://github.com/qwx427219/webpack5_base