前端配置打包命令，配合后端自动部署

前端配置打包命令，配合后端自动部署

需求

现在后端哥配置了三台服务器，分别是正式服务器、测试服务器和开发调试用的服务器，现在这三台服务器上，都配
置了自动部署，自动部署的原理就是当我们提交相应分支git的时候，服务器会拉取这些新的提交，同时触发脚本，脚本的命令就是我们跟服务器约定好的打包命令
（npm run build，npm run buildDev，npm run
buildTest），目的就是实现提交git，然后三台服务器分别能够打出三套不同接口的前端程序包。

• 正式服务器 对应正式环境 master分支 （尚未部署）
• 测试服务器 对应test分支
• 开发服务器 对应develop分支

前端部分

我们前端这样配置有什么好处呢？

我们之前，开发的时候，需要手动将接口切换到开发的接口，打包正式的服务器需要再切换到正式服务器的接口。只要
是认为操作的切换，保不齐哪次就忘记了切换，同时，频繁的切换也确实是非常的麻烦，尽管就四个接口地址（业务接口，用户中心接口，地图代理，地图key）。现在，配置好了之后，我们前端不需要再关心切换接口的问题了，只需要开发的时候运行npm run dev，打包正式服务器运行一下 npm run build 就可以了，部署时不再需要做任何接口方面的修改。

前端实现方法

1. 目标：要配置出能够打包三个不同的接口地址的三条命令，提供给后端哥作为自动部署执行的命令。
2. webpack如何配置npm run 命令
   做法：在package.json 的scripts块中参考build命令，复制并修改处 buildDev、
   buildTest命令，同时，这两条命令，我们将它们分别指向build文件夹下的
   buildDev.js文件和buildTest.js文件。为什么要这么做呢？指向这两个文件的原因是我们需要再打包的时候，让webpack知道他需要打包config文件夹下的哪个接口配置文件。这其中的关键点就在于build.js 文件中的process.env.NODE_ENV这个参数赋值，这个参数相当于当前运行环境的名字，有了这个名字，我们就可以在所有项目文件中针对不同的环境进行不同的操作，比如假设我们需要封装axios，同时如果我们配置了跨域代理，如果我们不想在部署正式服务器和开发的时候有任何配置的修改，我们就可以提前用这条命令区分接口要不要加代理的前缀，这个对于一个懒散的程序猿来说是非常有意义的，因为我tmd可不想每次部署正式服务器还得改一堆乱七八糟的配置！！！言归正传，修改完了这个NODE_ENV后，webpack是怎么根据这个名字来区分打包的接口的呢？

webpakc打包运行流程

1. 请看config文件夹下的prod.env.js，他在模块导出的时候，将NODE_ENV命名为了production
2. 请看build.js，build.js打包的时候，所有关于prod环境webpack的配置都是引入了webpack.prod.conf这个文件，ok，现在请打开这个传奇的文件，你会发现，在引入包后正式运行逻辑的第一个部分，就是指定引入接口地址的文件，而我在这个地方，根据process.env.NODE_ENV的不同，引入了不同的接口配置文件！！！这就实现了不同的命令打包不同的接口地址的目的。

不足

当然，现在的配置并不是完美的，还有许许多多需要改进的点，

1. build.js和buildDev和buildtest文件的大部分地方都是完全一样的，其实完全可以再加一个中间js，将这些公用的配置引入，然后这三个js只负责区分三条命令不同的地方（NODE_DEV名字）
2. webpack.prod.conf.js这个文件，从名字看，一眼就看出来是正式环境用的配置，而我却将另外两个环境的配置统统指向了这个文件，这样做，一看就是不规范的。
3. 假设现在再加一个环境，我就需要再把这些操作配置一遍，非常的麻烦！！！

解决这些不足的思路

目前的思路关键点在于webpack能否知道当前运行的命令名称是什么。要问我解决的时间，lz心情好的时候 !!!