我们通常将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中缓存。
网友评论