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

Question

如果我理解文档正确的话，--env 选项仅仅是用于在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 选项被用于立即启用一些优化，并且它将使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'
};

那么，如果我没有在我的webpack.config.js中重新定义devtool或该值将为source-map，那么devtool选项最终将被设置为eval吗？因此它将使用来自我的webpack.config.js文件的值进行重写?

- nakhodkin

Answer 1

我在这里问了一个类似的问题：Webpack环境变量混淆。

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

webpack的环境变量不同于操作系统shell（如bash和CMD.exe）的环境变量。

• --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

人们也使用 cross-env 来设置 process.env.NODE_ENV，而不使用 webpack 的 --env 或 --mode。

使用 cross-env 的唯一原因是，如果您的项目中有多个配置文件，例如 postcss.config.js 和 webpack.config.js，并且您想要仅设置一次环境，到处使用 process.env.NODE_ENV 并完成它。这在 DefinePlugin 中默认不起作用。

如果您不想使用 cross-env，也可以这样做：

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

- Konrad