webpack打包原理和manifest文件分析

Myth丶恋晨 2022-05-27 13:26 339阅读 0赞

### 打包工具要解决的问题： ###

*  文件依赖管理 梳理文件之间的依赖关系
 *  资源加载管理 处理文件的加载顺序（先后时机）和文件的加载数量（合并、嵌入、拆分）
 *  效率与优化管理 提高开发效率，完成页面优化

webpack是一个现代Javascript应用的打包工具。它采用tool+plugins的结构。tool提供基础能力，即文件依赖管理和资源加载管理；在此基础上通过一系列的plugins来丰富打包工具的功能。

在webpack里，所有的文件都是模块。但是webpack只认识js模块，所以要通过一些loader插件把css、图片等文件转化成webpack认识的模块。

在webpack打包的文件中，模块是以模块函数来表示的。通过把文件转化成模块函数就可以控制模块的运行时间。即加载完成后不会立即执行，等到调用模块函数的时候才会执行。

### webpack的工作步骤如下： ###

1.  从入口文件开始递归地建立一个依赖关系图。
2.  把所有文件都转化成模块函数。
3.  根据依赖关系，按照配置文件把模块函数分组打包成若干个bundle。
4.  通过script标签把打包的bundle注入到html中，通过manifest文件来管理bundle文件的运行和加载。

打包的规则为：一个入口文件对应一个bundle。该bundle包括入口文件模块和其依赖的模块。按需加载的模块或需单独加载的模块则分开打包成其他的bundle。

除了这些bundle外，还有一个特别重要的bundle，就是manifest.bundle.js文件，即webpackBootstrap。这个manifest文件是最先加载的，负责解析webpack打包的其他bundle文件，使其按要求进行加载和执行。

## 打包代码解析 ##

### 首先分析一下manifest文件。 ###

#### 它包含三个主要变量，modules、installedModules和installedChunks。 ####

modules对象保存的是所有的模块函数。模块函数是webpack处理的基本单位，对应打包前的一个文件，形式为function(module, webpack\_exports, webpack\_require) \{…\}。所有的模块函数的索引值是连续编码的，如果第一个bundle里的模块函数的索引是0-7，第二个bundle里的模块函数的索引就从8开始，从而保证索引和模块函数一一对应。

installedModules对象保存的是模块对象。模块对象是运行模块函数得到的对象，是标准的Commonjs对象，其属性主要有模块id和exports对象。webpack的运行就是指执行模块函数得到模块对象的过程。

installedChunks保存的是异步加载对象的promise信息，结构为\[resolve, reject, promise\]。主要是用来标记异步加载模块。用promise便于异步加载模块的全局管理，如果加载超时就可以抛出js异常。

#### 包括三个主要函数webpackJsonpCallback，webpack\_require和webpack\_require.e ####

webpackJsonpCallback(chunkIds, moreModules, executeModules)\{…\}是bundle文件的包裹函数。bundle文件被加载后就会运行这个函数。函数的三个参数分别对应三种模块。chunkIds指的是需要单独加载的模块的id，对应installedChunks；executeModules指的是需要立即执行的模块函数的id，对应modules，一般是入口文件对应的模块函数的id；moreModules包括该bundle打包的所有模块函数。webpackJsonpCallback先把模块函数存到modules对象中；然后处理chunkIds，调用resolve来改变promise的状态；最后处理executeModules，把对应的模块函数转化成模块对象。

webpack\_require(moduleId)通过运行modules里的模块函数来得到模块对象，并保存到installedModules对象中。

