专栏首页Jerry的SAP技术分享webpack最简单的入门教程里bundle.js之运行单步调试的原理解析

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

版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog.csdn.net/article/details/79293790

读这篇文章的朋友,请确保对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页面就出现了期望的字符:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 命令行启动Angular应用

    Your global Angular CLI version (7.3.3) is greater than your local version (7.3...

    Jerry Wang
  • webpack打包过程如何调试?

    本文适用于已经会使用webpack的前端开发人员,但是想进一步了解webpack细节和进阶。

    Jerry Wang
  • 如何处理SAP Fiori Launchpad KPI tile点击后出现的错误消息

    点击了SAP Fiori Launchpad KPI tile后一个典型的错误消息:

    Jerry Wang
  • webpack

    webpack是一个现代JavasScript应用程序的模块打包器(module bunder) 官方网站https://www.webpackjs.com/...

    羊羽shine
  • 三分钟使用webpack-dev-sever搭建一个服务器

    webpack-dev-server是一个小型的Node.js Express服务器,我们可以通过它搭建一个本地服务器,并且实现文件热更新; 1.切换到你的目录...

    李文杨
  • 构建打包工具Rollup.js入门指南

    最近在看Vue源码的时候发现一个新的打包工具Rollup.js,之前没有听说过这个工具,也不了解Rollup.js相比于常用的打包工具webpack有什么异同和...

    用户1462769
  • 四:单页面解决方案--代码分割和懒加载

    其中,page.js是入口文件,subPageA.js和subPageB.js共同引用module.js。下面,我们按照代码引用的逻辑,从底向上展示代码:

    心谭博客
  • Python爬虫进阶必备 | 关于某查猫查询参数的加密逻辑分析

    找到要分析的参数,通过首页的检索栏,输入企业名称关键字点击查询就可以抓到类似下面的两个包。

    咸鱼学Python
  • layer后台管理系统前端框架模板

    后台管理系统,是内容管理系统Content Manage System(简称CMS)的一个子集。CMS是Content Management System的缩写...

    Javanx
  • Web 前端常用专有名词的正确拼写

    本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

    Joel

扫码关注云+社区

领取腾讯云代金券