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

Question

我是 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"
    }

Answer 1

我无法发表评论来澄清任何信息，所以我很抱歉回答。

你可以这样做：

var env = require('.env');

然后

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

但我正在假设您的 .env 文件及其使用此答案的设置方式

Answer 2

您可以为此目的使用 dotenv 包。

安装包后，将其添加到配置的顶部：

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);
}),

Answer 3

来自 webpack docs:

The webpack command line environment option --env allows you to pass in as many environment variables as you like. Environment variables will be made accessible in your webpack.config.js. For example, --env.production or --env.NODE_ENV=local (NODE_ENV is conventionally used to define the environment type, see here.)

在你的 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 4

它不完全符合您的情况（虽然部分符合），但我发现这个公式最适合我。

我使用了 2 个库的组合：dotenv to read the .env file for the webpack.config.js (configuration) needs, and 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,
    }),
    // ...
]

Answer 5

我找到的最简单的解决方案是使用这个 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');

Answer 6

webpack + dotenv

我确实从接受的答案中得到了灵感，但它对我不起作用。可能dotenv的API变了

以下适合我

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


...

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

...

Answer 7

首先……

您似乎正试图将秘密传递到 angular 应用程序。

客户端（浏览器）中没有 "secret" 这样的东西 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。

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

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

How to pass .env file variables to webpack config?

angularjs

webpack

environment-variables

webpack-dev-server

webpack-2

webpack + dotenv