How to configure the start script in webpack to use the api I want?

For example when I run "npm start" my webpack source will use the productuion api like 'https://abc_loginapi.com, and when I run "npm run dev" the webpack source Mine will use local apis like http://localhost:9500/login.

My current way of doing it is quite manual, when I want to run one, I will comment the other one

export const API_HOST_LIST =
{
         HostBaseURL: 'https://abc_loginapi.com'
         // HostBaseURL: 'http://localhost:9500/login'
}

Is there any way to handle this problem, my source is webpack4 reactJS

CodePudding user response：

You can use environment variables to handle it, add env to script with --env argument, like this:

webpack --env prod // result { prod: true }

And call it in webpack config file

const path = require('path');

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('Production: ', env.prod); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

For more detail, check Webpack docs here

CodePudding user response：

Like Phr0gggg mentions, using environment variables is one option.

Another option is to use the "NODE_ENV" variable.

In dev mode, process.env.NODE_ENV is equal to 'development' and in production, it's equal to 'productoin'

And you can use something like this:

const isProduction = process.env.NODE_ENV === "production"

const hostBaseUrl = () => {
  if (isProduction) {
    return 'http://localhost:9500';
  }
  return 'https://abc_loginapi.com';
}

export const API_HOST_LIST =
{
  HostBaseURL: hostBaseUrl()
}

CodePudding user response：

You can use process.env api to judge in webpack, The code in webpack file like.

export const API_HOST_LIST =
{
         HostBaseURL: process.env.NODE_ENV ==='dev'? 'http://localhost:9500/login':'https://abc_loginapi.com'
}

The code in package.json file like.

"scripts": {
"dev": "NODE_ENV=dev npm run start",
"start": "npm start"
}