从零开始搭建React+TypeScript+webpack开发环境——多环境配置管理方案

前言

在现代前端开发中，应用程序通常需要在多种环境（开发、测试、Mock、生产等）中运行，每种环境都需要不同的配置参数。本文将详细介绍如何通过YAML配置文件实现Webpack环境变量的可配置化管理，使项目能够灵活适应各种部署场景。

一、YAML配置文件结构设计

我们采用分层配置方案，在项目根目录创建config文件夹，包含以下配置文件：

config/├── default.yaml        # 基础默认配置├── development.yaml    # 开发环境配置├── mock.yaml           # Mock环境配置├── production.yaml     # 生产环境配置└── prd.template.yaml   # 生产环境配置模板（含占位符）

配置文件示例

default.yaml (基础配置)

API_HOST: 'http://localhost:8000/api/v1'
AUTH_SELF_URL