npm run 是什么？为什么使用npm run 这一命令，就能够将 webpack 跑起来并进行下一步的操作？

已于 2023-02-23 14:02:56 修改
阅读量9.4k 收藏
点赞数 4
分类专栏： webpack 文章标签： webpack npm 前端
于 2022-08-09 13:47:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/changyandou2020/article/details/126246091
版权
npm run是前端开发中常用命令，用于执行package.json中定义的脚本。它实际调用的是node的npm-cli.js，通过解析package.json的scripts字段，例如在'npm run dev'中启动webpack-dev-server。在调试过程中，理解node的内部逻辑和批处理命令的运作方式有助于深入掌握这一过程。本文旨在为理解webpack运行前的npm环境配置和源码分析提供指导。
摘要由CSDN通过智能技术生成

npm run 实际上是衔接 node 和 webpack 的连接点。先看看终端运行的npm是什么，如下图：

在这里插入图片描述

图中的关键点是最后一行 C:\Users\***\AppData\Roaming\npm\node_modules\npm。从它可以推断出系统环境变量下配置的npm的路径为C:\Users\***\AppData\Roaming\npm，可以去环境变量中确认，如下：

在这里插入图片描述

然后查看npm.cmd的批处理命令，如下：

@ECHO off
GOTO start
:find_dp0
SET dp0=%~dp0
EXIT /b
:start
SETLOCAL
CALL :find_dp0
了解本专栏 订阅专栏 解锁全文 超级会员免费看
假如面试官问你在终端执行 npm run build 之后webpack做了写什么？
changyandou2020的博客
08-09 668
全栈或者前端工程师如果理解了npm run build 后 webpack 的发生的细节，不仅在面试中会被加分，在工作中也会对编译过程有更清晰的认识，便于定位问题
关于 运行npm run xxx
weixin_49985592的博客
05-28 2396
首先会去项目的package.json文件里找scripts 里找对应的xxx，然后执行 xxx的命令，例如启动vue项目 npm run serve的时候，实际上就是执行了vue-cli-service serve 这条命令 /* package.json */ "name": "vue-admin", "version": "1.0.0", "author": "Lizhen", "scripts": { "dev": "vue-cli-service serve", "build:p
详细分析 npm run build 基本知识 | 不同环境不同命令
码农研究僧的博客
11-26 1831
npm run 是 npm 的一个命令，用于运行 package.json 中定义的脚本，可以通过 “scripts” 字段为项目定义各种任务
修改webpack配置文件和json文件，使用npm run webpack执行打包
sunny_jiangsu的博客
08-08 1385
直接上步骤： 准备工作，新建下面层级目录 demo --src–script –dist–js 2./src/script/main.js function hello(){} 3.新建webpack.config.js文件 var path = require("path"); module.exports = { entry: './src/script/main.js', o...
node(2) - npm run 原理
最新发布
止于至善
12-17 863
创建脚本生命周期后，我们就可以在执行打包命令前，执行我们自己开发的脚本，然后再执行打包。比如上边示例，就是我通过脚本命令传递参数，来决定当前项目运行的测试接口环境还是正式接口环境。通过命令简化每次切换接口环境需要人工手动改写。npm run 的执行原理，查找 package.json 文件中的 scripts 字段，然后执行对应的脚本命令。脚本执行的查找规则：当前 .bin > 全局 node_modules > 环境变量 > 报错。
理解npm run
100斤的博客
08-18 1万+
理解npm run 引言 ReactNative 开发中经常用到一些npm run的命令来打包。最近在这上面踩了一个坑，所以研究了一下。 在阅文做了两个ReactNative混合开发的项目，都用npm run bundle android打ReactNative的bundle包，再打包Android apk。但是最终的apk里面却有些不同。其中一个apk里的所有svg图片都转换成了不同分辨率...
在项目中使用webpack
LPLIFE的博客
07-04 3058
1.新建一个项目,我的放在F盘中2.使用   npm  init 命令初始化这个目录3.使用命令:npm install webpack -save-dev     进行安装webpack4.新建src和dist两个文件夹接着使用编译器打开这个目录,我的是HBuilder然后在src中新建两个文件夹和在根目录下创建一个index.html文件,1)新建index.html文件2)在script文件...
通过npm script运行webpack
仇益阳的博客
06-06 690
通过npm script运行webpack 在package.json里 添加以下代码 "build":"webpack"
npm run 指令
科技向善
01-01 1438
关于vue的npm run dev和npm run build的区别介绍
10-17
为了管理Vue项目的构建和开发过程，通常会使用Node.js包管理器npm与一系列预设的脚本来进行操作。在Vue项目中，我们经常会遇到两种常用的npm脚本命令：`npm run dev`和`npm run build`。这两个命令分别用于启动开发...
webpack npm的dev,run,start区别.zip
12-11
在JavaScript开发领域，Webpack是一个广泛使用的模块打包工具，它能够将各种资源如JavaScript、CSS、图片等整合到一起，形成适合浏览器使用的静态资源。而与Webpack配合使用的npm（Node Package Manager）则是...
了解npm run指令
qq_42880714的博客
05-02 2071
npm run指令
npm 包管理器run命令使用
uestc_zj的博客
05-19 4430
npm run命令需和项目根目录下的package.json文件配合使用； npm run执行package.json文件的“scripts”属性中定义的命令，如下例： { "name":"my-project", "version":"1.0.0", "description":"AVue.jsproject", "author":"zhouguoqing<zhouguoqing@clinbrain.com>", "private":true...
npm run webpack 和直接webpack
weixin_36094484的博客
07-06 1112
好多新手会问一个问题，直接webpack可以运行，npm run webpack却出错。 首先webpack的话是直接运行webpack.config.js里的配置。配置正确的话一般是没问题的。 而npm run 是运行package.json下scripts标签里的命令，如果scripts里没有添加webpack这个选项，比如： "webpack": "webpack --config webp
npm-run：灵活执行脚本的npm工具
gitblog_00964的博客
09-02 748
npm-run：灵活执行脚本的npm工具 npm-runRun locally-installed node module executables.项目地址:https://gitcode.com/gh_mirrors/np/npm-run 项目介绍 npm-run 是一个简单的命令行工具，它基于Node.js和npm，专为执行项目中的npm脚本设计。这个工具提供了便利的方式，使得开发者能够轻松...
npm run build与Webpack的关系！！！
weixin_50976410的博客
03-22 2115
在项目的 package.json文件中，您可以定义一个或多个构建脚本，这些脚本会通过命令行运行。
webpack
iamzhiyudong
10-17 3909
webpack 文章目录webpack1. webpack1.1 静态资源多了带来的问题1.2 如何解决上述问题2. webpack的使用2.1 webpack的安装2.2 webpack的使用2.2.1 项目搭建思路2.2.2 webpack的作用2.3 webpack的配置文件webpack.config.js2.4 自定义配置文件2.5 执行webpack之后发生了什么2.6 配置多个入口...
npm run 执行多任务的package.json配置
热门推荐
祝紫山（大可山人）博客[GDI+,WPF, .Net图形图像]
06-02 2万+
先将任务分解成多条分支任务，然后将这些分支任务用&&串联成一条总任务来执行: "build": "npm run build-js && npm run build-css", 再用npm run XXX(总任务的脚本关键字，这里是build)来执行总任务即可。
npm 及 webpack 使用方法（至 开发 部分）
qq_20535249的博客
09-02 789
使用webpack前提：已经安装npm（安装node.js已经包含npm） 1.安装webpack 使用webstorm打开工程文件夹，在命令行工具中输入 npm init -y //初始化npm npm install webpack webpack-cli --save-dev //安装webpack 及webpack-cli（此工具用于在命令行中运行 webpack） 【可选】...
vue项目使用npm dev run 和webpack打包有什么区别吗？
07-09
`npm run dev`是一个命令，用于在开发环境下启动项目的开发服务器。它会启动一个本地服务器，并提供实时的热重载功能，即在你修改代码后，页面会自动刷新以展示最新的更改。这个命令通常用于开发过程中，方便开发者...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

问问计算机

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值