Tài sản chung trong Webpack

Bây giờ hãy thử làm việc với các tài sản chung. Hãy thiết lập để các hình ảnh nhỏ hơn 8kb được chuyển thành base64, còn các hình ảnh lớn hơn kích thước này sẽ được sao chép vào file:

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

Có thể thay đổi giới hạn về kích thước hình ảnh. Ví dụ, đặt giới hạn là 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(),
	],
};

Kết nối một vài hình ảnh có kích thước khác nhau vào điểm vào. Kiểm tra xem loại chuyển đổi nào được áp dụng cho mỗi hình ảnh.