Resource/asset hashing using Webpack in Kotlin React project

assets.js

// webpack.config.d/assets.js

const path = require('path')

const resourcesPath = path.resolve('../../../processedResources/js/main')

config.module.rules.push({
	test: /\.(gif|png|jpe?g|svg|woff2?)$/,
	use: [{
		loader: 'file-loader',
		options: {
			esModule: false,
			name: config.mode === 'development' ? '[name].[ext]' : '[contenthash].[ext]',
			outputPath: (url, resourcePath) =>
				config.mode === 'development' ?
					`assets/${path.dirname(path.relative(resourcesPath, resourcePath))}/${url}` :
					`assets/${url}`,
		},
	}],
})

config.resolve.modules.push(resourcesPath)

Example.kt

@JsName("require")
external fun asset(path: String): String

// in a React builder
img(src = asset("image.png")) {}