如何将.env文件变量传递给webpack配置？

  • Z时代
  • 2024-01-10
  • 分类：问答

我是webpack的新手，几乎可以解决所有构建部分的问题，但是现在的问题是，我想将环境变量从.env文件传递到webpack

config，以便可以通过webpack.DefinePlugin插件将这些变量传递给我的构建文件。

目前，我能够将环境变量直接从webpack传递到我的构建中。请查看下面我在webpack中使用的代码。

new webpack.DefinePlugin({
            "API_URL": JSON.stringify("http://my-api.com"),
            "FRONT_END_API_KEY" : "MYFRONTENDKEYGOESHERE"
        }),

我的package.json构建脚本是

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server --progress --port 8000 --content-base app/build/src"
    }

回答：

您可以dotenv为此目的使用包装

参考：https :

//www.npmjs.com/package/dotenv

https://github.com/motdotla/dotenv

在webpack配置文件的顶部，要求dotenv如下（正确设置.env路径）

var dotenv = require('dotenv').config({path: __dirname + '/.env'});

在webpack配置插件部分中使用

new webpack.DefinePlugin({
            "process.env": dotenv.parsed
        }),

现在，您可以在整个应用程序中使用env变量。尝试console.log(process.env);输入您的应用代码

以上是 如何将.env文件变量传递给webpack配置？ 的全部内容， 来源链接： utcz.com/qa/423234.html

回到顶部