webpack最简单的入门教程里bundle.js之运行单步调试的原理解析

读这篇文章的朋友，请确保对webpack有最基础的认识。

您能够阅读我前一篇文章：Webpack 10分钟入门 来在本地运行一个Webpack的hello world项目。https://www.toutiao.com/i6612879647568822788/

我这里能够在回顾一下这个web pack的hello world项目。

用webpack打包以后，项目文件夹里包含了这些资源：

index.html的源代码很简单，就包含了一个webpack打包后生成的bundle.js文件：

那么运行时，Hello，Jerry的字符串是如何经过bundle.js打印出来的呢？

这就是本文要阐述的内容。咱们能够从bundle.js第一行设置断点，而后开始调试：

把咱们web工程里定义的两个module注入到__webpack_require__.m里：

由于咱们在webpack.config.js里定义的入口模块为main.js:

在bundle.js里此处进行运行时加载：return webpack_require(webpack_require.s = "./main.js");

__webpack_require__函数原本就是在bundle.js里定义的：

首先检查main.js是否已经装载在内存里了：

对于我这个例子，显然没有，因此从头开始装载main.js.首先建立一个对象，id为./main.js:

而后执行这个module的函数，即咱们实如今main.js里的javascript代码。固然通过webpack的加工，main.js里的代码已经经过eval的方式嵌入到bundle.js里了。

原始的main.js代码：

上述代码被webpack转换以后，main.js里的源代码被替换成了__webpack_require__:

从这里也能看出webpack递归处理module的思路，从webpack.config.js定义的entry module，即main.js出发，在main.js遇到须要require其余mobule的地方，递归进入__webpack_require__:

require("print.js")的执行过程，就是把print.js里定义的print函数自己，赋给module的exports属性：

print.js module装载完毕以后，就能够执行了。

注意第2行代码执行完毕后，html页面就出现了指望的字符：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":