博客站

在 Webpack 中，处理环境变量是一个常见的需求，尤其是在区分开发环境和生产环境时。Webpack 提供了多种方式来处理环境变量，以下是常用的方法：

1. 使用 mode 配置

Webpack 的 mode 配置项可以指定当前环境（development 或 production），并自动启用相应的优化。

示例配置

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
};

优点

• 自动启用相应的优化（如 Tree Shaking、代码压缩等）。
• 简单直接，无需额外配置。

2. 使用 DefinePlugin 定义全局变量

DefinePlugin 是 Webpack 内置的插件，用于定义全局常量。

示例配置

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'API_URL': JSON.stringify('https://api.example.com')
    })
  ]
};

优点

• 可以在代码中直接使用定义的常量。
• 支持动态注入环境变量。

3. 使用 dotenv 加载环境变量

dotenv 是一个流行的库，用于从 .env 文件加载环境变量。

安装

npm install dotenv --save

示例配置

1. 创建 .env 文件：

   NODE_ENV=development
   API_URL=https://api.example.com
   

2. 在 Webpack 配置中加载 .env 文件：

   const dotenv = require('dotenv');
   const webpack = require('webpack');
   
   dotenv.config(); // 加载 .env 文件
   
   module.exports = {
     plugins: [
       new webpack.DefinePlugin({
         'process.env': JSON.stringify(process.env)
       })
     ]
   };
   

优点

• 集中管理环境变量。
• 支持从 .env 文件加载变量。

4. 使用 cross-env 设置环境变量

cross-env 是一个跨平台的工具，用于设置环境变量。

安装

npm install cross-env --save-dev

示例配置

1. 在 package.json 中设置环境变量：

   {
     "scripts": {
       "build": "cross-env NODE_ENV=production webpack",
       "start": "cross-env NODE_ENV=development webpack serve"
     }
   }
   

2. 在 Webpack 配置中使用环境变量：

   module.exports = {
     mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
   };
   

优点

• 跨平台支持（Windows、macOS、Linux）。
• 简单易用，适合命令行场景。

5. 使用 webpack-merge 区分环境配置

webpack-merge 是一个工具，用于合并多个 Webpack 配置，适合区分不同环境的配置。

安装

npm install webpack-merge --save-dev

示例配置

1. 创建 webpack.common.js（通用配置）：

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'bundle.js'
     }
   };
   

2. 创建 webpack.dev.js（开发环境配置）：

   const { merge } = require('webpack-merge');
   const common = require('./webpack.common.js');
   
   module.exports = merge(common, {
     mode: 'development',
     devtool: 'eval-source-map'
   });
   

3. 创建 webpack.prod.js（生产环境配置）：

   const { merge } = require('webpack-merge');
   const common = require('./webpack.common.js');
   
   module.exports = merge(common, {
     mode: 'production',
     devtool: 'source-map'
   });
   

4. 在 package.json 中指定配置文件：

   {
     "scripts": {
       "build": "webpack --config webpack.prod.js",
       "start": "webpack serve --config webpack.dev.js"
     }
   }
   

优点

• 清晰区分不同环境的配置。
• 避免重复配置。

6. 使用 EnvironmentPlugin

EnvironmentPlugin 是 DefinePlugin 的简化版，用于从 process.env 中注入环境变量。

示例配置

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.EnvironmentPlugin(['NODE_ENV', 'API_URL'])
  ]
};

优点

• 简化环境变量的注入。
• 自动从 process.env 中读取变量。

7. 使用 argv 获取命令行参数

Webpack 配置文件中可以通过 argv 获取命令行参数。

示例配置

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production';
  return {
    mode: isProduction ? 'production' : 'development',
    devtool: isProduction ? 'source-map' : 'eval-source-map'
  };
};

优点

• 动态根据命令行参数调整配置。
• 灵活性强。

总结

Webpack 处理环境变量的常用方法包括：

1. 使用 mode 配置：自动启用相应的优化。
2. 使用 DefinePlugin：定义全局常量。
3. 使用 dotenv：从 .env 文件加载环境变量。
4. 使用 cross-env：跨平台设置环境变量。
5. 使用 webpack-merge：区分环境配置。
6. 使用 EnvironmentPlugin：简化环境变量的注入。
7. 使用 argv：获取命令行参数。

根据项目需求，选择合适的处理方法，可以灵活管理环境变量，优化开发和构建流程。