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的原创文章,请关注公众号"汪子熙":
webpack最简单的入门教程里bundle.js之运行单步调试的原理解析的更多相关文章
- MongoDB最简单的入门教程之三 使用Java代码往MongoDB里插入数据
前两篇教程我们介绍了如何搭建MongoDB的本地环境: MongoDB最简单的入门教程之一 环境搭建 以及如何用nodejs读取MongoDB里的记录: MongoDB最简单的入门教程之二 使用nod ...
- MongoDB最简单的入门教程之二 使用nodejs访问MongoDB
在前一篇教程 MongoDB最简单的入门教程之一 环境搭建 里,我们已经完成了MongoDB的环境搭建. 在localhost:27017的服务器上,在数据库admin下面创建了一个名为person的 ...
- MongoDB最简单的入门教程之四:使用Spring Boot操作MongoDB
Spring Boot 是一个轻量级框架,可以完成基于 Spring 的应用程序的大部分配置工作.Spring Boot的目的是提供一组工具,以便快速构建容易配置的Spring应用程序,省去大量传统S ...
- MongoDB最简单的入门教程之五-通过Restful API访问MongoDB
通过前面四篇的学习,我们已经在本地安装了一个MongoDB数据库,并且通过一个简单的Spring boot应用的单元测试,插入了几条记录到MongoDB中,并通过MongoDB Compass查看到了 ...
- 《Visual C++ 2010入门教程》系列六:VC2010常见调试技术
<Visual C++ 2010入门教程>系列六:VC2010常见调试技术 犹豫了好久,最终还是决定开始这一章,因为我不清楚到底有没有必要写这样的一章,是应该在这里说明一些简单的调试方 ...
- React 最简单的入门教程
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual D ...
- 相比之前其他几个入门的, 推荐: 简单vue2 入门教程
注意:Vue.js 不支持 IE8 及其以下 IE 版本. 具体可以看下 http://www.runoob.com/vue2/vue-tutorial.html 以下是学习过程 Vue ...
- Bootstrap简单HelloWorld入门教程
这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点.看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用boots ...
- Java动态代理之InvocationHandler最简单的入门教程
网上关于Java的动态代理,Proxy和InvocationHandler这些概念有讲解得非常高深的文章.其实这些概念没有那么复杂.现在咱们通过一个最简单的例子认识什么是InvocationHandl ...
随机推荐
- 一个MySQL中两表联合update的例子(并带有group by分组)
内容简介 本文主要展示了在MySQL中,使用两表联合的方式来更新其中一个表字段值的SQL语句. 也就是update table1 join table2 on table1.col_name1=tab ...
- Unity MMORPG游戏优化经验分享
https://mp.weixin.qq.com/s/thGF2WVUkIQYQDrz5DISxA 今天由Unity技术支持工程师高岩,根据实际的技术支持工作经验积累,分享如何对Unity MMORP ...
- Spark BlockManager 概述
Application 启动的时候: 1. 会在 SparkEnv 中实例化 BlockManagerMaster 和 MapOutputTracker,其中 (a) BlockManagerMast ...
- JNI/NDK开发
公司的新需求终于解决完了,离测试和发布还有段时间,第一次体验了下没需求没bug的感觉,真是舒爽~然后翻了翻有什么可以学的.无意翻到了Android后期发展的五大趋势.一.性能优化.二.高级UI.三.J ...
- Pycharm自动部署项目
Pycharm自动部署项目 大家好呀,又有几天不见各位了.断更了几天,给大家说声抱歉.清明节大家都挺忙的,有扫墓祭祖的,也有趁小长假去游玩的. 所以,在节后,更新也会照常进行,继续给大家分享本人的一些 ...
- 谈缓存数据库在web开发中的重要性
1.开局先抛出如下问题: ①当关系型数据库存放的数据量很大时,每次查询耗时明显变长,那么如何解决该问题? ②当业务要求单用户登录(即同一个账户有一个用户登录后,第二个用户再登录该账户要么挤出之前的登录 ...
- Vue中的指令(听博主说总结的很好)
指令[重点] 作用:简化Dom操作 参考:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4 特点: 1.都是以v-开头 2.除了插值表达式,其它都写在标签 ...
- Python网络爬虫(二)
Urllib库之解析链接 Urllib库里有一个parse这个模块,定义了处理URL的标准接口,实现 URL 各部分的抽取,合并以及链接转换.它支持如下协议的 URL 处理:file.ftp.goph ...
- 73th LeetCode Weekly Contest Escape The Ghosts
You are playing a simplified Pacman game. You start at the point (0, 0), and your destination is(tar ...
- spring retry注解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...