从Webpack打包后的文件分析导入的原理

主流框架中，不论是 React 还是 Vue，都是使用 Webpack 进行资源的打包，这篇文章我们试着分析打包后的 bundle 文件来了解下其是如何进行静态和动态导入的。

文章目录结构如下：

• bundle 文件分析

• 静态导入文件

• 动态导入文件

bundle 文件分析

下面是代码整体的目录结构：

markdown

入口文件 main.js

import a from './a'
import b from './b'

a.js

const asyncText = 'async'
export default asyncText

b.js

import c from './c'
const b = 'b'
export default b

c.js

export const c = 1

打包后的 bundle 文件过于冗长，删繁就简之后让我们看看他的主体部分：

我们看到整个文件就是一个自执行函数，所传入的参数是经过分析过后的文件路径，我们先来认识两个参数和一个函数：

• modules：缓存 module 代码块，每个 module 有一个 id，开发环境默认以 module 所在文件的文件名标识，生产环境默认以一个数字标识。modules 是一个 object， key 为 module id，value 为对应 module 的源代码块。

• installedModules：缓存已经加载过的 module，简单理解就是已经运行了源码中 import a from 'xxx' 这样的语句。installedModules 是一个 object， key 为 module id，value 为对应 module 导出的变量。

• __webpack_require__: 根据传入的 moduleId，判断是否加载过该模块，加载过则直接返回，未加载过则执行该模块代码。

静态导入文件

根据上面的内容分析，整个自执行函数执行的时候，传入的参数是根据我们文件内容生成的路径，参数内容如下。

{
  "./src/a.js":
    function (module, __webpack_exports__, __webpack_require__) {
    "use strict";
    __webpack_require__.r(__webpack_exports__);
    const asyncText = "async";
    __webpack_exports__["default"] = asyncText;
  },
  "./src/b.js":
    function (module, __webpack_exports__, __webpack_require__) {
    "use strict";