Assets dalam Bundle CSS di Webpack

Sekarang mari kita buat supaya laluan ke fail .png digantikan dalam fail CSS semasa pembungkusan:

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(),
	],
};

Mari kita semak bagaimana ia berfungsi. Sambungkan imej ke titik kemasukan dan fail dengan gaya:

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

Katakan dalam fail dengan gaya kita menggunakan laluan ke imej:

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

Selepas pembungkusan, dalam bundle CSS laluan ke imej akan ditukar kepada yang baru:

body {
	background: url('laluan yang betul dari punca');
}

Tetapkan imej latar belakang dalam fail CSS.

Sambungkan imej ke titik kemasukan.

Lakukan pembungkusan dan lihat, ke fail manakah imej akan disalin dan bagaimana laluan baru akan kelihatan dalam bundle CSS.