webpack的前端项目怎么区分不同环境

一般来说，我们任何一个web项目可能都会出现不同的环境，比如dev，test， production环境。

不同环境，会有不同的配置。比如，前端的测试环境需要连后端的测试环境，前端的正式环境需要连后端的正式环境。那么就会出现不同环境的后端API的URL。如果我们使用Axios, 那么就是baseUrl不一样。

这就要求，我们前端的代码里面需要有区分环境的能力，给不同的环境打包的时候，把正确的配置项打进去了。

所以，我们现在有了基本的思路：

step1: 在执行打包命令的时候，传入不同的环境参数, 获取这个参数
step2: 要在全局暴露step1拿到的环境参数
step3: 拿到在step2暴露出来的这个环境参数，做不同的配置

Step1: 在执行打包命令的时候，传入不同的环境参数, 获取这个参数

假如我们现在给测试环境打包，

yarn build --test

我们在webpack.config.js文件里面读取--test这个命令行参数

//webpack.config.js
const isBuildForTest =  process.argv.includes('--test');

step2: 要在全局暴露step1拿到的环境参数

//webpack.config.js
plugins: [
        new webpack.DefinePlugin({
              IS_BUILD_FOR_TEST: isBuildForTest
        })
    ]

Webpack的DefinePlugin这个插件，允许创建一个在编译时可以配置的全局常量。

step3: 拿到在step2暴露出来的这个环境参数，做不同的配置

//property.js
const env = (process.env.NODE_ENV === 'production' && IS_BUILD_FOR_TEST) ? 'test' : 'production';
const config = {
    test: {
        API_HOST: 'http://yyy.yyy.yyy'
    },
    production: {
        API_HOST: 'https://xxx.xxx.xxx'
    }
};
const API_HOST = config[env].API_HOST;
export {API_HOST};