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.