如何將.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配置？

回答

相關問題