TypeScript 项目中用 Webpack 实现多环境打包，核心是环境变量注入 + 类型声明统一 + 构建脚本隔离：通过 cross-env 动态加载 dev/test/prod.env.js，DefinePlugin 注入 process.env，配合 env.d.ts 声明类型，再由 package.json 脚本区分构建命令。
TypeScript 项目中用 Webpack 实现多环境打包，核心是让不同环境（开发、测试、生产）加载不同的配置变量（比如 API 地址、功能开关、日志级别等），同时保证类型安全和构建流程稳定。关键不在“写死多个 config 文件”，而在于环境变量注入 + 类型声明统一 + 构建脚本隔离。
环境变量注入：用 cross-env + 自定义 env 文件
Webpack 本身不解析 .env 文件，需靠 cross-env 在启动时注入 Node.js 环境变量，再由 webpack.config.js 或 config/index.js 读取并传递给代码。
- 在
config/目录下新建：-
dev.env.js（本地开发，含代理） -
test.env.js（测试环境） -
prod.env.js（正式环境）
-
每个文件导出一个对象，例如：
// config/test.env.js
module.exports = {
NODE_ENV: '"production"',
ENV_CONFIG: '"test"',
BASE_API: '"https://api-test.example.com"',
ENABLE_ANALYTICS: 'false'
}注意：字符串值必须用双引号包裹再套单引号（'"xxx"'），否则 Webpack DefinePlugin 会把它当变量而非字符串字面量。
webpack.config.js 中接入环境变量
在 webpack.config.js（或 build/webpack.prod.conf.js）里，根据 process.env.env_config 动态 require 对应 env 文件：
const envConfigName = process.env.env_config || 'dev'
const envFile = require(`./config/${envConfigName}.env`)然后通过 DefinePlugin 注入到全局编译上下文，让 TypeScript 代码能直接访问：
plugins: [
new webpack.DefinePlugin({
'process.env': envFile
})
]这样你在 .ts 文件里就能安全使用：
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
// api.ts export const API_BASE_URL = process.env.BASE_API as string export const IS_TEST_ENV = process.env.ENV_CONFIG === 'test'
⚠️ 提示：process.env.* 默认是 any 类型，建议配合 declare namespace NodeJS 声明增强类型检查（见下一点）。
TypeScript 类型声明同步：避免 any 泛滥
在项目根目录新建 types/env.d.ts，显式声明所有可能的环境变量：
declare namespace NodeJS {
interface ProcessEnv {
NODE_ENV: 'development' | 'production' | 'testing'
ENV_CONFIG: 'dev' | 'test' | 'prod'
BASE_API: string
ENABLE_ANALYTICS: string // 注意：实际是字符串字面量，但值为 'true'/'false'
}
}只要 tsconfig.json 包含该文件（默认 src/types/**/* 或手动 include），TS 编译器就能校验 process.env.BASE_API 是否被正确定义，拼写错误或缺失字段会直接报错。
构建脚本区分：package.json 中定义清晰命令
"scripts": {
"dev": "webpack serve --config build/webpack.dev.conf.js",
"build:dev": "cross-env env_config=dev webpack --config build/webpack.prod.conf.js",
"build:test": "cross-env env_config=test webpack --config build/webpack.prod.conf.js",
"build:prod": "cross-env env_config=prod webpack --config build/webpack.prod.conf.js"
}运行 npm run build:test 时：
-
env_config=test被注入 - webpack 加载
config/test.env.js -
DefinePlugin把变量挂到process.env - TS 类型系统全程校验，无运行时意外
不需要改 webpack.mode 或重写多套 loader 规则——变量差异只发生在配置层和业务逻辑层，打包流程保持一致。
不复杂但容易忽略
