webpack --env.product 和 --mode="product" 之间有什么区别

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

--env option https://webpack.js.org/guides/environment-variables/用来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 or --env.development

我怀疑是否
webpack 将根据以下值自动启用任何类型的优化--env

--mode option https://webpack.js.org/concepts/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 in my webpack.config.js或者该值将是source-map，所以它将用我的那些重写webpack.config.js file?

我在这里问了类似的问题：Webpack环境变量混乱 https://stackoverflow.com/questions/59563484/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 and env.production将被设置为true。您需要单独设置它--env.NODE_ENV=yourvalue. 请注意，这与process.env. env只是作为参数传递给您导出的函数的对象webpack.config.js.

• --modewebpack v4 中引入了命令行选项，您可以使用它来设置process.env.NODE_ENV on DefinePlugin https://webpack.js.org/plugins/define-plugin/ only为 3 个值之一 -development, production or none。看起来它是专门为 DefinePlugin 制作的。如果你尝试 console.log(process.env.NODE_ENV);在你的 webpack 配置中它将是undefined. https://github.com/webpack/webpack/issues/7074 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 to set process.env.NODE_ENV而且他们根本不使用 webpack 的 --env 或 --mode。

使用的唯一原因cross-env如果您的项目中有多个配置，例如postcss.config.js and webpack.config.js如果您只想设置环境一次，请使用process.env.NODE_ENV无处不在并结束它。它只是不能与DefinePlugin https://webpack.js.org/plugins/define-plugin/盒子外面。

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

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 https://github.com/webpack/webpack-cli/issues/2362#issuecomment-771776945