webpack开发环境和生产环境_第二环境问题可以分为

webpack开发环境和生产环境_第二环境问题可以分为前言如果我们需要使用webpack,就需要依赖node环境nvmnodenpmwebpack@cliwebpacknvm安装nvm是一个用来管理node版本的工具。我们之所以需要使用n


Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

前言

如果我们需要使用webpack,就需要依赖node环境

  • nvm
  • node
  • npm
  • webpack@cli
  • webpack
     

nvm安装

nvm是一个用来管理node版本的工具。我们之所以需要使用node,是因为我们需要使用node中的npm,使用npm的目的是为了能够方便的管理一些前端开发的包!nvm的安装非常简单,步骤如下:
 

mac/linux安装

1.安装命令

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

 

2.创建nvm文件夹

mkdir ~/.nvm

 

3.配置环境变量

编辑环境

vim ~/.zshrc

在文件最后写入环境变量

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"
# This loads nvm bash_completion

最后重新打开终端即可
 

4.检查是否安装成功

在终端输入如下命令,出现版本号代表安装成功

➜  ~ nvm -v  
0.37.2

安装文档:https://github.com/creationix/nvm
 

windows安装

1.到这个链接下载nvm的安装包:https://github.com/coreybutler/nvm-windows/releases。
2.然后点击一顿下一步,安装即可!
3.安装完成后,还需要配置环境变量。在我的电脑->属性->高级系统设置->环境变量->系统环境变量->Path下新建一个,把nvm所处的路径填入进去即可!
4.打开cmd,然后输入nvm,如果没有提示没有找不到这个命令。说明已经安装成功!
 

nvm常用命令

安装指定版本的node.js

nvm install [version]

使用某个版本的node

nvm use [version]

列出当前安装了哪些版本的node

nvm list

卸载指定版本的node

nvm uninstall [version]

设置nvm的镜像

nvm node_mirror [url]

设置npm的镜像

nvm npm_mirror [url]

 

安装淘宝镜像

npm的服务器在国外,所以使用npm安装时速度很慢,那么可以安装一下cnpm,并且指定镜像为淘宝的镜像:

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

那么以后就可以使用cnpm来安装包了!
 

安装webpack5

安装命令

cnpm install -g webpack

安装过程中,会弹出询问是否要安装webpack-cli,我们选择y

We will use "npm" to install the CLI via "npm install -D webpack-cli".
Do you want to install 'webpack-cli' (yes/no): y

如果安装过程中报了以下错误

Error: Cannot find module 'webpack-cli/package.json'

解决方案:全局安装webpack-cli

npm i -g webpack-cli

最后使用webpack -v来验证安装结果,出现以下结果代表安装成功

➜  ~ webpack -v       
webpack 5.43.0
webpack-cli 4.7.2
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/165735.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长

相关推荐

  • 手机版mt4如何操作_安卓不能下载MT4

    手机版mt4如何操作_安卓不能下载MT4新手客户按照本文操作流程操作几遍,对MT4手机软件基本上就会非常熟练了。导航目录1.下载显示隐藏重新排序简单/高级视图新建图表行情周期添加/删除指标APP手机端MT4软件的功能模块一、软件下载登录1.下载通过无佣网开户的客户,下载对应APP手机版MT4软件后,手机桌面会有该交易商的软件图标,类似如下:2.登录点击MT4图标打开软件,点击软件左上角,进入“管理账户”里添加交易账户。已添加的交易账户,…

    2022年8月15日
  • mac安装navicat 激活码【中文破解版】

    (mac安装navicat 激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html1STL5S9V8F-eyJsaWN…

    2022年3月27日
  • java ajax教程_JAVA AJAX教程第一章—初识AJAX

    java ajax教程_JAVA AJAX教程第一章—初识AJAX既然是认识AJAX,理论和实践相结合,这样让自己学的更快,理解更深入,我分一下几点:1、认识传统的同步交互方式和AJAX解决方案2、AJAX使用到的技术3、实例体验AJAX一、同步交互方式和AJAX解决方案传统的WEB应用是同步交互的方式,这种同步交互方式的处理过程如下图什么是同步交互方式:首先,用户向HTTP服务器提交一个处理请求。接着,服务器端接收到请求后,按照预先编写好的程序中的…

    2022年7月7日
  • CString::ReverseFind()和CString::Find()区别「建议收藏」

    CString::ReverseFind()和CString::Find()区别「建议收藏」Find()是从左往右查找;ReverseFind()是从右边往左查找,但是他们返回的地址都是从左往右数的。示例:[cpp]#include“stdafx.h”#include”afx.h”intmain(intargc,char*argv){CStringstr=”abcdabcd”;inta=str.Find(‘b’);printf(“

    2022年6月16日
  • Ubuntu20.04安装JDK「建议收藏」

    Ubuntu20.04安装JDK「建议收藏」JavaJDK在linux系统有两个版本,一个开源版本Openjdk,还有一个oracle官方版本jdk,oracleJDK既可以通过添加ppa源命令行安装,也可以去官网下载jdk压缩包安装。下面分别记录一下这三种安装方式的步骤。版本:方法一:安装openjdk1、更新软件包列表:sudoapt-getupdate2、安装openjdk-14-jdk:sudoapt-getinstallopenjdk-14-jdk3、查看java版本,看看是否安装成功:java-ve

    2022年7月12日
  • qlogic官网_zabbix和nagios

    qlogic官网_zabbix和nagios引用http://hi.baidu.com/zeorliu/blog/item/be188aca2ce3ab8fc9176858.html2009-06-1716:26http://asmboy001.blog.51cto.com/340398/111496CactiNagiosSquid三个工具的一些区别cacti是

    2022年10月5日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号