webpack的安装并解决“安装之后显示webpack不是内部或外部命令问题”

node.js的安装

首先需要安装node.js

  • 官网地址:https://nodejs.org/en/
  • 下载LTS稳定版本即可,一路傻瓜式安装
  • 安装之后在cmd中执行node -v npm -v如果显示版本的话则安装成功

配置

找到安装node.js的地址,里面会有node_cache和node_global两个文件
如果没有的话,你可以创建一下,然后在cmd中执行npm config set cache "D:\nodejs\node_cache"和
npm config set prefix “D:\nodejs\node_global”即可

webpack安装

**全局安装webpack**
  • 在cmd中执行npm install webpack -g会给你安装最新的webpack版本
  • 如果你想指定版本安装的话,npm install webpack@版本号 -g即可.例如:npm install webpack@3.6.0 -g
  • 如果下载过慢的话,可以去找个镜像,会快很多。
  • 如果不出现error,则安装成功

这时候你可能会执行webpack -v 看看是否会显示版本以证明安装成功,然而事实并非你所愿

在这里插入图片描述

这时候会出现如图所示,显示webpack不是内部或者外部命令,不要着急,不要暴躁,这时候你打开node_global 文件夹,你会发现里面其实已经有webpack的文件啦
安装成功之后,还要按个webpack-cli工具
执行npm install webpack-cli -g就好了
下面只需要进行环境变量的配置就ok啦

环境变量配置

点击此电脑

在这里插入图片描述
然后右键属性,选择高级系统设置

在这里插入图片描述
选择高级中的环境变量

在这里插入图片描述
然后在用户变量中添加node_global的路径即可,我的是“D:\VScode\node\node_global”

在这里插入图片描述

然后点击确定,再在系统变量中新建一共NODE_PATH 并添加node_global的路径

在这里插入图片描述

然后一路点击确定,这时候就基本完成了安装。这时候你再重新打开cmd,执行webpack -v 就可以显示版本号啦

在这里插入图片描述

VScode中无法使用webpack命令

安装好webpack之后,发现在cmd中可以使用,但是vscode中不能使用

在这里插入图片描述

这时候只需要在下面执行 Set-ExecutionPolicy -Scope CurrentUser
然后再输入 RemoteSigned 即可
在这里插入图片描述

这时已经可以正常使用啦,简单的测试一下
在这里插入图片描述
欧克,成功啦

©️2020 CSDN 皮肤主题: Age of Ai 设计师:mmellie 返回首页