Webpack Config Organization

[00:00:00]
>> Sean Larkin: The reason why I spend kind of early on starting from scratch is that we've tried to create this system that allows you to not only have configurations based on your environment, right? Like that's literally what this mode config is. And so in your build-utils, anything that's for production, you're gonna have in production, you put in this config.

[00:00:22]
Anything that's for development, you're gonna have it here like your dev environment. Mode handles a lot of it so, before webpack 4 these would be much larger, but thankfully, we're doing a huge amount of stuff under the hood now for you automatically. Now when it comes to these presets, like this preset system that I was showing kinda the last piece as we were building out this configuration, was it doesn't have to be just one plugin.

[00:00:51]
The point of presets is that you can add isolated functionality that allows you to experiment, test or for any reason, right, that you can just add on with a flag, or add on with an extra script. So, I try and tell people in a prescriptive manner, this is really, this setup that I have here I've used maybe hundreds of times.

[00:01:19]
And it's really easy for anybody else to jump in and see that it's pretty manageable, right? And it's not too much complexity here. I would say maybe the most complexity is this tiny function, which Is just flattening out presets and making sure that if you don't pass a preset it doesn't fail, right?

[00:01:38]
And so I missed that when we live coded it yesterday but patched it. Does that answer his question? Or hopefully we'll find out.
>> Sean Larkin: But like ideally, what I always do in terms of best practice is don't hide your webpack config, keep it at the top level of the root of your project.

[00:02:00]
I think that's super important because web pack like sets the default context as being like the root of your package, right. Or wherever the config is. And so if I had to define the entry point and it was nested in some folder like 13 folders deep, I would have to work my way out to find that relative path.

[00:02:18]
So maybe the best-
>> Speaker 2: That's super, thanks a lot.
>> Sean Larkin: Yep, no problem. I'd say the best, if you're doing anything, just make sure you have your config at the top level, no matter what.
>> Sean Larkin: Because your no modules are gonna be at the top level and that's what webpack expects to resolve by default, is wherever it's at and then local to it, it's gonna be no modules.

[00:02:38]
So, you'll have a lot easier time. Or you'll find that if you move it around a bunch, you're gonna fuss with your configuration and your paths, and that's gonna be more complex.