webpack中使用环境变量

1. 背景介绍

由于前端项目在不同的阶段需要连接不同的后端服务器, 在没有引入环境变量前, 需要手动修改服务器地址. 经常容易出错, 而且不利于便于自动化打包. 所以这里引入 DefinePlugin 便于引入环境变量进行环境区分.

2. DefinePlugin

可以利用 webpack 本身自带的 process.env 创建一个在编译时可以配置的全局常量。主要针对我们在编译时，区分 开发、测试、生产环境。而 webpack.DefinePlugin 提供的可以在浏览器环境里拿到。

3. 引入依赖

使用 webpack.DefinePlugin 之前需要先引入 webpack 这个包
首先在 npm 项目中引入依赖, package.json

"webpack": "^5.52.0",

对于 webpack5 还需要引入 process 包

npm i --save-dev process
# 或者
cnpm i --save-dev process

当前 2010/12/10, process 的最新版本是 0.11.10

"process": "^0.11.10",

在 webpack 配置中引入包, 例如我的配置文件为 webpack.config.bash.js

const webpack = require("webpack");

4. 示例

4.1. 如何定义变量

new webpack.DefinePlugin({
         'PROCESS.VERSION': JSON.stringify( '1.0.0'),
         'PROCESS.APIURL': JSON.stringify( 'http://localhost'),
         'PROCESS.ENVIRONMENT': '"dev"'
     })

1. 值格式：因为 DefinePlugin 直接做的文本替换,给定的值必须包含字符串本身内的实际引号。比如:
   ‘“production”’, 或者使用 JSON.stringify(‘production’)
2. 建格式：键值都是一个标志符或者多个用 . 连接起来的标志符
3. 注意前面的 key 也要加单引号

4.2. 如何调用变量

在其他 js 里，就可以直接使用，比如：

import process from "process";
const env = PROCESS.ENVIRONMENT;
console.log(PROCESS.ENVIRONMENT);

对于 webpack5 需要安装 process 包, 并在调用前 import process 包

4.3. 如何结合操作系统环境变量或命令行参数

首先我们要将定义环境变量的做一些修改, 如下

new webpack.DefinePlugin({
         'PROCESS.VERSION': JSON.stringify( '1.0.0'),
         'PROCESS.APIURL': JSON.stringify(process.env.APIURL || 'http://localhost'),
         'PROCESS.ENVIRONMENT': '"dev"'
     })

这样我在命令行传入的参数, 就可以传递给 PROCESS.APIURL, 这样我在整个项目得编译阶段就可以使用该环境变量了
可以这样传

webpack --env.APIURL=http://dev.example.com --config webpack.config.dev.js

或者使用 cross-env 传递参数

cross-env APIURL=http://dev.example.com npx webpack --config webpack.config.dev.js

5. 参考文档

webpack.DefinePlugin 使用介绍

Passing the NODE_ENV value using Webpack via DefinePlugin
How to use environment variables with Webpack

使用环境变量

webpack 设置和获取命令行动态传参的 4 种方法