Question

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

Answer 1

选项1-Webpack文件上的变量

您可以在脚本中传递env变量：

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之类的包从env文件中读取它。

运行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内读取应用程序中的变量。

Answer 2

您可以像这样使用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

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

2 个答案:

选项1-Webpack文件上的变量

选项2-您应用上的变量