如何從 webpack.config.js 文件訪問環境變量？

Question

我嘗試通過 process.env.env_name 從 webpack.config.js 訪問環境變量，盡管我可以通過 webpack.config.js 中的 process.env.env_name 訪問我的 .env（本地）中的環境變量，但我可以t 訪問在 config/default.js 文件中聲明的環境變量。 任何的想法？ ——

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 - 應用中的變量

或者你可以使用一些包從你的 env 文件中讀取它，比如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定義。

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