Webpack Q&A

[00:00:00]
>> Speaker 1: So can you use webpack-dev-server for server side development, or is it only client side?
>> Sean Larkin: Heck yes, you can. Well, okay, so you can use it, but you actually use a piece that abstracts it called webpack-dev-middleware. So webpack-dev-server is just made up of webpack-dev-middleware and express. And it's essentially an express plugin.

[00:00:25]
So you can actually, we have the package itself standalone, so I believe it's under webpack. But you can just do npm install, webpack-dev-middleware, and you add it to your express application, just like any other plugin. The only difference is you're gonna pass your config object to it and require your config manually cuz there's no CLI around it.

[00:00:47]
And you just add that as part of your dev middleware plugin configuration option.
>> Sean Larkin: But that's really nice cuz once you have things like hot module replacement on the server side, it's like. So nice, I love that.
>> Sean Larkin: And it's great for API developments, like reloading your server instantly.

[00:01:07]
I used to write Ruby with Sinatra for APIs, and it would just pain me how much I'd have to kill it, start up webrick again. It's like the little things which provide a lot of value.
>> Speaker 1: Is there a way to utilize the HTML webpack plugin with multiple templates?

[00:01:27]
And if it is possible to have it check all the HTML files in a certain folder automatically instead of having to define a new HTML webpack plugin every single time?
>> Sean Larkin: So yes and no, so for each instance, so it sounds like this person has a multi-page app architecture, I'm guessing.

[00:01:49]
And it gets a little bit more complicated, where yes, you do actually have to have a new instance of this plugin. But you can just pass the template a path, so much that I wrote a plugin while I was at Mutual of Omaha. Now they're maintaining it still, so I don't know if they've gotten it to webpack for compatible yet.

[00:02:10]
Github.com, so there is actually an open source plugin, mutualofomaha/multipage-webpack-plugin. And this kind of aims to simplify kind of what they're experiencing, where essentially,
>> Sean Larkin: Yeah, it looks like it hasn't updated yet to webpack 4. But I was working in a Laravel shop, Laravel PHP, and so they had lots of crazy nested folder conventions, it's so ridiculous.

[00:02:44]
But essentially, we wanted to make a new entry point, and we actually took and compiled it to a custom twig template. And so that's just the html-webpack-plugin capability. But all we're doing here is, here's kind of what some of the underlying. What you could do if you didn't wanna use this plugin is you could literally just access your entries, and then for each entry, create a new instance of the plugin.

[00:03:14]
And you just have to make sure that you're filtering down what chunks html-webpack-plugin is injecting into the file, right? Because if you had a multi-page app, and you have multiple entry points, when you have multiple entry points, those are meant to be one per page. And so you wouldn't want html-webpack-plugin to inject them all into each template, you would just want the one you need for each template.

[00:03:40]
So yes, there is a way to do it. It's not as eloquent. And that's kind of the motivation for creating this plugin. You can look in the examples. Essentially, the simplest example would just look at the three entry points. And then it just generates,
>> Sean Larkin: Let's see, simple, and the config, what's nice is all you'd have to do is pass this in as your configuration.

[00:04:08]
So you could look at that, take a look, maybe your first open source opportunity to convert it to v4 [LAUGH]. I know the devs at Mutual, so they're helpful. Yes?
>> Speaker 1: Are there situations where webpack, the process runs into an out of memory error, and where would you capture that exception?

[00:04:27]
>> Sean Larkin: So essentially, yeah, when you think about in just programmatic complexity, right, so, webpack has to create an entire graph of all of your source files. And store it in memory before it creates a bundle, right? So who here has taken computer science or knows big o complexity?

[00:04:46]
Anybody? Okay, so your space complexity for webpack, or webpack space complexity, will be linear in terms of how many modules you have in your app. So you will end up consuming more and more memory because it needs more memory. So if it's for a production build and it's just a build and not dev server, I would say increasing the memory limit for Node.

[00:05:15]
And Airbnb has gone all the way up to, they have a 32 gig. 32 GIGs are allocated to Node, because they're just so huge. But we have some caching for webpack 5. We have a whole caching store that's aiming to solve this. So that would be one way to cache it.

[00:05:34]
The other one would be, if you're seeing it in webpack-dev-server, then it might be a memory leak. Or you might be doing something like adding a hash, but still doing a dev server. If you're creating hash in memory that's unique every time you change a file, then it's keeping all of that in memory over time.

[00:05:56]
And so it could just be you're using dev-server, but using prog features like hashing. And so you should probably turn that off for your dev mode.