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

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的新手,几乎可以解决所有构建部分,但现在的问题是我想将环境变量从.env文件传递到webpack配置,这样我就可以通过webpack.DefinePlugin将这些变量传递给我的构建文件了。插入。

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.

目前我能够直接从webpack传递环境变量到我的构建。请参阅我在webpack中使用的以下代码。

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

My package.json build script is

我的package.json构建脚本是

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server --progress --port 8000 --content-base app/build/src"
    }

3 个解决方案

#1

You can use dotenv package for this purpose

您可以使用dotenv包来实现此目的

Reference: https://www.npmjs.com/package/dotenv https://github.com/motdotla/dotenv

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

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

在webpack配置文件的顶部,需要dotenv如下(当前设置你的.env路径)

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

in webpack config plugins section use

在webpack配置插件部分使用

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

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

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

#2

I can't comment to clarify any info so my apologies for the answer.

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

You could do:

你可以这样做:

var env = require('.env');

then

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

But I'm making assumptions about your .env file and the way its set up with this answer

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

#3

From webpack docs:

来自webpack文档:

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.)

webpack命令行环境选项--env允许您传入任意数量的环境变量。可以在webpack.config.js中访问环境变量。例如, - env.production或--env.NODE_ENV = local(NODE_ENV通常用于定义环境类型,请参见此处。)

in your package.json

在你的package.json中

webpack --env.NODE_ENV=local --env.production --progress

in your webpack.config.js

在你的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')
    }

#1