webpack --env.production 和 --mode="production" 有什么区别

Question

如果我错了，请纠正我，但据我从文档中了解，

--env option 仅用于在 webpack.config.js 导出函数时访问它，例如

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

假设我的入口点index.js 具有以下代码：

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

我想知道
无论我通过--env.production 或--env.development 是否都不会为process.env.NODE_ENV 分配任何值

不知道
webpack 将根据 --env 的值自动启用任何类型的优化

---

--mode option 用于立即启用一些优化，它会将process.env.NODE_ENV 设置为可在我的源文件中访问，例如

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

我想知道
process.env.NODE_ENV 是否会被分配给从webpack.config.js 中访问它的任何值

不知道
假设我使用以下命令运行 webpack $ webpack --mode="development"

我有webpack.config.js的以下内容：

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

所以，devtool 选项最终会被设置为eval（如果我没有在我的webpack.config.js 中重新定义devtool 或者值将是source-map，那么它将被重写为我的webpack.config.js 文件？

Answer 1

我在这里问了一个类似的问题：Webpack environment variables confusion

首先：这两个选项都与process.env.NODE_ENV 无关。是的，这很令人困惑，尤其是因为文档多次提到NODE_ENV。

webpack 的环境变量不同于 bash 和 CMD.exe 等操作系统 shell 的环境变量

• --env 命令行选项基本上允许您更改env.{some property} 的值，因此如果您只是通过--env.production env.NODE_ENV 将undefined 和env.production 将设置为true。您需要使用--env.NODE_ENV=yourvalue 单独设置它。 注意这与process.env无关。 env 只是作为参数传递给从webpack.config.js 导出的函数的对象。

• --mode 命令行选项是在 webpack v4 中引入的，您可以使用它来将 process.env.NODE_ENV 仅在 DefinePlugin 上 设置为 3 个值之一 - development、production或none。看起来它是专门为 DefinePlugin 制作的。如果你尝试在 webpack 配置中使用 console.log(process.env.NODE_ENV);，它将是 undefined。 https://github.com/webpack/webpack/issues/7074

如果您想阅读这些选项，您需要从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 来设置process.env.NODE_ENV，他们根本不使用webpack 的--env 或--mode。

使用cross-env 的唯一原因是，如果您的项目中有多个配置，例如postcss.config.js 和webpack.config.js，并且您只想设置一次环境，请在任何地方使用process.env.NODE_ENV 并完成它。它只是不适用于开箱即用的DefinePlugin。

如果你不想使用跨环境，你也可以这样做：

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

或根据 process.env.NODE_ENV 设置模式：

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

2021 年更新

webpack 现在添加了一个新选项--node-env，所以你不需要依赖cross-env，除非你在其他地方使用它https://github.com/webpack/webpack-cli/issues/2362#issuecomment-771776945