Webpack Config

[00:00:00]
>> Sean Larkin: So why don't we, for a moment just jump into, actually adding or start building into our configuration a little bit more. And so like this is kind of where I have, I call it starting out right but we're gonna go through and just cover and add a bunch of different features that I believe are like.

[00:00:19]
These are things that you're gonna come across that exist in any webpack.config. And so we could probably get rid of the mode none. But we wanna have a nice way to be able to compose, and organize and use our project. And so I wanna talk about a couple of things.

[00:00:46]
So we wanna eventually start writing some code that's gonna work in the browser, right? And probably the first thing that we wanna do is we're gonna apply certain features or capabilities dependent on if it's a production or development environment, right? And so like webpack, we tried to solve this out of the box as much as possible using the mode flag.

[00:01:09]
But we can also pass in environment variables, and environment flags from the CLI into the configuration, and that's super valuable. So webpack can take an object, as the default export for the module for your config, but it can also take a function that returns an object. And so,

[00:01:35]
>> Sean Larkin: Let's see, this is the nice shorthand syntax if you don't have any logic and it's like an instant return. So if we wanted to add additional behavior or what not, why don't we just start out by adding a single property. Let's just say, I don't like main.js personally, I like calling them chunks or bundles.

[00:01:55]
So let's go ahead and go to the output property, and this is, it's an object. And so there's a bunch of different properties underneath, but the one we're concerned about is filename. And we can just call it bundle.js.
>> Sean Larkin: So it should,
>> Sean Larkin: if I'm correct.
>> Sean Larkin: There we go, that's what I was expecting.

[00:02:28]
>> Sean Larkin: So you should now see the name of your bundle changed to bundle.js.