Algemene Assets in Webpack

Laten we nu algemene assets proberen. Laten we het zo instellen dat afbeeldingen kleiner dan 8kb worden omgezet in base64, en afbeeldingen groter dan deze grootte worden gekopieerd naar een bestand:

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

De limiet voor de afbeeldingsgrootte kan worden gewijzigd. Laten we bijvoorbeeld een limiet instellen van 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(),
	],
};

Sluit enkele afbeeldingen van verschillende groottes aan op het entry point. Controleer welk type transformatie wordt toegepast voor elke afbeelding.