在 Webpack 中，环境变量（Environment Variables）是指在构建过程中可供访问的全局变量。这些变量可以在 Webpack 配置中使用，根据不同的环境来执行不同的操作，例如，在开发环境和生产环境下使用不同的配置。

总结

选择哪种方法取决于你的具体需求和项目结构。
对于简单的场景，使用 package.json 的 scripts 字段注入变量，在 webpack 配置中直接接受并使用，同时也支持某些工具库（如cross-env）。
对于更复杂的场景，你可能需要使用 DefinePlugin 插件或 .env 文件来定义并管理你的环境变量。

一、注入参数到启动命令行

我们可以在package.json的启动脚本中注入环境变量

主要方式有这几种：

1、直接注入

"scripts": {
  "build": "webpack",
  "build:mini": "set MINIFY=1 && webpack",  // Windows
  "build:minimac": "export MINIFY=1 && webpack"  // macOS/Linux
}

然后在你的 Webpack 配置文件（如 webpack.config.js）中，你可以通过 process.env 访问这些环境变量：

console.log(process.env.MINIFY); // 输出: 1

2、使用 cross-env 插件注入

cross-env 是一个跨平台设置环境变量的第三方包，可以统一在多平台设置环境变量。

"scripts": {
  "build:mini": "cross-env MINIFY=21 webpack"
}

然后在你的 Webpack 配置文件（如 webpack.config.js）中，你可以通过 process.env 访问这些环境变量：

console.log(process.env.MINIFY); // 输出: 2

3、使用 env 参数

当 Webpack 配置文件是一个导出函数时，你可以通过参数 env 接收自定义的任何变量和内置的一些环境变量。

"scripts": {
  "build": "webpack --env mytest=soso --env production"
}

然后在你的 Webpack 配置文件（如 webpack.config.js）中：

module.exports = (env, argv) => {
  console.log(env.mytest); // 输出: soso
  console.log(env.production); // 输出: true

  return {
    // ... 其他Webpack配置
  };
};

二、使用插件

1、使用 DefinePlugin 插件

DefinePlugin 是 Webpack 自带的一个插件，它允许你定义一些在编译时可以配置的全局常量。

const { DefinePlugin } = require("webpack");
module.exports = {
  // ... 其他Webpack配置
  plugins: [
    new DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      MY_TEST: JSON.stringify("mytest"),
    }),
  ],
};

然后在你的代码中，你可以直接使用这些常量：

console.log(process.env.NODE_ENV); // 输出: development 或 production
console.log(MY_TEST); // 输出: mytest

注意：DefinePlugin 定义的常量在代码中会被直接替换为它们的值，因此它们不能用作对象的属性名或函数名。

三、使用配置文件

如果你使用的是 Create React App 或类似的脚手架工具，它们可能支持通过 .env 文件来设置环境变量。在这种情况下，你需要安装 dotenv-webpack 插件来在 Webpack 项目中使用这一功能。

‌ 安装 dotenv-webpack

npm install dotenv-webpack --save-dev

在你的 Webpack 配置文件（如 webpack.config.js）中：

const Dotenv = require("dotenv-webpack");

module.exports = {
  // ... 其他Webpack配置
  plugins: [new Dotenv()],
};

然后在你的项目根目录下创建 .env 文件，添加环境变量：

plaintextCopy CodeNODE_ENV=development
MY_TEST=mytest

这些环境变量现在可以通过 process.env 在你的代码中访问。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24