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

Question

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

\n

Answer 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

Answer 2

选项 1 - webpack 文件上的变量

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

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

并访问它：

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

选项 2 - 应用程序中的变量

或者您可以使用某些包从 env 文件中读取它，例如dotenv。

跑步npm i dotenv。

将其导入到您的 webpack.config.js 文件中：

...

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

最后：

// 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。