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

我是webpack的新手，编写出几乎所有的构建部分，但现在问题是我想将环境变量从.env文件传递到webpack配置，以便我可以通过webpack.DefinePlugin将这些变量传递给我的构建文件插入。如何将.env文件变量传递给webpack配置？

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

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

我package.json构建脚本是

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

来源

2017-09-14 ninja dev

您可以使用dotenv包装为此用途

参考：https://www.npmjs.com/package/dotenv https://github.com/motdotla/dotenv

在的WebPack配置文件的顶部，需要dotenv如下（设置currectly你.ENV路径）

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

中的WebPack配置插件部分

使用

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

现在你可以使用env变量遍历你的应用程序。尝试console.log(process.env);在你的应用程序代码

来源

2017-09-15 05:21:08

真棒的主意！我没有想过在'dotenv'之前访问'parsed'值。 – IsenrichO

我试过这个解决方案，但对于字符串变量，它返回一个对象而不是一个字符串。例如，如果我有DB_USERNAME = MY_USRNAME，并且我尝试console.log（process.env.DB_USERNAME），它会给我MY_USRNAME对象，而不是“MY_USRNAME”。我使用的是dotenv 5.0.0。我该如何解决它？ – retrobitguy

我不能发表评论澄清，所以我道歉的回答任何信息。

你可以这样做：

var env = require('.env');

然后

new webpack.DefinePlugin({ 
      "API_URL": JSON.stringify("http://my-api.com"), 
      "SECRET_KEY" : "MYSECRETKEYGOESHERE", 
      "env_property": env.property 
     }),

但我做你的.ENV文件假设其成立这个答案的方式

来源

2017-09-14 21:33:05 DevinFlick

为什么你串字'API_URL'？而且，为什么不把字符串“SECRET_KEY”？ –

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

回答

相关问题