Bates in CSS-Bundels in Webpack

Laat ons nou maak dat paaie na .png-lêers in CSS-lêers tydens die bou vervang word:

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

Laat ons toets hoe dit werk. Laat ons 'n prent en 'n stylêer insluit in die inskrywingspunt:

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

Kom ons neem aan dat ons in die stylêer 'n pad na die prent gebruik:

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

Na die bou sal die pad na die prent in die CSS-bundel na 'n nuwe een verander word:

body {
	background: url('korrekte pad van die wortel');
}

Stel 'n agtergrondprent in die CSS-lêer.

Sluit die prent in die inskrywingspunt in.

Voer die bou uit en kyk, in watter lêer die prent gekopieër word en hoe die nuwe pad in die CSS-bundel lyk.