What is the difference between webpack --env.production and --mode="production"

Question

Correct me if I'm wrong but as far as I understand from the documentation,

--env option is used ONLY for being able to get access to it within webpack.config.js if it exports a function e.g.

module.exports = function(env, options) {
  console.log(env); // "production"
}

and let's say that I have my entry point index.js with the following code:

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

I wonder if
process.env.NODE_ENV won't be assigned to any value regardless I pass --env.production or --env.development

I wonder if
webpack will enable any sort of optimizations automatically depending on a value for --env

---

--mode option is used to enable some bunch of optimizations right away and it will set process.env.NODE_ENV to be accessible inside my source files, e.g.

console.log(process.env.NODE_ENV); // "production" OR "development", etc ???

I wonder if
process.env.NODE_ENV will be assigned to any value accessing it from within webpack.config.js

I wonder if
Let's say that I run webpack with the following command $ webpack --mode="development"

and I have the following contents of webpack.config.js:

module.exports = {
  devtool: 'source-map'
};

so, will the devtool option eventually be set to eval(if I weren't redefining devtool in my webpack.config.js or the value will be source-map, so it will be rewritten with those from my webpack.config.js file?

Answer 1

I asked a similar question here: Webpack environment variables confusion

First of all: both options have nothing to do with process.env.NODE_ENV. Yeah, it's confusing especially because the docs mention NODE_ENV many times.

webpack's environment variables are different from the environment variables of operating system shells like bash and CMD.exe

• --env command-line option basically allows you to change the value of env.{some property} so if you just pass --env.production env.NODE_ENV will be undefined and env.production will be set to true. You would need to set it separately with --env.NODE_ENV=yourvalue. Note this has nothing to do with process.env. env is just the object passed as parameter to your function exported from webpack.config.js.

• --mode command-line option was introduced in webpack v4 and you can use it to set process.env.NODE_ENV on DefinePlugin only to one of 3 values - development, production or none. It looks like it was made exclusively for DefinePlugin. If you try to console.log(process.env.NODE_ENV); inside your webpack config it will be undefined. https://github.com/webpack/webpack/issues/7074

If you want to read those options you need to export a function instead of an object from your webpack.config.js.

// webpack --mode=production --env.foo=bar --env.NODE_ENV=production
var config = {
  entry: './app.js'
  //...
};

console.log(process.env.NODE_ENV); // undefined!! unless you really set it in OS or with cross-env

module.exports = (env, argv) => {

  console.log(argv.mode); // will print "production"
  console.log(env.foo); // will print "bar"

  return config;
};

cross-env

People also use cross-env to set process.env.NODE_ENV and they don't use webpack's --env or --mode at all.

The only reason for using cross-env would be if you had multiple configs in your project like postcss.config.js and webpack.config.js and you wanted to set your environment just once, use process.env.NODE_ENV everywhere and be done with it. It just won't work with DefinePlugin out of the box.

You could also do this if you don't want to use cross-env:

module.exports = (env, argv) => {
  process.env.NODE_ENV = argv.mode;
    
  return config;
};

or set mode based on process.env.NODE_ENV:

var config = {
  entry: './app.js',
  mode: process.env.NODE_ENV
  //...
};

update 2021

webpack now added a new option --node-env so you don't need to rely on cross-env unless you use it in other places https://github.com/webpack/webpack-cli/issues/2362#issuecomment-771776945