Webpack中传递环境变量

Webpack 提供了多种方式来配置其构建过程，其中之一就是通过 --env 参数传递环境变量。这一功能不仅简洁，还允许在不同的构建环境之间灵活切换。本文将介绍如何使用这一参数，并展示几个实用示例。

简单的键-值对

最简单的使用方式是传递一个不带值的键，如下：

webpack --env production

这样做会在 webpack.config.js 文件中创建一个名为 production 的环境变量。

module.exports = (env) => {
  console.log(env); // 输出 { production: true }
  return {};
};

可以传递多个键，每个都作为一个单独的环境变量：

webpack --env production --env minimize

这样在配置文件中会得到如下的 env 对象：

module.exports = (env) => {
  console.log(env); // 输出 { production: true, minimize: true }
  return {};
};

除了简单的键-值对，还可以给每个键指定一个值：

webpack --env.mode=production --env.optimize=true

这种情况下，在 webpack.config.js 文件里，env 对象如下：

module.exports = (env) => {
  console.log(env); // 输出 { mode: 'production', optimize: 'true' }
  return {};
};

根据这些环境变量，可以灵活地修改 Webpack 的配置。

module.exports = (env) => {
  return {
    mode: env.production ? 'production' : 'development',
    // 其他配置项...
  };
};

运行以下命令：

webpack --env.production

构建会在生产模式下进行。

使用 --env 参数是一种灵活而强大的方式，以传递环境变量到 Webpack 配置中。这不仅仅局限于传递布尔值或字符串，还可以根据不同的环境需求灵活地调整构建配置。了解并掌握这一特性，将有助于创建更为灵活和可配置的 Webpack 构建流程。