Assets in CSS bundels in Webpack

Laten we het nu zo instellen dat paden naar .png bestanden worden vervangen in CSS bestanden tijdens het bouwen:

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

Laten we testen hoe dit werkt. Laten we een afbeelding en een stijlbestand importeren in het entry point:

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

Stel dat we in het stijlbestand een pad naar de afbeelding gebruiken:

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

Na het bouwen zal het pad naar de afbeelding in de CSS bundle worden gewijzigd naar een nieuw pad:

body {
	background: url('correct pad vanaf de root');
}

Stel een achtergrondafbeelding in het CSS-bestand in.

Importeer de afbeelding in het entry point.

Voer een build uit en kijk naar welk bestand de afbeelding wordt gekopieerd en hoe het nieuwe pad eruit zal zien in de CSS bundle.