laravel-mix-make-file-hash

Laravel Mix make file hash

By default, the hashing system in Laravel Mix will append a querystring to the filename to invalidate the cache.

Example from mix-manifest.json:

{
  "/dist/main.js": "/dist/main.js?id=1e70e7c11a9185f57e64"
}

The problem is that this way of hashing may not work with some caching systems.

Instead, "Laravel Mix make file hash" will move the hash into the filename of the hashed files. So your mix-manifest.json will look something like this:

{
  "/dist/main.js": "/dist/main.1e70e7c11a9185f57e64.js"
}

Under the hood

To accomplish the re-hashing, this script will:

1. Read the mix-manifest.json generated by Laravel Mix.
2. Remove stale hashed files.
3. Rename the files found in the manifest to include the hash within the filename.
4. Update mix-manifest.json with the new filenames.
5. Return the contents of the new manifest for further usage (if required).

Turn on debug to activate noisy feedback: { debug: true }

Installation

Install package from npmjs.com:

npm i -D laravel-mix-make-file-hash
# or
yarn add laravel-mix-make-file-hash -D

Normal usage

if (mix.inProduction()) {
  mix.version();
  mix.then(() => {
    const convertToFileHash = require("laravel-mix-make-file-hash");
    convertToFileHash({
      publicPath: "web",
      manifestFilePath: "web/mix-manifest.json"
    });
  });
}

Promise usage

convertToFileHash returns a Promise containing the new mix-manifest.json contents. This means you can perform another task after the convertToFileHash has finished the re-hashing.

if (mix.inProduction()) {
  mix.version();
  mix.then(async () => {
    const convertToFileHash = require("laravel-mix-make-file-hash");
    const fileHashedManifest = await convertToFileHash({
      publicPath: "web",
      manifestFilePath: "web/mix-manifest.json"
    });
    // Do something here...
  });
}

Options

Name	Type	Default	Description
publicPath *	string	undefined	The path to your public folder (eg: "web")
manifestFilePath *	string	undefined	The filePath to your mix-manifest.json (eg: "web/mix-manifest.json")
blacklist	string/array	undefined	A glob pattern of files to ignore re-hashing
keepBlacklistedEntries	boolean	false	Whether to keep blacklisted entries in the manifest
delOptions	object	{ force: false }	Options to provide to del - See options
debug	boolean	false	Debug exactly what's happening (or meant to happen) during runtime

* = Required

Full config example

if (mix.inProduction()) {
  mix.version();
  mix.then(async () => {
        const convertToFileHash = require("laravel-mix-make-file-hash");
        convertToFileHash({
            publicPath: "web",
            manifestFilePath: "web/mix-manifest.json",
            blacklist: ["html", "main.js"],
            keepBlacklistedEntries: true,
            delOptions: { force: false },
            debug: false
        });
  })

Links

This script was created for the Agency Webpack Mix Config.