使用vscode安装webpack,最完整的配置,从前置条件到安装成功

本文指导读者如何在Windows上安装Node.js,配置npm和cnpm,包括设置全局路径、缓存路径,以及在VSCode中使用这两种工具。重点介绍了管理员权限和淘宝镜像加速。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

第一步,安装npm且配置

  首先要先安装node.js,node.js的安装包里自带有npm。
node.js官网下载
  然后就是下一步下一步的傻瓜式安装,下载到哪可以自己选择,最新版的安装过程中会有给可以勾选的自动下载一些东西,可以不勾选。然后安装完毕。
  根据你node.js下载的地方,你要做的配置有:(我这边自己选择的下载安装路径是D:\Program Files\nodejs)
  在你node.js的安装文件夹里新建两个文件夹,node_global和node_cache,一个放全局的,一个放缓存的。然后还需要在新建的node_global文件夹里还要在建一个node_modules文件夹。

在这里插入图片描述
在这里插入图片描述
  接着在开始环境变量的配置:
  选择自己用户变量的path,将它安装的node.js有的一个变量改为自己刚新建的node_global的路径。
在这里插入图片描述
  再在系统变量里添加一个变量:名NODE_PATH,值为新建的node_global文件夹里的node_modules文件夹路径

在这里插入图片描述
  最后还需用管理员权限打开命令提示符窗口即cmd,

在这里插入图片描述
  接着输入命令:

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

  设置完可以查看是不是你刚设置的路径

npm config get prefix
npm config get cache

在这里插入图片描述
  然后输入

npm root -g

  看路径是否为新建的node_global文件夹里的node_modules文件夹路径
在这里插入图片描述
  都确认好之后,就可以用npm -v命令试试是否环境配置成功

在这里插入图片描述
  还可以设置npm下载快点,用国内淘宝的仓库,相当于加速了

npm config set registry=https://registry.npm.taobao.org

第二步,安装cnpm且配置

  其实只用npm也可以,但是我比较想用cnpm来下载安装,所以我就要用npm再下载个cnpm。大家这步可以不用哈,如果喜欢用npm的话。
安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

在这里插入图片描述

  安装完接着跟npm一样配置下那个全局和缓存的路径

cnpm config set prefix "D:\Program Files\nodejs\node_global"
cnpm config set cache "D:\Program Files\nodejs\node_cache"

  验证:

cnpm config get prefix
cnpm config get cache

在这里插入图片描述
  查看是否安装成功

cnpm -v

在这里插入图片描述

第三步,以管理员身份打开vscode

  打开vscode的终端:
  输入npm-v 与cnpm-v,要使用哪个的就输入哪个,测试是否可以再vscode中使用
在这里插入图片描述
在这里插入图片描述

cnpm要是不能使用报以下错
在这里插入图片描述
那便还要以管理员身份打开Windows PowerShell
在这里插入图片描述
输入命令:(我这边是已经改过了)

Get-ExecutionPolicy

然后:

set-ExecutionPolicy RemoteSigned

然后更改权限为 A
然后命令:

Get-ExecutionPolicy

在这里插入图片描述
  便可在vscode中使用cnpm命令了
  我这边的安装webpack指令是安装最新版的webpack,所以还需要安装webpack-cli,旧的版本不用。
在这里插入图片描述
  npm指令安装

npm i webpack webpack-cli --save-dev

  那这边就npm和cnpm两种方式在vscode的使用安装webpack,都安装完了,至于webpack的入口文件,内容文件哪些就不讲咯~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

灼_灼

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

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

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

打赏作者

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

抵扣说明:

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

余额充值