Passing Variable to Webpack Config

[00:00:00]
>> Sean Larkin: I think, the first thing I want to start off doing is just showing you how you can actually access environment variables from the command line, right? And the first thing that we're gonna do is jump into our scripts and we're just gonna modify it slightly. So [COUGH] instead of just passing a mode flag which is acceptable, instead, what we're gonna do, is anywhere we have mode specified, let's change it to env.mode.

[00:00:33]
>> Sean Larkin: So when you pass the env flag to webpack, what it does is it takes whatever value that is, in this case, it's like we're passing an object with a mode property. And it's gonna provide that to the config for you, in the inside of the function. So I'm gonna make this a little easier and not use the functional programming syntax and instead I'll just say, return an object.

[00:01:00]
So something like this. And it'll reformat here. Take that, there we go. That looks similar, okay.
>> Sean Larkin: So we can actually see what the env value is just by console logging it, right? This is just a JavaScript module, console should work in Node. And we're requiring it, so we should see it.

[00:01:25]
So if I ran npm run prod, doesn't even matter. There we go. We actually had, it logs the whole object, right? Does that make sense so far? Okay, so you can also just pass single primitives also so if you just passed in env production, when I ran this again.

[00:01:55]
We're gonna see the value is just production. Now, I always opt for having it be an object because there could be lots of things that you wanna pass in, could be test parameters, it could be environment variables. If you're using it from another build process like Make or Cradle, or whatever, you can actually, whatever the term is for that, sum, env, var or whatever.

[00:02:21]
You could pass it in like that and interpolate. So I always find that valuable. So now, we get a warning again though. So the mode option is not set anymore, right? We're just passing an env into the function. So we're just gonna leverage this information now and pass it directly into the mode property.

[00:02:41]
Like we defined earlier when we set it to none, right? So mode: env.mode.
>> Sean Larkin: So now, if we run it again,
>> Sean Larkin: There we go, back to kind of where we started before him. So now that we're able to actually get different behaviors inside of the function, we can actually start doing some conditional stuff, right?

[00:03:09]
We can change the behavior of this object conditionally, based on that env parameter. I might even do something like this and say, so I can tell right away, mode. Makes it easier to see. I think that would still work, too. npm run prod, let's see.
>> Sean Larkin: Where did I fail?

[00:03:35]
>> Sean Larkin: That's why. [LAUGH] Of course, you have to update your variables, Shaun.
>> Sean Larkin: And since we're destructuring, you can actually make it look like that. It makes it a little bit easier.
>> Sean Larkin: So now, we're kind of at a point where it's, we're gonna have three different kind of configurations, if you think about it.

[00:04:09]
One is gonna be, there are gonna be properties or essential plugins that you wanna have across your whole build system, right? And then there are gonna be some that work with your mode development and some that work with mode production. And there could be more, I think that these are probably gonna be the best, this will be kind of a baseline or foundation.

[00:04:29]
And this is not something you may find that maybe you don't even need to have this much broke apart. But it makes it easier to maintain and a little bit easier to manage and understand.