新手安装配置node、npm、webpack

      “工欲善其事，必先利其器”。npm和webpack相互配合，是非常便捷的前端项目工具，可以节省很多不必要的时间开销。

       一直使用windows的小伙伴初次使用webpack在执行webpack命令时可能会碰到“webpack不是内部或者外部命令”的错误，这个问题是环境变量没有配置的原因。查看了好多人的微博，都是单纯的转载别人的微博自己都没验证的，根据他们的方法配置出来还是报上述错误。

以下安装配置亲测可以正常运行！

node安装

      Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。

     下载好之后开始安装，执行下一步

     选择安装路径（默认安装在C，不建议，你懂的）

     最新版的node会自动配置环境变量

     下一步，安装，完成，node.js就安装完成了。

     检测安装 windows + R进入CMD

     输入 node -v  执行

     

     

     说明node.js已经安装完成，NPM在node安装时已经安装好，直接输入 npm -v 如上图显示版本号说明npm调用成功

设置全局文件夹和缓存文件

       默认缓存文件是在 “C:\Users\admin\AppData\Roaming\npm”中，

       修改默认设置：

                      进入到安装目录： "d:" 进入D盘，"cd  D:\node"进入到安装目录

                      创建全局文件夹： "mkdir node_global"

                      创建缓存文件夹： "mkdir node_cache"

 

    

      安装目录里已经多出两个文件夹，然后配置下载文件的路径及其缓存文件的路径

             配置全局文件路径：npm config set prefix "D:\node\node_global"

             配置缓存文件路径：npm config set cache "D:\node\node_cache"

      npm的配置就修改完成了，接下来修改node的环境变量为新的配置

修改Node环境变量

      

       控制面板\系统和安全\系统  ------>  高级系统设置   ------> 环境变量

       系统变量设置：新建一个系统变量，如下图所示，变量值为自己安装目录下的"..\..\node_modules"

      

     用户变量设置：修改PATH为你的全局文件路径"D:\node\node_global"

            

       

      node环境变量配置完成，检测一下：执行 npm install express -g 待安装成功后 执行 npm list -g

     

     

     第二行显示的就是配置的路径，说明修改文件路径成功了

Webpack安装及其配置

       全局安装webpack     执行 npm install webpack -g

    

     配置webpack环境变量：在用户变量新增

     

     

     完成后执行 webpack -v

     

     显示出webpack的版本信息，说明webpack已经可以正常工作了。