webpack开发环境和生产环境_环境问题是如何产生和发展的

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

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/165390.html原文链接:https://javaforall.net

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


相关推荐

  • matlab中@的用法[通俗易懂]

    matlab中@的用法[通俗易懂]@是用于定义函数句柄的操作符。函数句柄既是一种变量,可以用于传参和赋值;也是可以当做函数名一样使用。举例:sin是matlab中的一个函数,但sin只是函数名,还不是函数句柄,不可以用于传参。f=@sin;这行代码定义了一个函数句柄,变量名是f。这样就可以当做参数传递了(这就是上面代码中的意义所在),而且还可以跟sin函数按相同的语法规则使用:g=f;%g也是函数句柄,其“值”和f一样…

    2022年7月17日
    12
  • 数据库中什么是变量名_数据库表名命名规范

    数据库中什么是变量名_数据库表名命名规范codeIf简介:Github开源项目特点:1,支持中文;2,变量命名:Github,Bitbucket,GoogleCode,Codeplex,Sourceforge,FedoraProjec的项目源码3,可以查询代码片段及其代码库链接:http://unbug.github.io/codelf/举个例子查看代码查看代码片段查看代码片段更多文章,请关注博客:http://blog

    2022年9月21日
    0
  • js匿名函数自调用this指向_java 匿名函数

    js匿名函数自调用this指向_java 匿名函数  //第一种方法  (function (argument){   console.log(argument)  })("有参匿名函数自调用");  //第二种方法  (function (){   console.log("无参匿名函数自调用方法一")  }());  //第三种方法  !function (){   console.log("有参…

    2022年10月3日
    0
  • return 0和return 1和return -1的区别「建议收藏」

    return 0和return 1和return -1的区别「建议收藏」1、返回值int类型的函数返回:return语句用来结束循环,或返回一个函数的值。return0:一般用在主函数结束时,按照程序开发的一般惯例,表示成功完成本函数。return-1::表示返回一个代数值,一般用在子函数结尾。按照程序开发的一般惯例,表示该函数失败;以上两个是约定俗成,系统提供的函数绝大部分定义为int类型返回值的都是这样的。返回值是返回给系统用的,给…

    2022年10月21日
    0
  • 就业更看重本科学历还是研究生学历(女孩没学历做什么工作好)

    前言我是一个普通本科出身的Android程序员,我的学校也不过就是一个普通二本。嗯,我的学弟学妹们也是一样的,都是普通二本。但是和我不同的是,现在的社会越来越浮躁了,浮躁的让人沉不下心认真做事,让人忍不住去想各种有的没的。比如我的这些学弟学妹们。我已经不止一次收到来自他们的私信了,他们问的内容,无一不是表达对自己学历的自卑和对即将离开学校的自己的不自信,还有对面试被拒的伤心。千篇一律的问题,基本内容如下:面试挂了,大厂面试到底更看重学历还是技术?我这样的学历在求职中有什么需要注意点的点吗?

    2022年4月13日
    106
  • servlet是干什么的?

    servlet是干什么的?知乎上一个名为“servlet的本质是什么,它是如何工作的?”问题下面的各种回答,基本解答了我的疑问。感谢。现在,做一个知识的搬运工……1.浏览器发送一个HTTP请求,HTTP请求由Web容器分配给特定的Servlet进行处理,Servlet的本质是一个Java对象,这个对象拥有一系列的方法来处理HTTP请求。常见的方法有doGet(),doPost()等。Web容器中…

    2022年6月15日
    42

发表回复

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

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