DEV Community 👩‍💻👨‍💻

Hridayesh Sharma
Hridayesh Sharma

Posted on

Using DefinePlugin to Define API URLs in Webpack

In today's development cycle, there are multiple environments for any API. For example, the dev API is available at and production API is available at
While writing a front end library or a front end modern JavaScript application that consumes the API we use webpack to build our applications. For each environment (dev or prod) we write a different npm script to build application for that environment.

... any other configuration
"scripts": {
    "dev": "webpack --env=dev --mode=development",
    "prod": "webpack --env=prod --mode=development"
  }, of file
Enter fullscreen mode Exit fullscreen mode

Now let's say our code consumes an API ${env} where env can be either dev or prod or any other environment that our API is available at.

JavaScript Code

 // this code gets some data from the api
let url = ``
  .then(response => response.json())
  .then(res => console.log(res))
Enter fullscreen mode Exit fullscreen mode

So how do we make the fetch to make a request to instead of when we build our application for production??

We will use a webpack plugin called DefinePlugin to achieve this.
So let's write our webpack configuration and then we will modify the JavaScript Code above to work in different environments.


const path = require('path'
const webpack = require('webpack')
/* we are creating our webpack configure as a function that takes env 
as parameter which is passed from npm scripts and can be dev or prod 
as defined in npm scripts
module.exports = (env) => {
 const envConfig = {}
  switch(env) {
    case 'dev': 
      envConfig.domain: ''
    case 'prod'
      envConfig.domain: ''

  return {
    entry: path.resolve(__dirname, './src/index.js')
    output: {
      path: path.resolve(__dirname, 'dist')
      filename: 'bundle.js'
    plugins: [
      new DefinePlugin({
        API_DOMAIN: JSON.stringify(envConfig.domain)
Enter fullscreen mode Exit fullscreen mode
Let's see what we just did in our webpack configuration

We just created our webpack configuration and inside it an object envConfig that contains a domain property on it. Depending upon what's the value of env, the value of domain will vary.
Then we used DefinePlugin to define a API_DOMAIN constant. Now in our code this API_DOMAIN can be used and we do not have to worry about the url that we used in our JavaScript code.

Modified JavaScript Code

  let url = API_DOMAIN
  .then(response => response.json())
  .then(res => console.log(res))
Enter fullscreen mode Exit fullscreen mode

PS: I have added switch statement in the webpack file itself for clarity. You can add the logic in a separate file and then import it in the webpack configuration.

That's how we can use webpack to handle the API domains for us based on the environment we are building our code for. Similarly we can have any other constants configured as well.

The GitHub repository for the code is available at Webpack Manage Environment Domains

Top comments (0)

This is your brain on JavaScript

brain computer interface

Experimenting with brain-computer interfaces in JavaScript