Assets em Pacotes CSS no Webpack

Agora vamos fazer com que os caminhos para arquivos .png sejam substituídos nos arquivos CSS durante a 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(),
	],
};

Vamos verificar como isso funciona. Vamos importar uma imagem para o ponto de entrada e um arquivo de estilos:

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

Suponha que no arquivo de estilos usemos o caminho para a imagem:

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

Após a build, no pacote CSS, o caminho para a imagem será alterado para o novo:

body {
	background: url('caminho correto a partir da raiz');
}

Defina uma imagem de fundo no arquivo CSS.

Importe a imagem para o ponto de entrada.

Execute a build e observe em qual arquivo a imagem será copiada e como o novo caminho aparecerá no pacote CSS.