TypeScript 中 Webpack 怎么配置多环境打包变量差异化控制-js教程-PHP中文网

typescript 项目中用 webpack 实现多环境打包，核心是环境变量注入 + 类型声明统一 + 构建脚本隔离：通过 cross-env 动态加载 dev/test/prod.env.js，defineplugin 注入 process.env，配合 env.d.ts 声明类型，再由 package.json 脚本区分构建命令。

typescript 中 webpack 怎么配置多环境打包变量差异化控制

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 文件里就能安全使用：

Comprehensive Three.js 3D graphics reference

详细的 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 时：