https://github.com/ben-rogerson/laravel-mix-make-file-hash
📑 Convert Laravel Mix querystring hashing to filename hashing. Eg: main.css?id=abcd1234 to main.abcd1234.css
https://github.com/ben-rogerson/laravel-mix-make-file-hash
file-hashing hashing laravel-mix
Last synced: 7 months ago
JSON representation
📑 Convert Laravel Mix querystring hashing to filename hashing. Eg: main.css?id=abcd1234 to main.abcd1234.css
- Host: GitHub
- URL: https://github.com/ben-rogerson/laravel-mix-make-file-hash
- Owner: ben-rogerson
- License: mit
- Created: 2019-06-27T04:25:38.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-03-20T08:40:30.000Z (over 3 years ago)
- Last Synced: 2025-03-18T06:36:00.033Z (7 months ago)
- Topics: file-hashing, hashing, laravel-mix
- Language: JavaScript
- Homepage:
- Size: 38.1 KB
- Stars: 12
- Watchers: 3
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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`:
```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:
```json
{
"/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](https://www.npmjs.com/package/laravel-mix-make-file-hash):
```bash
npm i -D laravel-mix-make-file-hash
# or
yarn add laravel-mix-make-file-hash -D
```
## Normal usage
```js
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.
```js
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](https://www.npmjs.com/package/del#options) |
| debug | `boolean` | `false` | Debug exactly what's happening (or meant to happen) during runtime |
| disableFileOperations | `boolean` | `false` | Only update the manifest. No copying or deleting of files. Pretty much a dry run. |
\*Â = Required
## Full config example
```js
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](https://github.com/ben-rogerson/agency-webpack-mix-config).