preface

Today we’ll talk about Webpack configuration environment variables and what they do. We all encounter this kind of scenario in development project, distinguish development environment, production environment, test environment, different scenarios request different interface API. This is where the environment variables that are configured in the project come in. Here’s how to configure the environment variables.

Configuration method

Set or Export

The tricky problem with this approach is that Windows and Mac use it differently, and you have to change the code to use the startup project on different systems, which can be a little uncomfortable, so let’s take a look at it.

package.json

The Windows system is configured as follows

{
  "scripts": {
    "dev": "set NODE_ENV=dev && node index.js"
  }
}

The Mac system is configured as follows

{
  "scripts": {
    "dev": "export NODE_ENV=dev && node index.js"
  }
}

The effect

Webpack. Config. Js file

console.log(process.env.NODE_ENV) // dev

This configuration, if you configure it in Windows mode, if you boot it on a Mac then you have a problem, and you have to change it manually, which is very tedious.

Cross-env

This plug-in solves the problem we mentioned above (different systems use different configurations). This plug-in is called a “cross-platform environment variable”, which is a set of code that is compatible with both ends. So let’s look at the case

The installation

npm i cross-env -D

Configure it in package.json under the project

{
  "scripts": {
    "dev:serve": "set NODE_ENV=baidu.com && npx webpack-dev-server --config=./config/webpack.config.js",
  }
}

webpack.config.js

console.log(process.env.NODE_ENV) // baidu.com

The problem with this is that although our environment variables are configured, they can only be used in webpack.config.js. Let’s go to main.js and print it out.

main.js

console.log(process.env.NODE_ENV) // undefined

Js is printed as undefined. This is because the current environment variable is only valid in the Node environment. It does not exist in the browser, so it is printed as undefined.

There are pits – misunderstandings

webpack.config.js

console.log(process.env.NODE_ENV) // baidu.com
module.exports = {
    mode: "development"
}

main.js

console.log(process.env.NODE_ENV) // development

This is because NODE_ENV uses Webpack mode in the browser environment.

  • Webpack-dev-server defaults to –mode=development
  • Webpack defaults to –mode=production

Pay attention to the pits here so you don’t make mistakes.

Returning to the topic, the cross-env environment variable can only be used in the node environment, so how can it be used in the browser environment? With the built-in plugin global variables provided by Webpack, let’s configure them.

webpack.config.js

console.log(process.env.NODE_ENV) // baidu.com
const webpack = require("webpack")
module.exports = {
    mode: "development",
    plugins: [
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
        })
    ]
}

main.js

console.log(process.env.NODE_ENV) // baidu.com

The cross-env global is overridden by the mode variable. JSON.stringify prevents parsing into a variable. You are now free to use environment variables in your global project.

I’m the frogman. See you in the next video.

Official account: front end entertainment circle

Thank you

Thank you for reading this article. I hope it will help you. If you have any questions, you are welcome to correct me.

I’m frog-man. Plus-one item, if you think it’s OK, put a “like” on it.

If you are interested, you can join the front-end entertainment exchange group and welcome everyone to exchange and discuss together

Writing is not easy, “thumb up” + “watching” + “forwarding” thanks for your support

Past oliver

“Using Decorators in Vue Projects”

Share 15 useful Webpack plugins!!

A step-by-step guide to writing a Vue component that can be published to NPM and imported into the external chain

12 Common Webpack Loaders

What is CommonJS and ES Module and what are the differences?

Do You Know These JavaScript Hacks for Your Job?

Share some common Git commands in work and how to solve special problem scenarios.