基于create-react-app 的 webpack 配置多环境

前端项目配置多环境

前端开发和打包环境都可配置多环境 这里主要说明开发模式多环境的配置

配置文件

脚手架工具 create-react-app

1. 使用 create-react-app 提供的 yarn run eject 命令将所有内建的配置暴露出来
2. scripts 目录下将暴露所有的环境配置文件

环境配置

修改 start.js文件配置

修改package.json文件配置

通过修改环境变量NODE_ENV 来而配置多环境，分别为dev ,test, uat, pro 环境。 开发环境为避免跨域问题，一般通过代理访问。

    const proxy = require('http-proxy-middleware');
    const NODE_ENV = process.env.NODE_ENV||"development";
    const apiMap = {
        development:"http://10.250.2500.100:3000",
        test:"http://test.api.com",
        uat:"http://uat.api.com",
        pro:"http://pro.api.com"
    }
    const envApi = apiMap[NODE_ENV];
    module.exports = function (app) {
      app.use('/api', proxy({
        target: envApi, // target host
        changeOrigin: true, 
        ws: false, 
        pathRewrite: {
          '^/api': '', 
        }
      }));
    };
    

多环境配置，至此配置完成. yarn start:test 开启的服务可代理到测试环境。同理yarn start:uat 可代理到uat 环境。