webpack DefinePlugin process.env.NODE_ENV 未定义

Question

I am not too good with front-end technologies... So if I have wrong expectations - please correct me or my code. I have created a repository with code that allows to reproduce issue. Here is the link: https://github.com/ffatheranderson/webpack-issue-reproduction

as described in readme.md of the project:

========================================

• What I expect? - I expect that after I execute npm run watch command - the generated result/bundle.js file to have such lines:

...
var _environment = 'development';
var _ANOTHER_VARIABLE = "another variable value";
...

• What is actual result? - after I execute npm run watch command - the generated result/bundle.js file contains such lines:

...
var _environment = undefined;
var _ANOTHER_VARIABLE = "another variable value";
...

• Why do I have such expectations? - because of these lines:

...
  plugins: [
        new webpack.DefinePlugin({
            ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),
            ANOTHER_VARIABLE: JSON.stringify("another variable value"),
        })
    ]
...

in webpack.config.js file.

As you can see variable _environment is not initialized with development value as it is promised here: https://webpack.js.org/configuration/mode/

========================================

Answer 1

_environment is undefined because the environment variable NODE_ENV is undefined. You can solve this in one of three:

1. Invoking npm run watch --node-env=development : https://webpack.js.org/api/cli/#node-env
2. Exporting NODE_ENV in your current shell session:

    $ export NODE_ENV=production; npm run watch

3. Updating your configuration to specify the value from some other source (eg an --env argument, a file on disk, hard-coding it, etc.)