webpack专题之编译结果分析

为了对webpack有更加深入的理解，翻阅了一些资料，加上动手跑代码，慢慢弄清楚了webpack打包结果，也就是编译之后的结果，今天就来分析一下。

 

 

 

 

第一步 如上图，在src文件夹里写了两个js文件，代码很简单。

第二步，通过入口文件直接打包之后，看下打包之后的文件

 

 上面的代码比较杂，不容易看明白，然后自己分析，写了下它的核心代码

 

 

 

 webpack通过一个立即执行函数防止污染全局变量，模块对应的代码写在函数里，路径对应成属性名，函数对应属性值。通过require('入口模块')，来启动，于是写完require这个方法，这个函数就完成了。

模块代码通过module.exports导出，同时也支持exports，其实exposts的指针指向 modules.exports,就是一个对象。最终将模块代码执行的返回结果放到modules上返回就行了，在此之前先执行模块代码，与此同时将模块代码的结果放到缓存里，下次require时，缓存里有就直接拿缓存里的就行了。大致过程就是这样。