webpack + dotenv

Question

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

目前我可以直接从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"
    }

Answer 1

您可以将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);

Answer 2

它与您的情况不完全匹配（尽管部分匹配），但我发现此公式最适合我。

我使用2个库的组合：dotenv读取.env文件以满足webpack.config.js（配置）的需要，webpack-dotenv-plugin 进行验证< / strong>（基于.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, }), // ... ]

Answer 3

webpack + dotenv

我确实从接受的答案中得到了启发，但这对我不起作用。也许dotenv的API已更改。

以下对我有用的

import dotenv from 'dotenv'
import { DefinePlugin } from 'webpack'


...

plugins: [
    new DefinePlugin({
      'process.env': JSON.stringify(dotenv.config().parsed)
    })
]

...

Answer 4

我无法发表评论以澄清任何信息，所以我为答案道歉。

你可以这样做：

var env = require('.env');

然后

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

但是我对你的.env文件以及它设置这个答案的方式做出了假设

Answer 5

首先...

您似乎正在尝试将机密传递到有角度的应用程序中。

客户端（浏览器）javascript中没有“秘密”之类的东西！

传递到DefinePlugin的所有内容都可以轻松完成。

现在我们已经清除了这个问题。...

Webpack现在具有Environment Plugin，这使得将env变量传递到GlobalDefine插件中变得更加容易。从文档中：

new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']);

这等效于以下DefinePlugin应用程序：

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  'process.env.DEBUG': JSON.stringify(process.env.DEBUG)
});

如果使用dotenv来管理环境变量，则可以使用dotenv webpack plugin。

它将仅包含代码中引用的变量，因此，只要您不引用您的机密，就不会将其包括在内。

Answer 6

来自webpack docs：

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')
    }

Answer 7

我找到的最简单的解决方案是使用以下npm软件包：dotenv-webpack

创建.env文件

// .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');

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

7 个答案:

webpack + dotenv