Webpack 环境变量详解：从 NODE_ENV 到动态配置

Webpack 的环境变量是构建过程中重要的配置工具，它们可以根据不同的环境（开发、生产、测试等）来调整代码的行为。

以下是 Webpack 环境变量的几种类型及其应用场景：

1. 'NODE_ENV'：

• 指定当前环境，例如 'development'、'production' 或 'test'。
• 常见用法：
  • 在开发环境中启用调试工具，如 source map 和热更新。
  • 在生产环境中压缩代码和优化性能。

2. 'process.env'：

• Webpack 会将 'process.env' 中的变量注入到代码中。
• 可以通过这些变量来控制代码的行为，例如：
  • 启用或禁用特定功能。
  • 设置不同的 API 地址。

3. 'DefinePlugin'：

• 使用 'DefinePlugin' 插件可以为代码中定义的变量指定值。
• 常用于：
  • 指定 API 地址。
  • 定义版本号。
  • 注入其他常量。

4. 环境变量文件：

• 在项目根目录下添加一个 '.env' 文件，并在代码中通过 'dotenv' 插件读取这些变量。
• 适用于：
  • 将敏感信息（如 API 密钥）存储在环境变量中。
  • 轻松切换不同的环境配置。

通过合理利用环境变量，我们可以轻松地管理 Webpack 构建过程并根据不同的环境需求进行配置。