webpack\_require.e(chunkId)通过建立promise对象来跟踪按需加载模块的加载状态，并设置超时阙值，如果加载超时就抛出js异常。如果不需要处理加载超时异常的话，就不需要这个函数和installedChunks对象，可以把按需加载模块当作普通模块来处理。

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36
 *  37
 *  38
 *  39
 *  40
 *  41
 *  42
 *  43
 *  44
 *  45
 *  46
 *  47
 *  48
 *  49
 *  50
 *  51
 *  52
 *  53
 *  54
 *  55
 *  56
 *  57
 *  58
 *  59
 *  60
 *  61
 *  62
 *  63
 *  64
 *  65
 *  66
 *  67
 *  68
 *  69
 *  70
 *  71
 *  72
 *  73
 *  74
 *  75
 *  76
 *  77
 *  78
 *  79
 *  80
 *  81
 *  82
 *  83
 *  84
 *  85
 *  86
 *  87
 *  88
 *  89
 *  90
 *  91
 *  92
 *  93
 *  94

### 然后分析普通的bundle文件。 ###

所有的代码都包裹在webpackJsonp函数中。

函数的第二个参数是一个数组，包含了打包的所有文件对应的模块函数。模块函数的标准形式为function(module, webpack\_exports, webpack\_require) \{…\}。模块函数里的代码是打包前的文件的代码做了相应的替换得到的。比如替换require为webpack\_require，替换以前的路径为新的路径，替换import为webpack\_require.e().then()等。模块函数通过webpack\_exports\[“a”\] = printMe之类的语句输出模块的exports。通过模块函数，把amd、cmd、commjs模块都统一为webpack的模块。

webpackJsonp([1],[
                /* 0 */
                (function(module, exports, __webpack_require__) { 
                    module.exports = __webpack_require__.p + "695368065150e6c5683c6642951c74ce.jpg";
                }),
                /* 1 */
                (function(module, __webpack_exports__, __webpack_require__) { 
     "use strict";
                    Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
                    // 加载依赖模块
                    var __WEBPACK_IMPORTED_MODULE_0__style_css__ = __webpack_require__(2);
                    ...
                    var __WEBPACK_IMPORTED_MODULE_1__katong_jpg___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__katong_jpg__);
                    ...
                    var __WEBPACK_IMPORTED_MODULE_2__say_js__ = __webpack_require__(7);
                    // welcome.js文件里的代码
                    var elDiv1 = document.createElement('div');
                    ...
                    // 把原来的url替换成了上面加载的图片
                    elImg.src = __WEBPACK_IMPORTED_MODULE_1__katong_jpg___default.a;
                    ...
                    // 把import替换成用promise实现的__webpack_require__.e()来完成异步按需加载
                    btn.onclick = function() { 
                        __webpack_require__.e(0).then(__webpack_require__.bind(null, 8)).then(m => {
                            m.default();
                        });
                    };
                    // 把原来的say()函数替换成上面加载的函数
                    Object(__WEBPACK_IMPORTED_MODULE_2__say_js__["a"])();
                }),
                /* 2 */
                (function(module, exports, __webpack_require__) { 
                    ...
                }),
                ...
                /* 6 */
                (function(module, exports) { 
                    ...
                }),
                /* 7 */
                (function(module, __webpack_exports__, __webpack_require__) { 
                    // 模块输出
                    __webpack_exports__["a"] = printMe;
                    function printMe() { 
                        ...
                    }
                })
            ],[1]);

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36
 *  37
 *  38
 *  39
 *  40
 *  41
 *  42
 *  43
 *  44
 *  45
 *  46
 *  47
 *  48

## 实例 ##

上面分析对应的代码在[https://github.com/lancewux/webpack-analyze][https_github.com_lancewux_webpack-analyze]中，通过运行工程中的代码，可以更好地理解上面的分析

## 下面是webpack配置时的一些概念 ##

#### Entry ####

入口文件是webpack建立依赖图的起点。

#### Output ####

Output配置告诉webpack怎么处理打包的代码。

#### Hot Module Replacement ####

热模块替换功能可以在不刷新所有文件的情况下实现单独跟新某个模块。

#### Tree Shaking ####

去除无用代码，比如某个js文件里的函数并没有被使用，这段函数代码在打包时将会被去掉。

#### Code Splitting ####