Personalización de la ruta de archivos de recursos en Webpack

Se puede establecer la ruta a los archivos de recursos en la carpeta de construcción. Esto se hace mediante la configuración assetModuleFilename. En esta configuración podemos especificar la carpeta donde se colocan los recursos, así como la plantilla del nombre del archivo.

En la plantilla del nombre, el comando [name] designa el nombre del archivo, el comando [hash] - el hash, y el comando [ext] - la extensión del archivo original.

Entonces, vamos a realizar la configuración:

export default {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve('dist'),
		assetModuleFilename: 'assets/[name].[hash][ext]', // nuestra configuración
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				type: 'asset/resource'
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

Haga que todos los recursos se coloquen en la carpeta resources.