深入理解webpack打包机制
})([ module.exports = <span style="color: #800000">"<span style="color: #800000">Hello World<span style="color: #800000">"<span style="color: #000000">; }),<span style="color: #008000">/<span style="color: #008000"> 1 <span style="color: #008000">/<span style="color: #000000"> module.exports = __webpack_require__(<span style="color: #800080">2<span style="color: #000000">); }),<span style="color: #008000">/<span style="color: #008000"> 2 <span style="color: #008000">/<span style="color: #000000"> <span style="color: #0000ff">var index2 = webpack_require(<span style="color: #800080">3<span style="color: #000000">); console.log(index2); }),<span style="color: #008000">/<span style="color: #008000"> 3 <span style="color: #008000">/<span style="color: #000000"> <span style="color: #0000ff">var util = __webpack_require__(<span style="color: #800080">0<span style="color: #000000">); }) ]);
上述过程还是比较简单的,但有些点需要注意: 1、每个模块只会加载一次,所以重复加载的模块只会执行一次,加载过的模块会放到 installedModules,下次需要需要该模块的值就直接从里面拿了。 2、模块的id 直接通过数组下标去一一对应的,这样能保证简单且唯一,通过其它方式比如文件名或文件路径的方式就比较麻烦,因为文件名可能出现重名,不唯一,文件路径则会增大文件体积,并且将路径暴露给前端,不够安全。 3、modules[ 二、多入口文件如何进行代码切割 (编辑:衡阳站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |