The WEBPACK_DEV_SERVER environment variable is not set when running "webpack serve"

[bensampaio]

Describe the bug

Running webpack via webpack-dev-server used to expose an environment variable that allowed you to determine if the application is being served by the dev server. This was quite useful on a React app since you could use this variable to determine when to hydrate the first rendering (SSR) or when to render the full application on first render.

Unfortunately this behaviour is no longer present when running webpack serve. I could replicate this behavior by creating my own env variables for this but it would be a lot more ideal if webpack would do this out of the box. If that's not desirable then I would say that this should at least be included in the migration guide for v5. Mainly because I didn't see a way around using webpack serve due to this issue: webpack/webpack-dev-server#2029 (comment).

What is the current behavior?

When running webpack-dev-server the value of process.env.WEBPACK_DEV_SERVER is set to true.

To Reproduce

Steps to reproduce the behavior:

1. Place console.log(process.env.WEBPACK_DEV_SERVER); somewhere in your webpack.config.js.
2. Run webpack with webpack serve
3. Look at the printed value in the console.

An example can be found here: https://github.com/bensampaio/dev-server-issue.

Expected behavior

I expected the console.log to print true.

Please paste the results of webpack-cli info here, and mention other relevant information

System:

• OS: macOS 10.15.7
• CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
• Memory: 192.31 MB / 16.00 GB

Binaries:

• Node: 12.18.3 - /usr/local/bin/node
• Yarn: 1.22.5 - /usr/local/bin/yarn
• npm: 6.14.6 - /usr/local/bin/npm

Browsers:

• Chrome: 86.0.4240.80
• Chrome Canary: 88.0.4298.0
• Edge: 86.0.622.48
• Firefox: 80.0.1
• Firefox Developer Edition: 46.0a2
• Safari: 14.0

Additional context

This issue was originally reported in: webpack/webpack-dev-server#2781.

[alexander-akait]

After discussion we solve do not add something to process.env, because it is not good, but now you can use env to achieve this - function format of webpack.config.js

[ZebraFlesh]

This one really cost me some time: it is a significant change, but not well documented. It's a good candidate for documentation on migrating (but I don't see that anywhere -- am I blind?).