Splitting Environment Config Files

[00:00:00]
>> Sean Larkin: So what we wanna do is we want a way to conditionally load an extra JavaScript module that's going to kind of merge in with our base set of configuration items, right? And so the best way that I like to do it is I actually like to just declare a variable.

[00:00:21]
So what I want you to do, out of the lines that are right here, is just pull in this line right here, modeConfig. So modeConfig, we'll jump into our main configuration, hide the bar, there we go. So we'll say const modeConfig equals a function that takes an argument.

[00:00:51]
And it returns the require that apparently returns a function that you can call, right? So let's break down what this is doing. So remember how I said CommonJS can be abused, right? You can abuse CommonJS because require is just a function. And so in this case, what we're doing here is we are just calling require.

[00:01:18]
And based on what we pass into this argument here, it's either gonna go look for webpack.production or webpack.development, right? So we're just leveraging the Node or the env.mode, we're passing it in. And so let's jump back over.
>> Sean Larkin: So if we also look here, I've kind of added some interesting defaults to our arguments, and this is just kind like a safety net.

[00:01:53]
I think this allows us to be able to, let's say if somebody just jumped in for the first time, and wasn't sure what they were doing. And just wanted to run and have an experience, by adding. So I'll kind of explain syntactically what it's doing. So what we're doing is we're actually providing a, let's see, where is it, equals mode.

[00:02:19]
[SOUND] There we go. So this syntax right here is just the one argument. But with ES6, you can provide defaults, right? So if an object isn't even passed in, we're gonna default it to, so env would essentially be mode in presets with like an empty array.
>> Sean Larkin: And so that way if somebody just went and run, like for example, just went yarn webpack or ran webpack, it would still work and just load the basic configuration.

[00:02:58]
So it's just kind of a fallback and a nice pattern to have. So now we're kinda building up a little bit into this. We're able to have the mode, but how are we going to compose this object? We have this common configuration, but we need a way to merge in other configurations, right?

[00:03:20]
And in a way that's safe, because this config has arrays, and so just object assign is not gonna be really valuable to you, right? And it's not gonna respect different things like array orders or other sorts of properties in your webpack config. So one of our maintainers actually wrote a really great library called webpack-merge, has anybody used it here, webpack-merge?

[00:03:44]
I love it, cuz it's essentially just object assign for webpack-configs. And so you can add it just by saying, npm install webpack-merge -d or whatever, if you wanna add the d flag, that's fine. Or for me, yarn add webpack-merge.
>> Sean Larkin: Woah, it got angry.
>> Sean Larkin: I'm still hiding in the bin folder, that was weird, yarn add webpack-merge.

[00:04:16]
>> Sean Larkin: So why don't we go ahead and pull in that module? Now, there we go.
>> Sean Larkin: So I'd like to say something like const webpackMerge = require and then webpack-merge. And so there are many other options, but by default it's really just doing object assign. So if you've used object assign before, it's the exact same behavior.

[00:04:41]
You can pass a simple default, and then you can add whatever other thing you want to compose in the same manner on top of it. And so you can kinda see here, what I've done is, I return webpackMerge, and our base configuration is just the first argument. And then you'll see modeConfig, which returns either a production or development configuration, is added on second.

[00:05:06]
So I'll just add this code in together here. So webpackMerge, so now we're just returning a function that will return our composed configuration, right? And the second argument to it will be our modeConfig. Now I try to chunk this out so it's a little easier to read. I know prettier doesn't always make it the best, but we can totally try it here.

[00:05:35]
So modeConfig.
>> Sean Larkin: And we can just pass in,
>> Sean Larkin: Mode presets, that's kind of just passing the env to the other configuration.
>> Sean Larkin: I kind of like making available, I know that's just set mode, let's just set mode I think that's fine.
>> Sean Larkin: There we go, so why don't we just try running like, will our code run?

[00:06:06]
>> Sean Larkin: I'll give you just a second.
>> Sean Larkin: Now where did I break it?
>> Sean Larkin: Wait, /build-utils/webpack, did I spell it wrong? build-utils/, I know why, oops.
>> Sean Larkin: There we go.
>> Sean Larkin: Here we go.
>> Sean Larkin: Did anybody have any troubles building? We're adding a little bit more complexity, and so this may, I wanna take time on it, this is super important.

[00:07:02]
This is something where you could adopt a pattern like this, and you could reuse it across any work environment that you want, cuz it's incredible generic. But I think having these patterns make it really easy to kind of isolate configuration details. Especially when we get into kind of my pattern of presets.

[00:07:23]
>> Sean Larkin: Looks like when I ran here we did have a successful build. And really nothing's changed, right, because we haven't added anything into those development and production configs.
>> Speaker 2: And right now we can trust that behind the scenes the merge is happening, even though we're not seeing the result of that yet.

[00:07:49]
>> Sean Larkin: Yeah, we can try it. Technically we could say our mode is something that we. Well, yeah, absolutely, so why don't we change the name of the bundle in our production mode to,
>> Sean Larkin: We could jump into webpack.production, we could say output, and say filename, and let's,
>> Sean Larkin: We have special string interpolate.

[00:08:23]
We can use these string helpers that webpack provides out of the box. And this allows us to have hashing for JavaScript modules when they're created. So technically in theory, we can just add this tiny partial that is this partial config here. So output, filename, etc
>> Speaker 2: Just adding the array chunk, or I guess it's not an array, but whatever, right?

[00:08:47]
It's chunk, it patches it, that's it?
>> Sean Larkin: Yep, that's how you get hashing support with webpack. Now there is like a bunch of different string helpers. I think one of name, one is chuckhash. Or no, I'm sorry, it's not chunk, it's hash, I apologize. Do I have chunkhash there originally?

[00:09:03]
I meant to say chunckhash. And I can, if you remind me later on day two, I can show you where all the options are. You can actually provide emojis.
>> Speaker 2: Sounds useful.
>> Sean Larkin: Yeah, well, some people, they wanna have that feature. So if I run yarn prod again.

[00:09:25]
>> Sean Larkin: Let's see, what do we get now? Hey.
>> Sean Larkin: So there you go, that's in a separate file. You look in your dist folder, there's that. What's awesome is that hey guess what? This is super about html-webpack-plugin, it just reads the hash and put it in for you.

[00:09:45]
If hash has changed think of how tedious that would be to have to write a script that does this for you.