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

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进行验证（基于.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

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

你可以这样做：

var env = require('.env');

然后

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

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

Answer 4

来自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 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)
    })
]

...