Κοινά Assets στο Webpack

Ας δοκιμάσουμε τώρα τα κοινά assets. Ας κάνουμε τις εικόνες μικρότερες από 8kb να μετατρέπονται σε base64, ενώ οι εικόνες μεγαλύτερες από αυτό το μέγεθος να αντιγράφονται σε αρχείο:

export default {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve('dist'),
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				type: 'asset',
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

Μπορούμε να αλλάξουμε το όριο στο μέγεθος της εικόνας. Για παράδειγμα, ας ορίσουμε όριο στα 4kb:

export default {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve('dist'),
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				type: 'asset',
				parser: {
					dataUrlCondition: {
						maxSize: 4 * 1024 // 4kb
					}
				}
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

Συνδέστε στο σημείο εισόδου πολλές εικόνες διαφορετικού μεγέθους. Ελέγξτε τι τύπος μετασχηματισμών εφαρμόζεται για κάθε εικόνα.