Handling Hashed Filenames0:00
Now, at this point, we've set up our versioning. But when we compile this down with npm run dev, yes, it does version the files. But the issue is, in your index.html file, well now, you can't hard-code the filename, because it'll be main.some.hash that will change every single time you compile. So for your projects, you'll need to figure out some way to determine that filename dynamically. Now here's one thing we could do. We could set up our own little custom plugin. So up until this point, we've instantiated existing plugins. But another thing you can do is just pass a function here, and Webpack will trigger it automatically.
Creating a Webpack Plugin0:35
But another thing you can do is just pass a function here, and Webpack will trigger it automatically. So we could do a plugin here and hook into when Webpack is done compiling. That will accept the stats, and that will be like the compile stats. It contains all the chunk names and the hashing and all of that will be contained here. So what we could do is just require the file system or do it up top and reference it. And then we will do writeFileSync. So we're going to write to maybe a manifest.js file. Let's give it the name. It will be, let's do this, path.join, the current directory name, and then it's going
Let's give it the name. It will be, let's do this, path.join, the current directory name, and then it's going to be called dist.manifest.json. Now finally, for the contents, yeah, let's just stringify the stats. So to start, we'll do something like this. Okay, so does that make sense? We're preparing our own little custom quickie function. And we listen for when Webpack is done compiling. We'll get the stats, and we will convert them to JSON, stringify them, and then write it to a file called manifest.json.
Generating a Manifest File1:34
We'll get the stats, and we will convert them to JSON, stringify them, and then write it to a file called manifest.json. So now, if we give this a run, and if we switch back, yeah, you'll now see a new manifest.json file. But it's going to contain tons of code here or tons of JSON, and a lot of this you probably won't need. And for larger projects, by the way, with lots of dependencies and lots of chunks, this could be hundreds and hundreds and hundreds of lines long. So generally, I wouldn't necessarily recommend writing this to a manifest unless you absolutely need to.
Reducing Manifest Contents2:04
So generally, I wouldn't necessarily recommend writing this to a manifest unless you absolutely need to. Really, the things you probably need is right here, the assets by chunk name. So if I want my vendor file, here's the hash to it. If I want my main file, here's the hash. And the deal is, every time we change this, well, we're going to generate new hashes, right? But the manifest file will be generated as well, and that will at all times reference the current hash, as you can see right there. So what you might want to do is something as simple as this.
Using Manifest in Apps2:32
the current hash, as you can see right there. So what you might want to do is something as simple as this. Let's convert it to JSON, and then we're just going to grab that single object. So now, when I compile it down and we take a look, it's going to be a lot easier to maintain. So then, at this point, yeah, it just kind of depends upon how you're building your app. So for example, in Laravel, you may be familiar with a mix function. And what that function does is it literally reads your manifest.json file and returns the associated value. So if you do something like mix('js/app.js'), the way I have it set up, with Laravel, it would look like something like this.
So if you do something like mix js/app.js, the way I have it set up, with Laravel, it would look like something like this. Anyways, it's just going to find that value and say, oh, that points to this hashed version, and that's exactly what I'm going to return. But in this case, we're using the chunk names. But yeah, you could set up the exact same thing using Ruby or php, do a simple file_get_contents on this, and then parse everything you need. Otherwise, you could fetch the JSON for this file and then inline it into your HTML page. It's really entirely up to you.
