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 命令分別構建開發和生產環境的應用程序。在這兩個命令中，環境變量將分別設置為相應的值。