Adding Webpack Plugins

[00:00:00]
>> Sean Larkin: The first thing that I love to do is take and add, so I would say the first essential plugin that I would add is called the html-webpack-plugin. And so just in case if you don't already have it installed, you should already in your cache, and so it should be a pretty fast install.

[00:00:17]
So you can run npm install html-webpack-plugin --dev.
>> Sean Larkin: And I'm just gonna do it myself here in yarn.
>> Sean Larkin: Or --save -dev, I'm sorry.
>> Sean Larkin: Okay, but we want that to kind of exist across all of our configurations, right? So there's gonna be things that we can add locally in this object.

[00:00:52]
But we may wanna separate out other things into separate config files. So kinda the way that I like to approach this is actually by creating a new folder, and I like to call it build-utils. I mean, you could call it whatever you want, but for me, this is a really nice indicator.

[00:01:11]
This is kind of where the build happens, right? And this is gonna where all of our supplemental, let's say partial configurations, or other utilities might end up. You're gonna have some utils or scripts or other things that you wanna apply, and usually ends up that's a great place for you to add them.

[00:01:30]
Now what's super nice is that since we're just in, this is our config right here, right, it's just a function that's returning it. And we wanna actually use this html-webpack-plugin, we can do so just by adding or requiring it into this module. So HtmlWebpackPlugin = require("html-webpack-plugin").
>> Sean Larkin: And then to add a plugin into your webpack configuration, we just have an array.

[00:02:08]
And you can pass a new instance, so new HtmlWebpackPlugin, and that's it.
>> Sean Larkin: And I guess while we're at it, since we're adding some plugins, I kinda wanna provide one more that's gonna give you a little bit more interactive terminal progress. And this is one that comes out of the box from webpack.

[00:02:29]
So we can just say, const webpack = require("webpack").
>> Sean Larkin: And then we can add, so any of the plugins that are on the webpack namespace, you can access with like the dot syntax. So I believe it is webpack.ProgressPlugin, yeah.
>> Sean Larkin: Then prettier is a making easier to read I suppose.

[00:03:02]
>> Sean Larkin: So why don't we go ahead and just build and see what happens, right? We should still be able to run npm run prod.
>> Sean Larkin: Let's see, we get an error?
>> Speaker 2: Do you need a new instance on that?
>> Sean Larkin: Did I forget the new?
>> Speaker 2: On the webpack.

[00:03:19]
>> Sean Larkin: Look, nice job, yes, you definitely need a new, anytime you pass a plugin.
>> Sean Larkin: So you get a little terminal feedback which is kinda nice. I like it, cuz then I can see what's taking the longest. It's better than just kinda waiting there for something to happen.

[00:03:37]
But you'll notice now, two assets have been emitted. This is new for us, what's going on? So why don't we take a look inside our dist folder and see what we have? So of course, there's our old main.js, we can just remove that, since we've got bundle.js now.

[00:03:57]
But let's look at the contents of the index.html file. So I consider html-webpack-plugin an essential, specifically for single page applications. Even multi-page applications, you can adapt this plugin to work. But why is it so valuable is because it injects whatever output assets are there into this file for you.

[00:04:22]
Even let's say if you add some caching feature, or if you change the name, it reads that data as part of the webpack life cycle and then creates an index.html file and injects into the output. Now what's super nice is now if I really wanted to, I could load an HTTP server and I could check this out locally.

[00:04:43]
But I think we can take it a step further, right?