闲言碎语

在以前的公司从来都没用过webpack，辞职之后静下心来把自己当做一个初学者，开始一点点的查漏补缺。
看到最多的就是用webpack打个包。昨天自己上手安装了一次，有出现一点小问题，不过后来找到了改正方法，现在分享一下简单地安装与配置方法。如果以后看到更多的webpack的操作，也会继续更新这篇文章。

下载

要安装webpack，是通过npm来安装的，那么就必须先下载node.js。因为npm是随同node.js一起的包管理工具。
1.首先到这里 下载对应版本的node.js。要是网址失效就百度一下node.js的官方下载网站。

这是window-64位版本的，请下载对应的版本

2.开始安装node.js。

我是装在其它盘，默认是在C盘

注：我装在其它盘的原因是不想C盘越来越大，到时候还要用npm装一些包，所以将node.js装在了非C盘的位置。

默认安装，直接点击next

3.查看是否安装成功。

调出控制台

查看版本

安装完成后，对应的目录下是这样的

环境配置

这里很重要！！
说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间。（AppData文件夹是隐藏的，调成显示隐藏文件及才能看到）
例如：我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图：
（如果之前将node.js安装到别的盘，那么这里的路径也要相应的改变，不一定是D:\Develop\xxx，是根据自己的设置来的）

创建两个文件夹，用来存放安装的包和缓存

创建完两个空文件夹之后，打开cmd命令窗口，输入
npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"
(prefix和后面的路径"xxxx"之间是有1个空格隔开的，cache与"xxxx"也是一样，用一个空格隔开)

输入对应的语句，设置安装包文件夹和缓存文件夹

接下来设置环境变量，关闭cmd窗口，“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

去设置环境变量

进入环境变量对话框，在【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】

系统变量新建NODE_PATH

去修改用户变量的值

找到npm对应的默认路径

输入对应的路径，再点确定

最后一路确定，关闭窗口出来。

测试

配置完后，安装个module测试下，安装webpack，打开cmd窗口，
输入如下命令进行模块的全局安装：

npm install webpack -g -g是全局安装的意思

输入对应的安装包名

PS:图中安装的是express模块。而我们要安装的是webpack，所以指令是npm install webpack -g,
解释一下，为什么要-g全局安装，因为之前我们已经修改了环境变量，我们刚进CMD的时候，盘符是C:\Users\JayYang(这个是个人的PC名)，不用-g来全局安装，是会安装到这个目录下的node_modules文件夹中，不存在这个文件夹的话会自动生成。

node_global文件夹会出现这样的文件，表示安装成功

PS:我昨天遇到的问题是，已经修改了环境变量，也已经安装完成，但是在对应的其他盘符的nodejs\node_global中没有出现这些，反而还是在C:\User\XXX\AppData\Roaming\npm中出现了一个webpack的文件夹。而且导致我要用webpack打包我的文件的时候，控制台显示webpack不是内部命令，一直不知道问题出现在了哪里，甚至还重新装了，但是并没有用。

后来输入npm config ls命令，检查了我的设置，才发现，之前在设置模块文件夹的时候，也就是在npm config set prefix "D:\Develop\nodejs\node_global"时，prefix与"xxx"之间没有空格，导致设置失败，默认的还是C:\User\xxxxx，但是自己已经手动更改了系统变量和个人环境变量的值，导致两边设置不统一，所以webpack一直用不了。但是这个设置不能通过卸载node.js，再重新安装来恢复原样（亲测，删了重装没有设置还是会保存之前的设置）。

最后查了好久，方法是删除C:\Users\Administrator\.npmrc这个文件。如果.npmrc不在这个目录下，就全局搜一下，Administrator是管理员用户，一般我们设置的是个人用户名，所以对应的是C:\User\XXX\.npmrc