webpack模块化原理

我们通常将webpack称作模块打包机，今天我们就来看看webpack到底如何实现模块化的

一句话概括，webpack通过自执行函数启动，然后通过webpack自定义的exports和require实现模块化。

现在，我们定义两个文件a.js、b.js以及一个入口文件app.js。假设a.js依赖b.js，app.js依赖a.js。配置webpack如下：

const path = require('path');

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

打包之后在dist文件夹下生成文件main.js

我们来看看下main.js中具体做了什么：

main.js实际上就是一个自执行函数，形式如下

(function(modules){})([])

这个自执行函数的函数体中主要包含三大部分：

//以key-value形式保存所有要用的模块列表
var modules； 
// 所有已经加载的模块，作为缓存表
var installedModules；
// 加载模块的函数，等同于commonJs的require
function webpack_require(moduleId);

我们一个一个来看，先看下modules，它是一个对象，结构如下：

var modules = {
  './a.js': generated_a,
  './b.js': generated_b,
  './app.js': generated_app
}

可以看到，它是以键值对的形式，包含所有用到的模块，其中键是文件路径，值是一个函数。这个函数把每个模块的生成代码包裹住，使它成为一个局部作用域，防止内部变量暴露。函数的形式如下：

function generated_module(module, exports, webpack_require) {
   // 模块的具体代码......
}

模块的具体代码是指webpack生成后的代码，也就是webpack对模块的require和export改写后的代码。对于源代码中有module.export的，当我们运行这个generated_module函数时，传入了module参数，这个时候源代码中export的东西就被挂在了传入参数的module.export上。这就完成了模块的执行，并且将模块的export内容保存到了模块管理系统中。

来个具体的generated_app函数看看：

function generated_app(module, exports, webpack_require) {
  var mA_imported_module = webpack_require('./mA.js');
  //其他app.js中内容
}

可以看到，函数将源文件中的require改写了，变成了webpack_require。为什么要进行改写呢？这是因为无论是require/exports，或是ES6风格的import/export，都无法被JavaScript解释器直接执行，它需要依赖模块管理系统，把这些抽象的关键词具体化。也就是说，webpack_require就类似于CommonJs中require的具体实现，它能够动态地载入模块a，并且将结果返回给app。所以webpack加载的关键就是webpack_require函数。

下面来看看webpack_require的具体实现：

var installedModules = {};

function webpack_require(moduleId) {
  // 如果模块已经加载过了，直接从Cache中读取。
  if (installedModules[moduleId]) {
    return installedModules[moduleId].exports;
  }

  // 创建新模块并添加到installedModules。
  var module = installedModules[moduleId] = {
    id: moduleId,
    exports: {}
  };
  
  // 加载模块，即运行模块的生成代码，
  modules[moduleId].call(
    module.exports, module, module.exports, webpack_require);
  
  return module.exports;
}

这段代码中的关键变量是installedModules、module。这两个是什么玩意呢？module 就是模块的对象，它主要包含模块的id和exports，这个module就是我们要传入到generated_module函数中的参数module。installedModules 相当于一个缓存，当我们require一个模块时，会先判断该模块是否在缓存之中，如果存在则直接返回该模块的exports属性；否则会创建一个新的模块对象并添加到缓存中，然后加载执行该模块，返回我们从源代码中拿到的exports的内容。注意这里的modules就是就是前面定义的以key-value形式存在的总列表，通过 modules[moduleId].call 的形式调用每个模块的generated_module函数。

所以，理解了整个模块管理系统的过程，实际上我们只需要执行一句话

return webpack_require('./app.js')

即加载入口模块app.js，运行这个函数时，就会运行generated_app函数。这个函数调用webpack_require('./a.js')，进而运行generated_a函数，调用webpack_require('./b.js')，接着调用generated_b函数。webpack就是以这样递归的形式加载所有依赖的模块，并将加载过的模块放到installedModule中缓存。