Content hashing

[TylorS]

In the latest versions (I think 0.10.x) of Esbuild they have added support for configuring asset names during output.
In particular I'd be interested in seeing support for including that configurations ability to add content hashes to the output.

I'm still trying to catch up with esbuild's progress, but I'm not sure if they support an asset manifest where you can lookup "foo.js" to "foo.hash.js". If it doesn't it would be great to add support within snowpack, potentially including the import map JSON for web_modules. What do others think?

[TylorS]

There's a link to the asset names documentation https://esbuild.github.io/api/#asset-names

[DavidOliver]

And for entry/"non-asset" files (the JS files in my PHP project's case):

• enable hashes in entry file paths evanw/esbuild#1001
• https://esbuild.github.io/api/#entry-names

It would be great to be able to simply set esbuild to hash all output files with Snowpack config.

I'm currently having hashes added to JS, CSS and image filenames with Buster and a pre-bust script that replaces the file-relative paths in built JS and CSS files to the site-relative paths that Buster requires in order to do its in-file path replacements. (E.g. ./_snowpack/pkg/file.js to /build/_snowpack/pkg/file.js.) In case it helps anyone else:

package.json:

  "scripts": {
    "build": "snowpack build",
    "postbuild": "npm run bust",
    "bust": "buster bust",
    "prebust": "node scripts/pre-bust.js"
  },

scripts/pre-bust.js:

/**
 * Replaces paths with site-relative versions in preparation for buster.
 */

const replace = require('replace-in-file');

const replacements = [
	{
		files: 'web/build/**/*.js',
		from: /"\.\/_snowpack\/pkg\//g,
		to: '"/build/_snowpack/pkg/',
	},
	{
		files: 'web/build/**/*.css',
		from: [/url\(font\//g, /url\(img\//g],
		to: ['url(/build/font/', 'url(/build/img/'],
	}
];

replacements.map(replacement => {
	let replacementResult = replace.sync(replacement);

	return console.log(
		replacementResult
			.filter(result => result.hasChanged)
			.map(result => result.file)
	);
});