[Sections 2.4, 2.5] What is --env?

[JESii]

From the description in the book, I was unsure as to what --env really was, so I went googling for information: I didn't find much and what I did was confusing. 1) The webpack document provides only a few, cryptic comments about --env (https://webpack.js.org/configuration/configuration-types/) 2) I couldn't find any reference to --env in the devServer section (https://webpack.js.org/configuration/dev-server/#devserver)

Not sure where else to go to find out more...

Maybe more introduction/definition -- or good reference links -- would help here?

Thanks...jon

[sapegin]

--env is a command line option for webpack that allows you to pass any parameters to your webpack config. To use it you should define your config as a function instead of an object.

webpack --env.production --env.platform=web

// webpack.config.js
module.exports = function(env) {
  // env === {production: true, platform: 'web'}
};

[bebraw]

I wonder how to make those sections better. Now it's small description + example to showcase the idea. I'm not sure if there's more to add.

[sapegin]

Maybe actual command and resulting env object?

[bebraw]

Yeah, that could be it.

[JESii]

Sorry; been really busy; will have more later today with my observations and some suggestions.

[JESii]

Thanks, @sapegin... that's helpful, and yet there is more to --env. And my point really is about the presentation in the book.

The first mention of --env is in section 2.4 "Attaching WDS to the Project", where it says that you can pass information to webpack via that parameter, and gives the example: "start": "webpack-dev-server --env development" with the comment "WDS picks up configuration like webpack itself. The same rules apply" [As a side note, I'm not quite sure what the 'rules' are here, but that may be a topic for another time.]

So here the --env variable is a simple string that is being passed to webpack and, by implication, to WDS. However, nothing is done with this parameter and the WDS documentation https://webpack.js.org/configuration/dev-server/ has no mention of this parameter. The only mention of --env in the webpack configuration documentation https://webpack.js.org/configuration/configuration-types/ is essentially what you responded above.

The book then goes on in section 2.5 "Verifying that --env Works". Here it says that webpack is "able to receive the value of --env if the configuration is defined within a function."

Now that's confusing: the previous section (2.4) said we can pass "...information about the environment to the webpack configuration" by using --env development". First, the configuration gets that information and then you have to use a function to get that information.

Later in section 2.5 "Understanding --env", the book finally says "Even though --env allows to pass strings to the configuration, it can do a bit more" and then goes further into the use of functions. [Suggestion below]

What would be helpful to beginners, one audience of this book, would be to first provide a description of --env, something like:

"The --env command line parameter --env provides a mechanism for passing information to the webpack configuration and thus to any other webpack modules (such as WDS) which read the configuration. It can be either a simple string (i.e., --env development) or a key/value combination (e.g., --env.target production), depending on your needs. We'll set up the string version first, and then go on to describe the key/value approach later."

What would also be helpful is to actually use the string value in the configuration, or describe how WDS uses the value. This would provide a use case that shows why we're using this parameter at all. In the current book form, it's just sitting there on the commands, but providing no obvious value.

Finally, I think the webpack documentation could use a bit of updating with regard to this subject. Once I get a little more experience with webpack, I could try that, but don't consider myself sufficiently knowledgeable on the subject to attempt that.

HTH

Just to make it clear, I am thoroughly enjoying the book, learning a lot, and have already strongly recommended it to several of my colleagues -- our project is just starting a heavy investment in webpack, by breaking up a huge application into multiple chunks and thereby improving performance significantly.

Thanks much...jon

[bebraw]

I might upgrade the --env bit into a chapter of its own once I do a bit of restructuring. That would be a good chance to discuss other variants as well. Now they are implied when needed and that's not so great.

Let's leave this issue open for now till I figure out the right fix. 👍

[JESii]

Works for me; holler if there's anything I can do to help.

[bebraw]

I've worked on this since our discussion. Here's what I've got together so far: https://survivejs.com/webpack/developing/composing-configuration/#understanding-env .

Note that due to webpack 4 and mode, I had to rework the content a bit. Quite a bit had to change.

Let me know what you think.

[emmiep]

I found it confusing that you could just replace --mode with --env without webpack complaining. Does setting --env automatically set the mode as well?

[bebraw]

Does setting --env automatically set the mode as well?

No. You'll either have to set mode explicitly as I do in the book or pass --mode. The two fields are orthogonal this way and not directly related to each other.

I think it's good enough now so I'll close the issue.