如何在 webpack 中使用 env？

Question

我创建了具有不同值的 .env 和 .env.production 文件：

API=http://localhost:8082/api/

创建的配置：

var config = {};
config.api = process.env.API; 
module.exports = config;

我尝试在操作中获取配置，但“api”字段未定义。

const config = require("../config/server");
console.log(config);

我认为需要在启动命令中添加一些东西

"start": "webpack-dev-server --mode development --inline --progress",
"production": "webpack-dev-server --mode production --inline --progress",

但我不确定我应该在这里添加什么。 你能帮帮我吗？

Answer 1

我使用 dotenv 包和定义插件。

我们首先解析 .env 文件，然后迭代组装对象的值。之后我们将组装好的对象传递给定义插件。定义插件将它们设置为可从您的应用程序访问的全局常量。

const dotenv = require('dotenv');

const fileEnv = dotenv.config({ path: '.env.development' }).parsed;
    
const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
}, {});

module.exports = {
...
    plugins: [
        new webpack.DefinePlugin(envKeys),
    ],
...
}

Answer 2

在项目根目录中创建一个webpack.config.js，并按照以下建议在其中添加条目

webpack.config.js

// Do the imports at top of config file
var webpack = require('webpack');
var dotenv = require('dotenv').config({path: __dirname + '/.env'});

....

// In plugins section
plugins: [
  ...
  new webpack.DefinePlugin({ "process.env": dotenv.parsed })
]

别忘了install dotenv 包。 (yarn add dotenv/npm install --save dotenv)。

然后修改start脚本如下

"start": "webpack"

要获得有关webpack.config.js 选项的更多见解，请check here。

（或）

编辑

如果您只有较少的环境变量并且不想将它们维护在单独的文件中（.env/.env.production）并通过webpack加载它DefinePlugin，cross-env 之类的库在这里会派上用场。

如下更改你的脚本

"start": "cross-env API=http://localhost:8082/api webpack-dev-server --mode development --inline --progress",
"production": "cross-env API=https://prodsite.com/api webpack-dev-server --mode production --inline --progress",

你也可以添加多个变量

"start": "cross-env NODE_ENV=... API=... webpack-dev-server ..."