一：工作环境准备安装及配置文件介绍 —node npm Git vscode_环境变量 git 和 node.js 的路径

一：安装 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 相关环境变量

1：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 的目的是方便之后安装插件时，能找到自己全局安装在哪里，让一切可控

2：然后配置 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 的环境变量

 

三：替代npm方案

npm 安装各种插件包，但是，出错率实在是太大了~ 各种意想不到的问题层出不穷，只一个node-sass 就够让人受的了~ 更别说，用npm 安装插件包，还总是会出现漏装依赖插件的情况

1：yarn替代npm

npm install yarn -g

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

2：cnpm替代npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm config set registry https://registry.npm.taobao.org --global
cnpm config set disturl https://npm.taobao.org/dist --global
cnpm config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
 

四：全局安装 nrm rimraf npm 换源

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

1：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删除文件

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

npm install rimraf -g
安装成功后，如果你有想要删除的文件夹，只需在终端命令行中定位到该文件夹父级，输入命令：
rimraf folderName
folderName 是你要删除的文件夹名字，命令执行后，稍等片刻，该文件夹及其里面的一切就都被删除了。
而我建议安装该插件的原因就是，接下来的项目中，我们需要用到npm安装很多插件，而这些插件会全部在项目里自动生成的一个 node_modules 文件夹下，很多时候我们会有需要删除这个文件夹，通常我们是直接删除不掉的，很多插件文件路径太深，这时候，我们只能通过该插件来完成这个操作了~

6:配置文件—开发dev、测试test、生产buid

（1）发布测试及生产环境

一个完整的项目,需要开发->测试->上线三个阶段，根据不同阶段的需求其对应配置文件会略有区别。

首先在项目根目录下建立三个文件，webpack.dev.conf.js，webpack.test.conf.js，webpack.prod.conf.js。

一个项目从开发到测试到上线，这个过程的三个阶段，需要三个环境的代码,也就需要三套webpack配置文件

开发环境(webpack.dev.conf.js)：怎么方便怎么来~，想怎么配置就怎么配置；
测试环境(webpack.test.conf.js)：测试环境的配置与生产环境要一致，以达到在测试环境还原生产环境BUG的目的，其与生产环境不同之处在于，测试环境打包可以不用压缩，可以生成map，以方便调试；
生产环境(webpack.prod.conf.js)：上线的代码，要尽量极致压缩，包括html,css,js、图片等的压缩，生产环境不必再去生map

开发环境的配置会逐一介绍，生成环境配置见：https://blog.csdn.net/qq_24892029/article/details/108623150。

其次在package.json文件中需要配置：

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack --config webpack.dev.conf.js",  //开发环境
    "start": "webpack-dev-server --config webpack.dev.conf.js --color --progress",  //开发环境含开发服务
    "test": "cross-env NODE_ENV=production webpack --config webpack.test.conf.js",  //测试环境
    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.conf.js"  //生产环境
},

这样在控制台通过npm run dev（start、test、build） 就可执行相应的配置操作了

（2）预览测试及生产环境

       测试与生产环境因为已经是要与服务相关联了，在打包配置的output中配置了publicPath值为/，用绝对地址。
所以如果要预览效果，就不能通过直接打开静态文件的方式去预览了。可以让程序给配本地服务，或者自己电脑开启iis服务，添加网站，物理路径设置为测试或者生产环境代码生成的文件夹，然后通过本地服务去预览。