webpack --env.production和--mode =" production"之间有什么区别? [英] What is the difference between webpack --env.production and --mode="production"

问题描述

如果我错了，请更正我，但据文档了解，

-env 选项已使用仅，以便能够在 webpack.config.js 中访问它，如果它导出了一个函数，例如

  module.exports = function(env，options){console.log(env);//生产"} 

，假设我的入口点是 index.js ，其中包含以下代码:

  console.log(process.env.NODE_ENV);//不明确的 ??? 

我想知道
不管我通过-env.production 还是-env.development ，都不会为 process.env.NODE_ENV 分配任何值.>

我想知道
webpack会根据-env

的值自动启用任何类型的优化

---

-mode 选项用于启用一些功能立即进行优化，它将设置 process.env.NODE_ENV 可在我的源文件中访问，例如

  console.log(process.env.NODE_ENV);//生产"或开发"等 

我想知道
process.env.NODE_ENV 将被分配给从 webpack.config.js

中访问它的任何值

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

，我有以下 webpack.config.js 内容:

  module.exports = {devtool:源地图"}; 

因此， devtool 选项最终是否会设置为 eval (如果我没有在我的 webpack中重新定义 devtool 的话).config.js 还是该值将是 source-map ，那么它将用我的 webpack.config.js 文件中的值重写吗?

解决方案

我在这里提出了类似的问题:Webpack环境变量混乱

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

webpack的环境变量与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 导出的函数的对象.

webpack v4中引入了

• -mode 命令行选项，您可以使用它在上设置 process.env.NODE_ENV 仅将href ="https://webpack.js.org/plugins/define-plugin/" rel ="nofollow noreferrer"> 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 = productionvar config = {条目:"./app.js"//...};console.log(process.env.NODE_ENV);//不明确的！！除非您是在OS或跨环境中真正设置过的module.exports =(env，argv)=>{console.log(argv.mode);//将打印生产"console.log(env.foo);//将打印"bar"；返回配置;}; 

跨环境

人们还使用 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;返回配置;}; 

或基于process.env.NODE_ENV设置模式:

  var config = {条目:"./app.js"，模式:process.env.NODE_ENV//...}; 

更新2021

webpack现在添加了一个新选项-node-env ，因此您无需依赖交叉环境，除非您在其他地方使用它 https://github.com/webpack/webpack-cli/issues/2362#issuecomment-771776945

Correct me if I'm wrong but as far as I understand from the documentation,

--env option is used ONLY for being able to get access to it within webpack.config.js if it exports a function e.g.

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

and let's say that I have my entry point index.js with the following code:

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

I wonder if
process.env.NODE_ENV won't be assigned to any value regardless I pass --env.production or --env.development

I wonder if
webpack will enable any sort of optimizations automatically depending on a value for --env

---

--mode option is used to enable some bunch of optimizations right away and it will set process.env.NODE_ENV to be accessible inside my source files, e.g.

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

I wonder if
process.env.NODE_ENV will be assigned to any value accessing it from within webpack.config.js

I wonder if
Let's say that I run webpack with the following command $ webpack --mode="development"

and I have the following contents of webpack.config.js:

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

so, will the devtool option eventually be set to eval(if I weren't redefining devtool in my webpack.config.js or the value will be source-map, so it will be rewritten with those from my webpack.config.js file?

解决方案

I asked a similar question here: Webpack environment variables confusion

First of all: both options have nothing to do with process.env.NODE_ENV. Yeah, it's confusing especially because the docs mention NODE_ENV many times.

webpack's environment variables are different from the environment variables of operating system shells like bash and CMD.exe

• --env command-line option basically allows you to change the value of env.{some property} so if you just pass --env.production env.NODE_ENV will be undefined and env.production will be set to true. You would need to set it separately with --env.NODE_ENV=yourvalue. Note this has nothing to do with process.env. env is just the object passed as parameter to your function exported from webpack.config.js.

• --mode command-line option was introduced in webpack v4 and you can use it to set process.env.NODE_ENV on DefinePlugin only to one of 3 values - development, production or none. It looks like it was made exclusively for DefinePlugin. If you try to console.log(process.env.NODE_ENV); inside your webpack config it will be undefined. https://github.com/webpack/webpack/issues/7074

If you want to read those options you need to export a function instead of an object from your 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

People also use cross-env to set process.env.NODE_ENV and they don't use webpack's --env or --mode at all.

The only reason for using cross-env would be if you had multiple configs in your project like postcss.config.js and webpack.config.js and you wanted to set your environment just once, use process.env.NODE_ENV everywhere and be done with it. It just won't work with DefinePlugin out of the box.

You could also do this if you don't want to use cross-env:

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

or set mode based on process.env.NODE_ENV:

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

update 2021

webpack now added a new option --node-env so you don't need to rely on cross-env unless you use it in other places https://github.com/webpack/webpack-cli/issues/2362#issuecomment-771776945

这篇关于webpack --env.production和--mode =" production"之间有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！