热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

biaoti

最近运行公司的项目,运行npmrunbuild命令后,出现一大堆错误,于是,第一时间查看一下package.json文件查看一下webpack是否安装成功,于是在TERMINAL运

  最近运行公司的项目,运行npm run build命令后,出现一大堆错误,于是,第一时间查看一下package.json文件

查看一下webpack是否安装成功,于是在TERMINAL运行:webpack -v

显示'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文件,那就重装webpack好了。

 


一、下载安装node.js(npm)

百度搜索node官网,根据电脑系统下载合适的安装包,按照步骤直接点击下一步完成安装,nodejs默认集成了npm,无需再次安装,安装一下国内淘宝镜像cnpm。

 


二 、配置环境

win+R输入cmd打开命令行 输入 node -v 回车查看nodejs是否成功安装:

输入npm -v 也可以查看npm是否成功安装,安装成功后出现版本号说明nodejs.npm安装成功。


1.配置文件夹

我的nodejs是默认安装路径C:\Program Files\nodejs,最开始是安装在其他盘的,但是配置的时候各种问题,后重装改为默认路径

在C:\Program Files\nodejs文件夹内新建两个文件夹用于全局存放依赖包路径,和缓存路径

缓存C:\Program Files\nodejs\node_cache

存放C:\Program Files\nodejs\node_glo

 

文件夹创建完成后打开命令行输入如下命令 配置路径:

npm config set cache  "C:\Program Files\nodejs\node_cache"

回车

输入:
npm config set prefix "C:\Program Files\nodejs\node_global"  回车

(输入指令后,命令行闪一下,不会有任何提示)


2.安装webpack

webpack分为全局安装,与项目安装(安装在你指定的文件夹内),我这里使用的是全局安装

启动cmd,键入如下的命令:

npm install webpack -g

点击回车,会有一个进度条,等待进度条完成后,出现如下信息(具体信息可能有差别,但是只要不出现error说明安装成功):

此时,打开nodejs的路径C:\Program Files\nodejs\node_global文件夹,发现多了一些东西:

此时全局webpack已经成功安装。


环境变量配置

我的电脑——右键属性——高级系统设置——高级———环境变量 

分别新建用户变量PATH和系统变量NODE_PATH

用户变量:             

 

  系统变量:    

这是最重要的一点;在安装webpack后出现'webpack' 不是内部或外部命令的问题 就是此处设置不对

PATH和NODE_PATH全部设置为:C:\Program Files\nodejs\node_global。

看到网上的设置方法为  :NODE_PATH属性指向C:\Program Files\nodejs\node_global\node_modules,这样设置并不对,就会导致报不是内部命令

记得这重要的一步:重启!重启!重启!重要的事情说三遍。

 按照以上步骤nodejs npm webpack算是真正安装配置完,然后就可以直接使用了,推荐一篇博客适合新手入门



推荐阅读
  • 【前端工具】nodejs+npm+vue 安装(windows)
    预备先看看这几个是干嘛的,相互的关系是啥。nodejs是语言,类比到php。npm是个包管理,类比到composer。vue是个框架&# ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • 本文详细介绍了如何创建和使用VUE uni-app开发环境,包括通过HBuilderX可视化界面和通过vue-cli命令执行的方法。文章内容简单清晰,易于学习与理解。通过学习本文,读者可以深入了解VUE uni-app开发环境,并通过实践验证掌握具体的使用情况。编程笔记将为读者推送更多相关知识点的文章,欢迎关注! ... [详细]
  • 前言:原本纠结于Web模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中ev ... [详细]
  • 前言:原本纠结于Web 模板,选了Handlebars。后来发现页面都是弱逻辑的,不支持复杂逻辑表达式。几乎要放弃之际,想起了Javascript中eval函数。虽然eval函 ... [详细]
  • Node.js详细安装及环境配置
    1、下载安装根据自己电脑系统及位数选择,我这里选择windows64位.msi格式安装包(官网:https:odejs.orgzh-cndownload).msi和.zip格式区别 ... [详细]
  • 技术周报·2021-05-07-小编推荐向现代Javascript转型原文标题:Publish,ship,andinstallmodernJavaScriptforfaste ... [详细]
  • 树莓派语音控制的配置方法和步骤
    本文介绍了在树莓派上实现语音控制的配置方法和步骤。首先感谢博主Eoman的帮助,文章参考了他的内容。树莓派的配置需要通过sudo raspi-config进行,然后使用Eoman的控制方法,即安装wiringPi库并编写控制引脚的脚本。具体的安装步骤和脚本编写方法在文章中详细介绍。 ... [详细]
  • 篇首语:本文由编程笔记#小编为大家整理,主要介绍了软件测试知识点之数据库压力测试方法小结相关的知识,希望对你有一定的参考价值。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • Centos下安装memcached+memcached教程
    本文介绍了在Centos下安装memcached和使用memcached的教程,详细解释了memcached的工作原理,包括缓存数据和对象、减少数据库读取次数、提高网站速度等。同时,还对memcached的快速和高效率进行了解释,与传统的文件型数据库相比,memcached作为一个内存型数据库,具有更高的读取速度。 ... [详细]
  • npminstall-Dbabelcorebabelpreset-envbabelplugin-transform-runtimebabelpolyfillbabel-loader ... [详细]
  • Vue cli2.0 项目中使用Monaco Editor编辑器
    monaco-editor是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与VisualStudioCode功能几乎相同。在项目中可能会用带代码编 ... [详细]
  • 这篇“Webpack是怎么工作的”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大 ... [详细]
  • Scarp框架需求获取网页的url下载网页内容(Downloader下载器)定位元素位置,获取特定的信息(Spiders蜘蛛)存储信息(ItemPipeline,一条一条从管里走) ... [详细]
author-avatar
看山不是山
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有