Webpack environment variable NODE_ENV, install the cross-env package (cross platform)

A little information

For those who work with webpack you may have to meet with environment variables NODE ENV (NODE_ENV) which I will describe below.

Environment variables are special variables that are defined by the operating system itself. There are environment variables, for example, in windows which are under the most famous PATH.

I.e :

An environment variable is a textual short link to an element of the Windows operating system or on other operating systems, designed to get quick access to a system object, or to data about directories and computer configuration.

An environment variable (environment variable) allows you to quickly navigate to the desired location on your computer, without using a username or full path to an object.

For more information, I will describe 3 kind of environment variables:

1. Local environment variables

Such variables only exist for the current session. After the session ends, they will be deleted. Local variables are not stored in any files, but are created and deleted using commands in the terminal.

2. Custom environment variables

User-defined environment variables are set for each user and loaded when the user logs in using a local terminal or remotely. Typically, such variables are stored in configuration files that are stored in the user's directory.

3. System environment variables

These are global variables that are available throughout the system for any user. Such variables are stored in system configuration files and run at system startup.

Environment variable NODE ENV :

Now we need to set the environment variable NODE_ENV. The problem is that different operating systems set environment variables differently. In Windows environment variables are set by the command SET, in Linux the command is used export, and in Mac OS team env. The package will help solve this problem cross-env. It will help you define a temporary environment variable in one form for all operating systems. To do this, install the package cross-env of npm. In file package.json define the following scripts for npm.

- That is, we select a temporary environment variable

When we start to compile something to webpack then we need to send any values to a variable in the configuration file webpack.config.js will need NODE_ENV into which we will write the value «production». In webpack.config.js we will set the check to the value "production" to compile the project into the production version.

Have Node.js there is access to environment variables. We can refer to the global object process and look at the property env. Let's execute the command node in the console. Then the command console.log(process.env). we see that the property stores all the environment variables that the application uses Node.js. Object env property process and will help us influence the build webpack.

Let's move on to action

1. Run the command to install cross-env

npm install cross-env

2. Further in the file package.json in scripts we will indicate the ready-made command for assembly webpack in production version

"scripts": {
    "prod": "cross-env NODE_ENV=production webpack --progress --colors --debug --display-chunks"
}

Where through cross-env set variable and value NODE_ENV=production and then we get this variable during the execution webpack

3. Further into the configuration file webpack.config.js let's apply this check from the object process and further properties env to our variable NODE_ENV: