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

Question

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

- user2222

Answer 1

选项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）从.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中定义。

- pedrobern

---

对于Webpack 5+，似乎传递环境变量的CLI语法已更改为npx webpack --env goal=local（没有.）。 - KyleMit

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

- Tony Ngo