Node.js安装、webpack 安装步骤Windows

冯登贵 發表於 2020-5-28 16:45:00

注意：CMD要以管理员身份打开,否则在安装webpack那一步一直报错
默认： C:\Windows\System32 --cmd.exe
<img src="https://img2020.cnblogs.com/blog/1553767/202006/1553767-20200601140638725-132749882.png">
 
 
 
 
<img src="https://img2020.cnblogs.com/blog/1553767/202006/1553767-20200601140544613-710669829.png">
<h3>什么是Node.js？</h3>
<div class="cnblogs_code">
<pre>简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境；
Node.js使用一个事件驱动、非阻塞式 I/O 的模型，使其轻量且高效；
Node.js的软件包生态系统npm是全球最大的开源库生态系统。</pre>
</div>
<h3>安装教程</h3>
本机环境：Windows 10  64bit操作系统
<h4>1.下载安装包</h4>
Node.js 官方网站下载：https://nodejs.org/en/download/
<img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528145534568-765219092.png">
 下载完成，安装包如下：
 <img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528145842014-1862649236.png">
<h4>2.安装</h4>
双击打开安装，下一步下一步即可：
 <img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528150012712-1541078695.png">
  安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号，如下图所示：
 <img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528150057386-1614040023.png">
安装完成后系统目录如图所示（其中，npm随安装程序自动安装，作用就是对Node.js依赖的包进行管理）：
 <img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528150212966-1156783024.png">
 
<h4>3.配置npm在安装全局模块时的路径和缓存cache的路径</h4>
因为在执行例如npm install webpack -g等命令全局安装的时候，默认会将模块安装在C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中，不方便管理且占用C盘空间，
所以这里配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，如图所示：
 <img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528150412164-1826789388.png">
 然后在cmd命令下执行如下两个命令，配置路径：
<div class="cnblogs_code">
<pre>npm config set prefix "D:\Install\nodejs\node_global"
npm config set cache "D:\Install\nodejs\node_cache"</pre>
</div>
执行命令，如下图所示：
<img src="https://img2020.cnblogs.com/blog/1553767/202006/1553767-20200601141010063-21786305.png">
（输入指令后，命令行闪一下，不会有任何提示）
 执行完后，配置环境变量,分别新建用户变量PATH和系统变量NODE_PATH，如下：
"此电脑"->“属性”->"高级系统设置"->“环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”，值为“D:\Install\nodejs\node_global”，如下图：
<img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528165657788-1280595802.png">
 
这是最重要的一点;在安装webpack后出现'webpack' 不是内部或外部命令的问题就是因为路径不对
PATH和NODE_PATH全部设置为：D\Install\nodejs\node_global。
看到网上的设置方法为  ：NODE_PATH属性指向D:\Install\nodejs\node_global\node_modules,这样设置并不对，就会导致报不是内部命令
“环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:\Users\用户名\AppData\Roaming\npm”）改为：“D:\Install\nodejs\node_global”，如下：
<img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528151643902-296759856.png">
 配置完成。 
<h4>4.安装webpack及webpack-cli</h4>
  在cmd命令下执行 npm i -g webpack webpack-cli 安装webpack，如下图所示：
 前端包管理工具npm, bower and grunt
 <img src="https://img2020.cnblogs.com/blog/1553767/202006/1553767-20200601142117375-1471012161.png">
也可以切换到本地目录在安装一遍，当然全局安装就可以了，
 
 可以忽略本地安装：因为我在D:\vue-exe\blue\es6\module 下练习项目，所以定为本地位置，命令：npm i webpack webpack-cli
<img src="https://img2020.cnblogs.com/blog/1553767/202006/1553767-20200601143032140-1422855315.png">
 
 
 
安装成功，自动生成文件夹如下所示：
 <img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528152704600-323115412.png">
 
 <img src="https://img2020.cnblogs.com/blog/1553767/202005/1553767-20200528152707671-2086690958.png">
 
在cmd命令下执行 webpack -v 查看webpack版本，如提示： 
<img src="https://img2020.cnblogs.com/blog/1553767/202006/1553767-20200601141938188-1998403304.png">
 注意：安装webpack 过程中报错是因为没在管理员下安装
----------------------------------------------------------------------
wepack安装命令
webpack和webpack-cli这两个都需要装上
这两个是互相配合的，一开始就是两个都需要装
-g  全局安装, i 是install 的简写
npm i -g webpack webpack-cli       全局安装（可要任何位置安装）
npm i webpack webpack-cli      本地安装（在本地目录下）
两个本地，两个全局，正常使用webpack时，这四个库都要装，当然全局的装一遍就行了
web
 --save 写入到 dependencies 对象   -S就是--save
 --save-dev 写入到 devDependencies 对象
----------------------------------------------------------------------
安装完成后可进行第一个webpack项目-demo
 

</div>
<div id="MySignature" role="contentinfo">
本博客主要记录自己的学习点滴~，文章来源于总结，还有在工作中实际碰到的问题以记录。 
来源：https://www.cnblogs.com/liuyjui/p/12981807.html

頁: [1]

琼殿技术论坛's Archiver

Node.js安装、webpack 安装步骤Windows