webpack最简单的入门教程里bundle.js之运行单步调试的原理解析-阿里云开发者社区

开发者社区> 汪子熙> 正文

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的原创文章,请关注公众号"汪子熙":

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
+ 订阅

官网链接