区分环境

用户关心的是程序的功能服务和使用体验，而对开发者而言，关心的是程序是否方便调试，所以一个项目在不同的环境运行需要表现出与环境相关的特性。比如为了避免开发过程中对线上的数据造成影响，不同的环境开发代码和后台进行交互的接口地址应该是不同的，所以针对项目区分环境是十分有必要的。

在之前章节介绍过相关的环境变量的使用和设置，其中我们可以使用process.env来区分环境，做一些优化操作。如下所示：

const isProd = process.env.NODE_ENV === "production";
module.exports = {
    mode: isProd ? "production" : "development",
}

常量isProd用于区分本次构建的环境是否是生产环境，然后根据isProd来设置Webpack的构建模式，之前我们介绍过，Webpack的不同构建模式，其内部有有着不同的优化手段。比如mode为production的时候，Webpack会对构建的代码进行一定程度的压缩等等，减少输出文件的大小。

针对不同的环境创建不同的配置文件，同时使用Webpack-merge模块来复用全部环境所需要使用的公共代码，可以很好的针对环境进行构建。后续开发的配置，只需要针对单独的环境文件进行配置，降低了配置的复杂度。