webpack4.x配置01：项目准备工作

如果你喜欢这系列的文章，欢迎star我的项目，源码地址，点击这里

工作环境准备

安装 node npm Git vscode

1. node.js

http://nodejs.cn/ http://nodejs.org/#download 使用这些技术，node.js 是必须的，从官网下载并安装到自己的电脑，你需要配置并知道自己把它安装到了哪里，我的安装目录：D：/node

2. npm

通常安装过 node 后就会自动安装了 npm,node 安装成功后，win+r,输入 cmd ,打开终端命令行 cmd，输入 node -v , npm -v，检查版本

3. Git

安装 Git 的原因是 npm 的很多插件都是在 Github 上，当我们需要用到一些最新版本的插件时，往往需要用到 Git 相关命令、路径，当然，若想在 Github 上管理自己的项目，也是必须要安装 Git 的。

http://git-scm.com/download/win

下载.exe后运行，一路 next 安装完成

配置 node npm Git 相关环境变量

node 命令路径、npm 命令路径、npm 的全局模块的存放路径、cache 的路径

npm 默认的path C:\Users\Administrator\AppData\Roaming\npm（前面的\Users\Administrator，根据个人电脑登录用户）

要配置 npm 的全局模块的存放路径以及 cache 的路径,需要在你想安装的目录下建立 node_global 及 node_cache 两个文件夹，如我的 node.js 安装在 D 盘 node 文件夹下，那么在 D 盘 node 文件下建立 node_global 及 node_cache 两个文件夹

然后启动 cmd 输入

npm config set prefix "D:\node\node_global"
npm config set cache "D:\node\node_cache"

可以通过输入 npm config get prefix ，npm config get cache 来查看设置是否成功。

这里配置 node_global，node_cache 的目的是方便之后安装插件时，能找到自己全局安装在哪里，让一切可控

然后配置 node、npm、node_global 的 path 路径

“我的电脑”右键“属性”-“高级系统设置”-“高级”-“环境变量”。

在用户变量内的 path 上添加 D:\node\node_modules\npm;D:\node\node_global 这里有 npm 和 node_global 两个变量路径，未添加前用户变量的此 path 有一个系统默认的 npm 路径，改成这个路径

然后在系统变量上新建 node_path，其值为 D:\node\node_global\node_modules

系统变量里还有一个在安装 node 时默认添加的 node.js 的安装路径这个也是必须的。

这里如果按照前文步骤，安装了 Git，那么能在系统变量的 path 变量中，找到 Git 的环境变量

全局安装 nrm rimraf npm 换源

path 路径都设置完成后，就可以用 npm 安装插件了，我们来看看效果， 打开终端命令行 cmd

npm 安装插件速度会非常非常慢，所以我们需要先让它速度能快一点，这里就需要用到 nrm 插件了，

cmd 输入命令：

npm install nrm -g 

耐心等待~ -g 是全局安装，安装成功后，你可以到之前设置的 D:/node/node_global/ 文件夹下找到这个插件

安装成功后，命令行输入 nrm ls 可以查看目前有哪些源可供 npm 使用，npm 前面有个 * 号，说明现在用的是这个源，再用 nrm test 测试哪个源安装最快（测试过程会有点慢），数字越小说明安装越快

找到最快的那个后（我这里是 taobao 源），命令行输入 nrm use taobao

此时 npm 源就已经换好了，不放心你可以再使用 nrm ls 查看 * 是不是已经在 taobao 前面了~

我们在电脑操作过程中，都会遇到，有些文件删除不掉，而且提示是文件路径过深的缘故，这时我们就需要用到 rimraf 插件了，首先需要全局安装该插件 cmd 输入命令：

npm install rimraf -g

安装成功后，如果你有想要删除的文件夹，只需在终端命令行中定位到该文件夹父级，输入命令：

rimraf folderName

folderName 是你要删除的文件夹名字，命令执行后，稍等片刻，该文件夹及其里面的一切就都被删除了。

而我建议安装该插件的原因就是，接下来的项目中，我们需要用到npm安装很多插件，而这些插件会全部在项目里自动生成的一个 node_modules 文件夹下，很多时候我们会有需要删除这个文件夹，通常我们是直接删除不掉的，很多插件文件路径太深，这时候，我们只能通过该插件来完成这个操作了~

vscode 为本系列文章推荐编辑器