前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >npm run dev 后 webpack-dev-server 做了哪些事情

npm run dev 后 webpack-dev-server 做了哪些事情

作者头像
问问计算机
发布2023-02-24 10:44:38
1.7K0
发布2023-02-24 10:44:38
举报
文章被收录于专栏:问问计算机

在终端执行npm run dev,拿windows来说实际上调用的是 node_modules下的 .bin 文件夹下的 npm.cmd 的批处理命令。但是这一篇重点放在 package.json 中 npm run dev 中对应的 webpack-dev-server 的调用。也就是package.json中的如下部分:

代码语言:javascript
复制
{
"scripts":{
"dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  }}

至于npm run dev是怎么解析package.json并且找到 scripts 下 dev 之后的部分的,下一篇再详细剖析。 在终端执行npm run dev,拿windows来说实际上调用的是 node_modules下的 .bin 文件夹下的 npm.cmd 的批处理命令。但是这一篇重点放在 package.json 中 npm run dev 中对应的 webpack-dev-server 的调用。也就是package.json中的如下部分:

代码语言:javascript
复制
{
"scripts":{
"dev":"webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
}}

至于npm run dev是怎么解析package.json并且找到 scripts 下 dev 之后的部分的,下一篇再详细剖析。

运行 npm run dev 之后,会在 npm-cli 中找到 webpack-dev-server.cmd ,如下:

下面针对webpack-dev-server.cmd的批处理程序进行解析说明:

代码语言:javascript
复制
rem GOTO是一个流程控制转向命令,用于控制批处理中的命令执行流程,这里的含义是指直接跳过GOTO start与 :start 之间的命令
GOTO start

:find_dp0

rem set用来创建、设置、查看或删除环境变量
rem ~为扩展符号,它和不同的字母结合时所代表的含义不同,%0 代表批处理文件名本身,而 %~dp0 则表示了 %0 文件的路径信息
SET dp0=%~dp0
EXIT /b

rem :start 以冒号开头并紧跟标识符的单独一行,作为GOTO start中的start位置标记
:start


rem setlocal命令在批处理程序运行时设置自身的临时变量环境,并且不会影响到系统的变量环境设置
SETLOCAL


rem call在这里调用的是指定标号处后面的所有命令,这里的 :find_dp0 也是作为一种 call 调用的标记,上面的 :find_dp0 相呼应
CALL :find_dp0

rem 批处理文件中使用变量时,应该在变量名前后分别加上一个百分号,否则无法正确使用变量
rem EXIST语句可与IF语句结合起来使用,用来检验当前子目录或当前磁盘上某些文件是否存在
IF EXIST "%dp0%\node.exe" (
  SET "_prog=%dp0%\node.exe") ELSE (
  SET "_prog=node"
  SET PATHEXT=%PATHEXT:;.JS;=;%)rem setlocal必须与endlocal命令联合使用,endlocal命令用于结束临时变量环境并且回到系统变量环境
rem "<"、">"、">>" 是批处理程序中的3个重定向符号,用于控制数据的输入或输出方式。"<" 符号的右边是数据源,左边代表数据目的地;">" 及 ">>" 符号的左边是数据源,">" 会替换目的数据,而">>" 符号只是将数据源添加到目标数据后

endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\webpack\bin\webpack.js" %*rem 关键是endLocal后面的这一部分是什么意思
rem &为组合命令,顺序执行多条命令,不管命令是否执行成功
rem 2>NUL 是屏蔽操作失败显示的信息,如果成功依旧显示
rem || 连接两个命令时,仅当符号前面的命令执行失败后,才继续执行符号后的命令
rem 批处理title命令用于设置控制台窗口中显示的标题
rem >NUL 表示前面命令产生的信息发送给空设备,避免直接显示在命令行窗口
rem %* 表示命令行中的所有参数,当要将命令从批处理文件转发到另一个程序时会用到

在其中有两处比较难理解的地方单独说明:

  • goto #_undefined_#:它利用一个致命错误,实现立即终止批处理,但当前执行的已被解析的代码块继续完成。代码的其余部分使用命令行上下文而不是批处理上下文执行。
  • SET PATHEXT=%PATHEXT:;.JS;=;% 将系统环境变量中的PATHEXT的扩展名中的JS替换掉

上面是针对npm通过scripts的配置调用webpack-dev-server批处理程序中的每一条命令的说明。但是如果要想了解webpack的运行机制,就需要深入webpack.js查看它的执行过程。下面提供node环境下调试webpack的详细步骤:

①在package.json中配置npm scripts,如下:

代码语言:javascript
复制
{
"scripts":{
"origin":"node --inspect-brk=9229 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js"
    }
}

②在vscode的运行调试中选择run script:origin

③chrome输入chrome://inspect/#devices,如下:

④打开open dedicated DevTools for Node,如下:

⑤弹出如下调试窗口:

⑥vscode中webpack.js进入调试模式,如下:

上述内容中对于批处理程序的细节尽量还是仔细研究一下,如果webpack-dev-server.cmd 的内容看懂的情况下,同级的 npm.cmdcnpm.cmd等都能够很容易理解。并且对于webpack、npm等原理的认识有帮助。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-08-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 问问计算机 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
命令行工具
腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档