Webpack如何实现环境变量管理

Webpack 通过 DefinePlugin 插件来实现环境变量的管理。DefinePlugin 允许在编译时创建全局常量，这些常量可以在整个应用程序中使用。这对于根据不同环境（如开发、生产等）设置不同的配置非常有用。

以下是如何使用 DefinePlugin 进行环境变量管理的步骤：

1. 首先，确保已经安装了 webpack 和 webpack-cli。如果没有，请使用以下命令安装：

npm install --save-dev webpack webpack-cli

2. 在项目根目录下创建一个名为 webpack.config.js 的文件，这将是 Webpack 的配置文件。

3. 在 webpack.config.js 文件中，引入 webpack 模块并配置 DefinePlugin。例如：

const webpack = require('webpack');

module.exports = (env, argv) => {
  // 根据传入的参数设置环境变量
  const isProduction = argv.mode === 'production';

  return {
    // ...其他配置
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(argv.mode),
        'process.env.API_URL': JSON.stringify(isProduction ? 'https://api.example.com' : 'https://api-dev.example.com'),
      }),
    ],
  };
};

在这个例子中，我们根据传入的 mode 参数设置了 process.env.NODE_ENV 环境变量。同时，我们还设置了一个名为 process.env.API_URL 的环境变量，它根据当前环境返回不同的 API URL。

4. 在应用程序代码中，可以使用 process.env 对象访问这些环境变量。例如：

console.log('Current environment:', process.env.NODE_ENV);
console.log('API URL:', process.env.API_URL);

5. 最后，在 package.json 文件中的 scripts 部分，为不同的环境添加 Webpack 构建命令。例如：

{
  "scripts": {
    "build:development": "webpack --mode development",
    "build:production": "webpack --mode production"
  }
}

现在，可以使用 npm run build:development 和 npm run build:production 命令分别构建开发和生产环境的应用程序。在这两个命令中，环境变量将分别设置为相应的值。