webpack中使用环境变量

发表于 2021-12-25 更新于 2024-03-25 分类于 frontend 阅读次数：本文字数： 1.8k 阅读时长 ≈ 2 分钟

1. 背景介绍

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

2. DefinePlugin

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

3. 引入依赖

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

1	"webpack": "^5.52.0",

对于 webpack5 还需要引入 process 包

1
2
3

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

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

1	"process": "^0.11.10",

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

1	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"'
     })

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

4.2. 如何调用变量

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

1
2
3

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, 这样我在整个项目得编译阶段就可以使用该环境变量了
可以这样传