如何将.env文件变量传递给webpack配置? [英] How to pass .env file variables to webpack config?

问题描述

我是webpack的新手，几乎可以解决所有构建部分的问题，但是现在的问题是我想将环境变量从.env文件传递到webpack config，以便我可以通过以下方式将这些变量传递给我的构建文件webpack.DefinePlugin插件.

I am new to webpack and worked out almost all build sections, but now the problem is that I want to pass the environment variables from a .env file to webpack config, so that I can pass that variables to my build files via webpack.DefinePlugin plugin.

当前，我能够将环境变量直接从webpack传递到我的构建中.请查看下面我在webpack中使用的代码.

Currently I am able to to pass environment variable directly from webpack to to my build. Please see the code below which I used in 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"
    } 

推荐答案

您可以为此目的使用dotenv包

参考: https://www.npmjs.com/package/dotenv https://github.com/motdotla/dotenv

在webpack配置文件的顶部，请按以下要求进行dotenv(正确设置.env路径)

At top of webpack config file, require dotenv as follows(set your .env path currectly)

var dotenv = require('dotenv').config({path: __dirname + '/.env'});

在webpack配置插件部分使用

in webpack config plugins section use

new webpack.DefinePlugin({
            "process.env": dotenv.parsed
        }),

现在，您可以在整个应用程序中使用env变量.在您的应用代码中尝试console.log(process.env);

Now you can use the env variables throughout your app. try console.log(process.env); in you app code

这篇关于如何将.env文件变量传递给webpack配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！