深入理解webpack打包机制

<span style="color: #0000ff">var index2 = webpack_require(<span style="color: #800080">3<span style="color: #000000">);
<span style="color: #0000ff">var util = webpack_require(<span style="color: #800080">0<span style="color: #000000">);

console.log(index2);
console.log(util);

}),<span style="color: #008000">/<span style="color: #008000"> 3 <span style="color: #008000">/<span style="color: #000000">
(function(module,__webpack_require__) {

<span style="color: #0000ff">var util = __webpack_require__(<span style="color: #800080">0<span style="color: #000000">);
console.log(util);
module.exports = <span style="color: #800000">"<span style="color: #800000">index 2<span style="color: #800000">"<span style="color: #000000">;

}) ]);

1. 首先 webpack 将所有模块(可以简单理解成文件)包裹于一个函数中，并传入默认参数，这里有三个文件再加上一个入口模块一共四个模块，将它们放入一个数组中，取名为 modules，并通过数组的下标来作为 moduleId。
2. 将 modules 传入一个自执行函数中，自执行函数中包含一个 installedModules 已经加载过的模块和一个模块加载函数，最后加载入口模块并返回。
3. __webpack_require__模块加载，先判断 installedModules 是否已加载，加载过了就直接返回 exports 数据，没有加载过该模块就通过modules[moduleId].call(module.exports,__webpack_require__)执行模块并且将 module.exports 给返回。

上述过程还是比较简单的，但有些点需要注意：

1、每个模块只会加载一次，所以重复加载的模块只会执行一次，加载过的模块会放到 installedModules，下次需要需要该模块的值就直接从里面拿了。

2、模块的id 直接通过数组下标去一一对应的，这样能保证简单且唯一，通过其它方式比如文件名或文件路径的方式就比较麻烦，因为文件名可能出现重名，不唯一，文件路径则会增大文件体积，并且将路径暴露给前端，不够安全。

3、modules[moduleId].call(module.exports,__webpack_require__)保证了模块加载时 this 的指向 module.exports 并且传入默认参数

二、多入口文件如何进行代码切割

我们在开发一些较复杂的应用时，如果没有对代码进行切割，将第三方库(jQuery)或框架(React) 和业务代码全部打包在一起，就会导致用户访问页面速度很慢，不能有效利用缓存。

（编辑：网站开发网_盐城站长网 ）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!