react webpack配置环境变量

lib/env.js

const { join } = require('path');
const ENV = process.env.ENV;

const getEnv = () => {
  const path = join(process.cwd(), `.env.${ENV}`);
  const dotEnv = require('dotenv');
  const result = dotEnv.config({
    path,
  });

  const c = {};
  const { parsed } = result;
  for (const key in parsed) {
    c[key] = JSON.stringify(parsed[key]);
  }
  return c;
};

module.exports = {
  getEnv,
};

webpack/plugins

const { getEnv } = require('../lib/env');

const API = getEnv();
module.exports = [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, '../public/index.html'),
  }),
  new webpack.DefinePlugin({
    ...API,
  }),
];

.env.development

SERVICE_API_A=https://api-a-service-pre.airqualitychina.cn:9998
SERVICE_API_B=https://api-b-service-pre.airqualitychina.cn:9998

.env.production

SERVICE_API_A=https://api-a-service.airqualitychina.cn:9998
SERVICE_API_B=https://api-b-service.airqualitychina.cn:9998

api.js (使用方式)

export const baseURL = SERVICE_API_A;