Webpack의 CSS 번들 내 Assets

이제 빌드 시 CSS 파일 내의 .png 파일 경로가 대체되도록 만들어 보겠습니다:

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

이것이 어떻게 작동하는지 확인해 봅시다. 엔트리 포인트에 이미지와 스타일 파일을 연결하겠습니다:

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

스타일 파일에서 이미지에 대한 경로를 사용한다고 가정해 보겠습니다:

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

빌드 후 CSS 번들에서 이미지 경로는 새로운 경로로 변경될 것입니다:

body {
	background: url('올바른 루트 상대 경로');
}

CSS 파일에서 배경 이미지를 설정하세요.

이미지를 엔트리 포인트에 연결하세요.

빌드를 실행하고, 이미지가 어떤 파일로 복사되는지, 그리고 CSS 번들에서 새 경로가 어떻게 보이는지 확인하세요.