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;
};
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
//...
};
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments