JavaScript 번들에서 Webpack의 에셋

.png 파일에 대한 에셋을 설정해 보겠습니다:

export default {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: path.resolve('dist')
	},
	module: {
		rules: [
			{
				test: /\.png$/,
				type: 'asset/resource'
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin(),
	],
};

엔트리 포인트에 .png 파일을 연결합니다:

import img from './images/main.png';

img 변수에는 이미지 파일의 새 경로가 들어갑니다:

console.log(img);

.jpg 파일에 대한 에셋을 설정하세요.

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

엔트리 포인트 파일에서 이미지들의 새 경로를 출력하세요.