# webpack 原理

伪代码

(function (modules) {
  // 缓存已加载的模块
  var installedModules = {};

  // 加载依赖
  function require(moduleId) {
    // 如果当前模块已经加载过，则直接返回 (也避免了模块之间相互引用，重复加载的情况)
    if (installedModules[moduleId]) {
      return installedModules[mudoleId].exports;
    }

    var exports = {};
    // 根据模块的key调用执行模块代码
    modules[moduleId].call(exports);

    return exports;
  }
  // 入口
  return require("./index.js");
})({
  "./index.js": function () {}, // 入口文件
  "./src/minus.js": function (exports) {
    exports.minus = void 0;
    var minus = function () {};
    exports.minus = minus;
  }, // 依赖的模块
  "./src/add.js": function (exports) {
    exports["default"] = add;
    function add() {
      //
    }
  }, // 依赖的模块
});

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

# 打包优化

详细请点击webpack 配置解析 (opens new window)

webpack 打包默认会将所有模块打到一个 chunk 中，如果代码中有动态导入模块：

import("./asyncModule").then((res) => {
  console.log(res);
});

1
2
3

则动态导入的代码块会被单独打到一个 chunks 中