process.env Object in config.js empty on Browser

[JaesungNa]

From the code below(config.js), it seems like it intends to export environment variables, in order it to be made available on client side.

const merge = require('lodash/merge')

const config = {
  all: {
    env: process.env.NODE_ENV || 'development',
    isDev: process.env.NODE_ENV !== 'production',
    basename: process.env.PUBLIC_PATH,
    isBrowser: typeof window !== 'undefined',
  },
  test: {},
  development: {},
  production: {},
}

module.exports = merge(config.all, config[config.all.env])

However, on browser, process.env object is empty, which means config.all.env will always assign fallback constant('development').
So, I am not sure why do we need such configuration setting. (if I went wrong, pls point me out)

//logged `process` object
{
    "title": "browser",
    "browser": true,
    "env": {},
    "argv": [],
    "version": "",
    "versions": {}
}

Furthermore, it seems like we were able to refer proccess object on browser, as we have stated out process related constants on DefinedPlugin on webpack.config.js as below; Node process object made available to browser client code.

But, with Webpack 5, process object is no longer referable on browser. So any code trying to refer to process object on browser leads to uncaughtReference. process is not defined error.

 new webpack.DefinePlugin({
        NODE_ENV: process.env.NODE_ENV,
        PUBLIC_PATH: publicPath.replace(/\/$/, ''),
}),

Is there something that I missed out from the code? or else we could fetch this thing out! :)