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

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

我想知道
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'
};

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

Answer 1

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

首先：这两个选项都与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 制作的。如果你尝试 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开箱即用是行不通的。

如果您不想使用 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所以你不需要依赖跨环境，除非你在其他地方使用它https://github.com/webpack/webpack-cli/issues/2362#issuecomment-771776945