Προσαρμογή της διαδρομής για τα αρχεία assets στο Webpack

Μπορείτε να ορίσετε τη διαδρομή για τα αρχεία assets στον φάκελο της συλλογής. Αυτό γίνεται χρησιμοποιώντας τη ρύθμιση assetModuleFilename. Σε αυτή τη ρύθμιση μπορούμε να καθορίσουμε τον φάκελο, όπου τοποθετούνται τα assets, καθώς και ένα πρότυπο για το όνομα του αρχείου.

Στο πρότυπο ονόματος, η εντολή [name] σημαίνει το όνομα του αρχείου, η εντολή [hash] - το hash, και η εντολή [ext] - την επέκταση του αρχικού αρχείου.

Λοιπόν, ας κάνουμε τη ρύθμιση:

export default {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve('dist'),
		assetModuleFilename: 'assets/[name].[hash][ext]', // η ρύθμισή μας
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				type: 'asset/resource'
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

Φροντίστε όλα τα assets να τοποθετούνται σε έναν φάκελο resources.