我对webpack比较新，几乎已经掌握了所有的构建部分，但现在遇到一个问题，我想从.env文件中传递环境变量到webpack配置中，以便我可以通过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软件包来实现此目的。
npm install dotenv --save
const webpack = require('webpack'); // only add this if you don't have yet
// replace accordingly './.env' with the path of your .env file
require('dotenv').config({ path: './.env' });
接着在plugins部分中添加如下内容：
new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env),
}),
JSON.stringify(dotenv.parsed)。 - Sanderfish"process.env.YOUR_VARIABLE": dotenv.parsed.YOUR_VARIABLE"，以避免处理整个对象。在 webpack.config.js 中，我只需要一个变量。 - nicholascm"process.env": JSON.stringify(dotenv.parsed)仅传递在.env文件中定义的变量，会丢失在shell中设置的所有环境变量。我必须调用dotenv并传递实际的process.env，例如：
"process.env": JSON.stringify(process.env)。 - Young Suk Ahn我从接受的答案中得到了灵感，但它对我不起作用。可能是dotenv的API已经改变了。
以下内容对我有效：
import dotenv from 'dotenv'
import { DefinePlugin } from 'webpack'
...
plugins: [
new DefinePlugin({
'process.env': JSON.stringify(dotenv.config().parsed)
})
]
...
虽然只部分符合你的需求，但我发现这个公式对我来说运作最佳。
我使用了两个库的组合：dotenv 用于读取webpack.config.js（配置）所需的.env文件，并且webpack-dotenv-plugin 用于验证（基于.env.example文件）和将所有变量从.env文件传递到应用程序代码：
我的webpack.config.js部分内容:
// this is to load env vars for this config
require('dotenv').config({ // it puts the content to the "process.env" var. System vars are taking precedence
path: '.env.webpack',
});
// and this to pass env vars to the JS application
const DotenvPlugin = require('webpack-dotenv-plugin');
插件部分：
plugins: [
// ...
new DotenvPlugin({ // makes vars available to the application js code
path: '.env.webpack',
sample: '.env.webpack.example',
allowEmptyValues: true,
}),
// ...
]
// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey
把它添加到你的Webpack配置文件中
// webpack.config.js
const Dotenv = require('dotenv-webpack');
module.exports = {
...
plugins: [
new Dotenv()
]
...
};
在你的代码中使用
// file1.js
console.log(process.env.DB_HOST);
// '127.0.0.1'
Resulting bundle
// bundle.js
console.log('127.0.0.1');
dotenv-webpack插件不能将那些变量传递到webpack.config.js文件，只能传递给生成环境代码。不过我有这个相同的设置。 - Blaiz很抱歉我无法发表评论以澄清任何信息。
你可以这样做：
var env = require('.env');
new webpack.DefinePlugin({
"API_URL": JSON.stringify("http://my-api.com"),
"SECRET_KEY" : "MYSECRETKEYGOESHERE",
"env_property": env.property
}),
API_URL 转换为字符串？为什么不把 SECRET_KEY 也转换成字符串？ - Matteo Gaggiano首先...
看起来你正在尝试将秘密信息传递到一个angular应用程序中。
在客户端（浏览器）JavaScript中，不存在所谓的“秘密”！！！
任何传递给DefinePlugin的内容都可以轻松提取。
既然我们已经搞清楚了这一点....
Webpack现在有了环境插件，这使得将env变量传递到GlobalDefine插件中更加容易。 从文档中可以看到：
new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']);
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
});
dotenv 来管理环境变量，你可以使用 dotenv webpack 插件。它只会包含在你的代码中引用的变量，因此只要你不引用你的机密变量，它们就不会被包含进去。"SECRET_KEY" : "MYSECRETKEYGOESHERE"，我当然会认为你认为这个值应该保密。人们在他们的SPA中包含秘密信息是一个严重的问题，所以我会保留我的答案的前半部分。感谢你更新问题，这样其他人就不会认为这样做是可以的了。 - NSjonas来自 webpack 文档：
webpack 命令行环境选项 --env 允许您传递任意数量的环境变量。环境变量将在您的 webpack.config.js 中可用。例如，--env.production 或 --env.NODE_ENV=local（NODE_ENV 通常用于定义环境类型，请参见此处）。
在您的 package.json 中：
webpack --env.NODE_ENV=local --env.production --progress
在你的webpack.config.js文件中
module.exports = env => {
// Use env.<YOUR VARIABLE> here:
console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
console.log('Production: ', env.production) // true
return {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
.env 文件中的配置变量，而不是通过 CLI 传递，所以据我所知这样做行不通。 - Blaiz.env*文件加载策略加载它们。
受到CreateReactApp中将配置存储在.env*文件中的方法的启发， 以及Twelve-Factor App方法论的一般性影响，尤其是其中关于将配置存储在环境中的部分。dotenv-flow扩展了dotenv，增加了对特定
NODE_ENV的.env*文件的支持，例如.env.development、.env.test、.env.stage和.env.production，以及适当的.env*.local覆盖，允许您的应用程序具有多个环境，并根据当前的NODE_ENV动态加载它们。
.env.local，.env.dev等等。我已经解决了将特定环境的环境文件加载到webpack配置中的问题，具体步骤如下：
步骤1：为特定环境创建一个文件 - 例如：.env.local
API_HOST=127.0.0.1
API_KEY=mysecretkey
...
...
...
const webpack = require('webpack')
const dotenv = require('dotenv')
...
...
module.exports = env => {
return {
resolve: {...},
devServer: {...},
module: {...},
plugins: [
new webpack.DefinePlugin(
{'process.env': JSON.stringify(dotenv.config(path: env.ENV_FILE}).parsed)})
}
}
module.exports应该返回一个函数而不是一个对象，这样它才能访问由环境特定的webpack配置文件传递的环境变量（例如这个例子中的ENV_FILE），比如webpack.local.js（步骤3）。
步骤3：创建一个环境特定的webpack配置文件 - webpack.local.js
const { merge } = require('webpack-merge')
const common = require('./webpack.common')
module.exports = env => merge(common(env), {
mode: 'development',
output: {
publicPath: 'http://localhost:3000',
},
devtool: 'inline-source-map',
devServer: {
watchFiles: ['src/**/*'],
hot: true,
port: 3000
},
})
"scripts": {
"start": "webpack serve --open --env ENV_FILE=.env.local --config webpack.local.js",
"build:prod": "webpack --env ENV_FILE=.env.prod --config webpack.prod.js"
...
}