webpack源码分析——配置调试环境

无论是阅读webpack源码,还是编写webpack的plugin和loader,配置调试环境都是很有必要的。weabpack的运行环境是nodejs,调试webpack就是调试nodejs程序。我们平时使用的IDE如eclipse、webstorm都支持nodejs的调试。本文以eclipse(Version: Oxygen.1a Release (4.7.1a))为例,进行讲解。

在这个例子里面,我们使用webpack <entry> [<entry>] <output>这种用法,工程具体目录结构如下:

--index.html

--index.js

--hello.js

index.html中的内容:

index.js中的内容:

hello.js中的内容:

构建命令:webpack ./index.js bundle2.js

第一步、新建一个debug配置项

第二步、填写配置项

Name:debug配置项的名称

Main选项卡下的File:程序的入口文件。webpack的入口文件是bin目录下的webpack.js

然后点开Arguments选项卡,进行配置

Program Arguments:

本文中的例子是要执行 webpack ./index.js bundle2.js命令,故在程序变量Program Arguments一项中配置了参数:./index.js bundle2.js

如果是直接使用webpack.config.js配置文件进行配置,并且在命令行中使用的命令是webpack,这种情况可以不用配置Program Arguments

Working Directory:

被调试程序所在目录

第三步、设置断点执行

其他IDE的配置也差不多。

原文地址:https://www.cnblogs.com/xiaokebb/p/8462421.html

时间: 2024-07-30 16:45:20

webpack源码分析——配置调试环境的相关文章

nginx源码分析--GDB调试

利用gdb[i]调试nginx[ii]和利用gdb调试其它程序没有两样,不过nginx可以是daemon程序,也可以以多进程运行,因此利用gdb调试和平常会有些许不一样.当然,我们可以选择将nginx设置为非daemon模式并以单进程运行,而这需做如下设置即可: daemon off; master_process off; 这是第一种情况: 这种设置下的nginx在gdb下调试很普通,过程可以[iii]是这样: 执行命令: [email protected]:/usr/local/nginx/

nginx源码分析--配置信息的继承&amp;合并

这里只讲述http{}模块下的配置: 在ngx_http_block()函数内(这个函数别调用时在ngx_inti_cycle内的ngx_conf_parse函数,这个函数遇到http命令时 回调ngx_http_block,开启http{}配置块的解读工作),针对每一个http模块,调用init_conf之后,有调用了ngx_http_merge_servers().这是为何! 首先明确几点:一个http{}配置块内可以包含多个server{}配置块,每个server{}配置块可以包含多个lo

DroidPlugin源码分析插件运行环境初始化

从DroidPlugin的官方文档中我们知道. 2 在AndroidManifest.xml中使用插件的com.morgoo.droidplugin.PluginApplication: 或者在自定义的Application的onCreate()函数中,调用PluginHelper.getInstance().applicationOnCreate(getBaseContext()); 在Application的attachBaseContext()函数中,调用 PluginHelper.get

sql 注入神器sqlmap 源码分析之调试sqlmap

相信大家平时 用sqlmap 命令,比如 python sqlmap.py -u"https://team.oschina.net/action/team/create" --data="name=onlyGuest&ident=onlyGuest&sident=onlyGuest&temp=1431349990862" --dbs --dbms=mysql --cookie="JmHE4Nja6ZqH8Vw0cSxY%2FW4LT

webpack源码分析——参数初始化

webpack比较常见的用法有两种:一.使用配置文件:二.不使用配置文件(用命令 webpack <entry> [<entry>] <output>).这两种方式参数的初始化方式不太一样: 方式一.从配置文件和shell语句中读取并合并参数:方式二.从shell语句从直接读取入口和出口参数.本文会结合源码,分析一下这两种方式的实现.(文章使用的webpack版本是3.10.0) webpack执行的入口文件是bin目录下面的webpack.js,负责参数转换处理的文件

MyBatis 源码分析——配置信息

MyBatis框架的启动前期需要加载相关的XML配置信息.从官网上我们可以了解到他具有十几个节点.其中笔者认为比较重要的节点是settings节点.properties节点.environments节点. transactionManager节点.至于相关的作用到官网看过一篇都会明白. MyBatis框架的XML配置到底有几个节点,这个必须去查看一下相关的DTD文件才行.DTA文件就在包名为org.apache.ibatis.builder.xml的下面.由于显示的问题笔者只复制出部分来. <?

mybatis源码分析之01环境搭建

直接使用maven搭建一个mybatis的运行环境 1. pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="

[nginx源码分析]配置解析1

整个配置解析主要是函数ngx_init_cycle(&init_cycle)进行处理. ngx_init_cycle(&init_cycle) ngx_time_update()//时间更新,也是在main函数里面讲过 /* * 通过加锁和解锁,来更新如下时间 ngx_cached_time = tp; ngx_cached_http_time.data = p0; ngx_cached_err_log_time.data = p1; ngx_cached_http_log_time.da

[nginx源码分析]配置解析(http作用域)

分析完events后,开始分析http.sever.location模块. http上下文主要是创建三个用于保存每一个模块设置的变量结构,每个模块都可以保存变量到http三个数组指针中(main.server.location),每个模块的索引是模块的ctx_index变量指定在三个数组中的位置 核心代码: ctx = ngx_pcalloc(cf->pool, sizeof(ngx_http_conf_ctx_t)); //首先分配一个http上下文变量,里面是指针的指针,因为后面分配数组都是