我是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"
}
7条答案
按热度按时间z9ju0rcb1#
您可以使用dotenv包来实现此目的。
安装完软件包后,在配置文件的顶部添加以下内容:
然后在
plugins
部分添加以下内容:hgc7kmma2#
网络包+dotenv
我确实从公认的答案中得到了灵感,但对我来说行不通,可能是dotenv的API变了。
以下是我的工作
w80xi6nr3#
它并不完全符合你的情况(虽然部分),但我发现这个公式是最适合我的。
我使用2个库的组合:dotenv读取
.env
文件以满足webpack.config.js
(配置)需求,webpack-dotenv-plugin用于验证(基于.env.example
文件),用于将.env文件中的所有变量传递到应用程序代码:我的
webpack.config.js
的一部分:插件部分:
jgwigjjp4#
我找到的最简单的解决方案是使用这个npm包:dotenv-webpack
创建一个.env文件
将其添加到Webpack配置文件中
在代码中使用
elcex8rz5#
我不能发表评论,以澄清任何信息,所以我的答案道歉。
您可以:
那么
但我对您的. env文件及其设置方式做了一些假设
e4yzc0pl6#
首先...
看起来您正试图将机密传递到一个有Angular 的应用程序中。
在客户端(浏览器)javascript中没有“秘密”这样的东西!!!
传入
DefinePlugin
的任何内容都可以轻松提取。既然我们已经澄清了...
Webpack现在有了Environment Plugin,这使得将env变量传递到GlobalDefine插件变得更加容易。
这相当于以下DefinePlugin应用程序:
如果您使用
dotenv
来管理环境变量,则可以使用dotenv webpack plugin。它只包含代码中引用的变量,因此只要不引用机密,它们就不会被包含。
xtfmy6hx7#
来自网络包docs:
webpack命令行环境选项--env允许您传入任意数量的环境变量。环境变量将在webpack.config.js中提供访问权限。例如,--env.production或--env.NODE_ENV=local(NODE_ENV通常用于定义环境类型,请参阅此处。)
在您
package.json
中在您
webpack.config.js
中