区分开发和线上环境有几种方法，下面来给大家一一讲解：
1.通过–config来指定不同的配置文件。
通过webpack.dev.js和webpack.prod.js来区分不同的打包入口，当然习惯性把通用配置放在了webpack.common.js中，再通过webpack_merge插件来合并。
2.通过webpack中的环境变量参数。
什么叫环境变量？顾名思义大家可以理解成区分开发和线上环境的变量。在webpack的官方文档中我们可以看到介绍：
只要在打包命令中加入–env就可以在打包node进程中使用，命令如下：
图中我们可以看到在dev-build和build这两个开发环境和线上环境打包的命令中，都使用了webpack.common.js作为配置文件，不同的是build命令传入了一个production的环境变量。在webpack.common.js中这样使用：
在最后module.exports的时候，导出一个函数，入参即为传入的环境变量，如果传入了production的话，即把webpack.common.js同prodConfig一起合并返回，否则和devConfig合并。
3.通过node本身的环境变量来区分环境。
webpack在打包代码的时候，是在node环境中来执行JS的，所以可以利用node本身的环境变量来区分开发和线上的打包环境：
在执行node命令的命令起始位置添加NODE_ENV这样的变量并赋值，那么在node执行的进程中就可以这样来使用：
在配置文件中直接通过process.env.NODE_ENV就可以通过命令行中传过来的环境变量来决定同哪个配置文件进行合并。
本次介绍的区分环境的方法都是作用于node进程中，也就是只有在打包阶段起作用，下次来给大家分析如何在js的前端代码运行过程中使环境变量起作用。
图片来源：http://www.coubai.com/ 网络游戏
转载：https://blog.csdn.net/weixin_56659504/article/details/115700907