在 Webpack 项目中配置环境变量

1、dotenv

从 .env 文件中加载环境变量到 Node.js 进程中

需要将环境变量手动注入到浏览器环境中（DefinePlugin）

// 1、创建 .env、.env.development、.env.production 文件
// 1.1 .env
NODE_ENV=development
API_URL=http://localhost:3000

// 1.2 .env.development
NODE_ENV=development
API_URL=http://localhost:3333

// 1.3 .env.production
NODE_ENV=production
API_URL=http://localhost:5555



// 2、在 package.json 中配置脚本
{
  "scripts": {
    "start": "env-cmd -f .env.development webpack serve --open",
    "build": "env-cmd -f .env.production webpack"
  }
}



// 3、webpack.config.js 中配置
console.log(process.env.NODE_ENV); // 输出: development | production
console.log(process.env.API_URL); // 输出: http://localhost:*
module.exports = {
  mode: process.env.NODE_ENV,
  ...
  plugins: [
    // NOTE: 将环境注入到浏览器环境中
    new DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
    })
  ]
};



// 4、前端代码获取环境变量
// src/index.js
function component() {
  const element = document.createElement('div');
  element.innerHTML = `
    <h1>Hello Webpack!</h1>
    <p>Environment: ${process.env.NODE_ENV}</p>
    <p>API URL: ${process.env.API_URL}</p>
  `;
  return element;
}

document.body.appendChild(component());

2、dotenv

从 .env 文件中加载环境变量到 Node.js 进程中

需要将环境变量手动注入到浏览器环境中（DefinePlugin）

// 1、创建 .env、.env.development、.env.production 文件
// 1.1 .env
NODE_ENV=development
API_URL=http://localhost:3000

// 1.2 .env.development
NODE_ENV=development
API_URL=http://localhost:3333

// 1.3 .env.production
NODE_ENV=production
API_URL=http://localhost:5555



// 2、加载 .env 文件 (在入口文件内执行)
require('dotenv').config(); // 默认引用 .env 文件内变量
require('dotenv').config({ path: `.env.${process.env.ENV}` }); // 手动指定文件

console.log(process.env.NODE_ENV); // 输出: development | production
console.log(process.env.API_URL); // 输出: http://localhost:*



// 3、在 package.json 中配置脚本
{
  "scripts": {
    "start": "ENV=development node index.js",
    "test": "ENV=test node test.js",
    "build": "ENV=production node build.js"
  }
}



// 4、webpack.config.js 中配置
const path = require('path');
const { DefinePlugin } = require('webpack');
require('dotenv').config({ path: `.env.${process.env.ENV}` }); 
console.log(process.env.NODE_ENV) // development | production

module.exports = {
  mode: process.env.NODE_ENV,
  ...
  plugins: [
    // NOTE: 将环境注入到浏览器环境中
    new DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
    })
  ]
};




// 5、前端代码获取环境变量
// src/index.js
function component() {
  const element = document.createElement('div');
  element.innerHTML = `
    <h1>Hello Webpack!</h1>
    <p>Environment: ${process.env.NODE_ENV}</p>
    <p>API URL: ${process.env.API_URL}</p>
  `;
  return element;
}

document.body.appendChild(component());

3、cross-env 实现跨平台

使用 cross-env 可以确保跨平台设置环境变量，确保在不同操作系统（如 Windows、macOS、Linux）上使用相同的命令来设置环境变量

// 1、在 package.json 中设置脚本以传递环境变量
{
    ...
    "scripts": {
        // 使用 cross-env
        "start": "cross-env ENV=development webpack serve --open",
        "build": "cross-env ENV=production webpack"
    },
}
  
  
// 2、其它配置同上
......