如何从 webpack.config.js 文件访问环境变量？答案

【问题标题】：How to access env vars from webpack.config.js file?如何从 webpack.config.js 文件访问环境变量？
【发布时间】：2019-12-23 00:08:00
【问题描述】：

我尝试通过 process.env.env_name 从 webpack.config.js 访问环境变量，尽管我可以通过 webpack.config.js 中的 process.env.env_name 访问我的 .env（本地）中的环境变量，但我无法访问在 config/default.js 文件中声明的环境变量。任何想法？ ——

【问题讨论】：

标签： javascript node.js webpack

【解决方案1】：

你可以像这样使用 webpack.DefinePlugin

plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development'),
                'BASE_URL': JSON.stringify('http://localhost:5000/')
            }
        })
    ],

然后像这样读入你的js代码

 process.env.BASE_URL

【讨论】：

【解决方案2】：

选项 1 - webpack 文件中的变量

你可以在脚本中传入你的环境变量：

webpack --env.MY_VARIABLE=VALUE --env.MY_OTHER_VARIABLE=OTHER_VALUE

并访问它：

...

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('MY_VARIABLE: ', env.MY_VARIABLE); // 'VALUE'
  ...
};

选项 2 - 应用中的变量

或者你可以使用一些包从你的环境文件中读取它，比如dotenv。

运行npm i dotenv。

将它导入到你的 webpack.config.js 文件中：

// if .env is on same folder as webpack.config.js
var dotenv = require('dotenv')

// if is located elsewhere
var dotenv = require('dotenv').config({ path: '/full/custom/path/to/your/env/vars' });

// same as above, but with abstraction
var dotenv = require('dotenv').config({path: __dirname + '/.env'});

最后：

// define a new plugin on your webpack
plugins: [
    ...
    new webpack.DefinePlugin({

        // try:
        "process.env": dotenv.parsed

        // or:
        'process.env': JSON.stringify(dotenv.config().parsed)
    }),
]

现在您可以将您的应用程序中的变量读取为process.env.MY_VARIABLE，在.env 中定义。

【讨论】：