Node.js 与 webpack 最新最详细安装教程

Node.js最新最详细安装教程（2021）

1. 下载Node.js安装包

官网下载地址：http://nodejs.cn/download/，根据自己电脑选择32位还是64位

2. 打开下载好的安装程序，点击下一步

3. 选择接受许可协议，点击下一步

4. 选择自己的安装路径（默认是c盘），选择完成后，点击下一步

5. 这里四项全部安装，点击下一步

6. 这里不用打勾✔，下一步

7. 选择Install安装

8. 选择finish完成

9. win+R 打开运行窗口，在此窗口输入cmd命令

进入命令提示符窗口，分别输入以下命令，显示版本号，则安装成功
node -v：显示安装的nodejs版本
npm -v：显示安装的npm版本

10. 修改全局模块路径和缓存路径（可选，大家自行选择是否修改）

当我们在执行npm install express -g命令时，g表示global全局。会默认下载到c盘，c盘一般作为系统盘，尽量把一些程序安装到其他盘，来减少c盘空间的占用

它的默认路径为：【C:\Users\用户名\AppData\Roaming\npm】。

注意：此文件夹默认是隐藏的，需要设置显示隐藏的文件夹，在"查看"菜单中设置，如下图：

这里将全局模块（文件夹名：node_global）和缓存（文件夹名：node_cache）放在了nodejs安装目录下，在你的nodejs安装目录下创建创建两个文件夹，名称分别为：node_global和node_cache，在node_global文件夹下再建一个node_modules文件夹，配置环境变量用

此时，还没有更改完成，需要手动指定到这两个文件夹中

• 第一种方法：win+R打开运行窗口，输入cmd，再输入以下两条指令

npm config set prefix "创建的node_global文件夹所在路径"
npm config set cache "创建的node_cache文件夹所在路径"

如：

npm config set prefix "E:\environment\nodejs\node_global"
npm config set cache "E:\environment\nodejs\node_cache"

• 第二种方法：在nodejs的安装目录下，进入node_modules——>npm——>找到npmrc文件，打开
  添加以下命令：

prefix=创建的node_global文件夹所在路径
cache=创建的node_cache文件夹所在路径

如：

prefix=E:\environment\nodejs\node_global
cache=E:\environment\nodejs\node_cache

有时候无法修改文件内容：显示权限不够，这时建议使用管理员权限进入cmd重新更改

11、Node 下的环境变量配置

node下的环境变量配置：https://www.jianshu.com/p/f0ed77f209c6

修改完毕后，再配置环境变量
右键此电脑——>高级系统设置——>环境变量
在系统变量中，新建，变量名：NODE_PATH 变量值：node_global文件夹下的node_modules文件夹。如：E:\environment\nodejs\node_global\node_modules
修改用户变量中的Path变量，将默认的npm路径修改为新建的node_global路径

更改镜像源

通过命令行进行更改

npm config set registry https://registry.npm.taobao.org

查看是否更改成功

cnpm 安装

• 使用淘宝定制的 cnpm（gzip压缩支持）命令行工具代替默认的 npm :
• npm install -g cnpm --registry=https://registry.npm.taobao.org
• 这样就可以使用 cnpm 命令来安装模块了：cnpm install [name]

webpack的安装

安装完 node 之后，需要安装 webpack ，发现头大，
npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path E:\environment\nodejs\node_cache_cacache n。。。。。。。。。
报如下错误：

重新查看自定义的 npmrc 中的环境时，发现空空如也，

在网上寻找了多种方法，卸载 node，删除 npmrc 文件……emmm，在这里博客小猪建议大家去管理员权限下的 cmd 窗口下试试，重新配置了环境变量之后(或对改文件进行编辑好之后替换即可)，再去安装，我的安装界面如下：

使用 webpack 打包出现如下错误

webpack : 无法加载文件 E:\environment\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micro
soft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ webpack .\src\main.js .\dist\bundle.js
+ ~~~~~~~
    + CategoryInfo          : SecurityError: (:) []，PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

解决报错：
（1）以管理员身份运行webstorm

（2）在终端执行：get-ExecutionPolicy，显示Restricted（表示状态是禁止的）

（3）在终端执行：set-ExecutionPolicy RemoteSigned

（4）在终端执行：get-ExecutionPolicy，显示RemoteSigned
如下：