前言
之前我一直不太明白webpack的模块引入机制。正好看到了bundle.js文件的解析才更加了解一些
首先要知道所有模块的内容都被整合到一个文件中了。
你可能会说这样做不就是违背了模块化的思想吗？
实际上并没有，因为内部模块化的实现是基于函数的，也就说不通模块内容被封锁在不同的函数中
这样每一个函数都是一个函数作用域，形成了一个私有的作用域。
另一方面，浏览器没有像Node.js那样对于模块化定义了Commonjs规范，所以需要在浏览器中模拟Node的模块加载机制
分析
先给出一个整体代码
(
// webpackBootstrap 启动函数
// modules 即为存放所有模块的数组，数组中的每一个元素都是一个函数
function (modules) {
// 安装过的模块都存放在这里面
// 作用是把已经加载过的模块缓存在内存中，提升性能
var installedModules = {};
// 去数组中加载一个模块，moduleId 为要加载模块在数组中的 index
// 作用和 Node.js 中 require 语句相似
function __webpack_require__(moduleId) {
// 如果需要加载的模块已经被加载过，就直接从内存缓存中返回
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 如果缓存中不存在需要加载的模块，就新建一个模块，并把它存在缓存中
var module = installedModules[moduleId] = {
// 模块在数组中的 index
i: moduleId,
// 该模块是否已经加载完毕
l: false,
// 该模块的导出值
exports: {}
};
// 从 modules 中获取 index 为 moduleId 的模块对应的函数
// 再调用这个函数，同时把函数需要的参数传入
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 把这个模块标记为已加载
module.l = true;
// 返回这个模块的导出值
return module.exports;
}
// Webpack 配置中的 publicPath，用于加载被分割出去的异步代码
__webpack_require__.p = "";
// 使用 __webpack_require__ 去加载 index 为 0 的模块，并且返回该模块导出的内容
// index 为 0 的模块就是 main.js 对应的文件，也就是执行入口模块
// __webpack_require__.s 的含义是启动模块对应的 index
return __webpack_require__(__webpack_require__.s = 0);
})(
// 所有的模块都存放在了一个数组里，根据每个模块在数组的 index 来区分和定位模块
[
/* 0 */
(function (module, exports, __webpack_require__) {
// 通过 __webpack_require__ 规范导入 show 函数，show.js 对应的模块 index 为 1
const show = __webpack_require__(1);
// 执行 show 函数
show('Webpack');
}),
/* 1 */
(function (module, exports) {
function show(content) {
window.document.getElementById('app').innerText = 'Hello,' + content;
}
// 通过 CommonJS 规范导出 show 函数
module.exports = show;
})
]
);
整体代码分三个部分
1.主体执行代码webpackBootstrap（webpack启动程序）
2.__webpack_require__函数
3.模块数组（作为参数传递进去）
__webpack_require__函数
这个函数可以说是核心函数，它的作用是什么？
function __webpack_require__(moduleId) {
// 如果需要加载的模块已经被加载过，就直接从内存缓存中返回
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 如果缓存中不存在需要加载的模块，就新建一个模块，并把它存在缓存中
var module = installedModules[moduleId] = {
// 模块在数组中的 index
i: moduleId,
// 该模块是否已经加载完毕
l: false,
// 该模块的导出值
exports: {}
};
// 从 modules 中获取 index 为 moduleId 的模块对应的函数
// 再调用这个函数，同时把函数需要的参数传入
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 把这个模块标记为已加载
module.l = true;
// 返回这个模块的导出值
return module.exports;
}
传入的参数是一个moduleID，由于传入webpackBootstrap的参数是一个模块数组，模块数组的index就是moduleID
1.函数内第一个功能是分析这个模块有没有被加载过
判断依据是一个所有模块共同拥护的对象中是否存在
var installedModules = {};
如果存在就将对象中已经加载过的内容返回
2.如果没有加载过
自然是要为这个这个模块设置一些信息
比如说模块id，是否已经加载过，以及最为重要的模块加载需要暴露出的内容（这相当于一个进程执行前创建的PCB）
这里要注意一下模块加载是一次性执行的，export暴露的出的内容也是一个值拷贝
之后就是将这个模块的内容（对应就是一个函数）执行，而且是基于module
最终将这个模块返回回去
从一个模块开始的执行流程
首先是从模块数组序号为0的开始调用__webpack_require__（）函数
如果这个函数内部又调用其他模块，那么采取同样的策略
执行完毕之后，可以在当前模块访问到其他模块暴露的内容
后面还有一个异步加载时的代码，放在另外一篇
