Assets trong CSS Bundles ở Webpack

Bây giờ hãy làm sao để các đường dẫn tới file .png được thay thế trong các file CSS khi build:

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

Hãy kiểm tra cách nó hoạt động. Import một hình ảnh và một file stylesheet vào điểm vào:

import './images/img.png';
import './styles.css';

Giả sử trong file stylesheet chúng ta sử dụng đường dẫn đến hình ảnh:

body {
	background: url('images/img.png');
}

Sau khi build, trong CSS bundle đường dẫn đến hình ảnh sẽ được thay đổi thành mới:

body {
	background: url('đường dẫn đúng từ gốc');
}

Thiết lập hình nền trong file CSS.

Import hình ảnh vào điểm vào.

Thực hiện build và xem, hình ảnh sẽ được sao chép vào file nào và đường dẫn mới trong CSS bundle sẽ trông như thế nào.