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

Question

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

--env option ONLY 用于能够在 webpack.config.js 内访问它如果它导出一个函数，例如

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

假设我有我的入口点 index.js使用以下代码:

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

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

我想知道
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 (如果我没有在我的 devtool 中重新定义 webpack.config.js，或者该值将是 source-map，那么它会被我的 webpack.config.js 文件中的值重写吗？

Answer 1

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

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

webpack's environment variables are different from the environment variables of operating system shells like bash and 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 on DefinePlugin only only 为 3 个值之一 - development、production 或 none。看起来它是专门为 DefinePlugin 制作的。如果您尝试 console.log(process.env.NODE_ENV); 在您的 webpack 配置中，它将是 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