frontendDevEnv

webpack 이미지 설정

image, react, typescript, webpack
Views: 186

시작하기

이전 포스트 웹팩설정에 이어서 프로젝트에서 이미지를 불러오려면 webpack에서 몇가지 설정을 해주도록 하겠습니다.

설치하기

1
npm install --save-dev file-loader

file loader 패키지를 설치해줍니다.

설정하기

webpack.config.js파일 모듈의 룰 부분에 file loader를 추가 해주도록 합니다.

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//...
module.exports = {
	//...
	module: {
		rules: [
		//...
			{
				test: /\.(jpe?g|png|gif|svg)$/,
				loader: 'file-loader'
			}
		]
	},
	//...
};

typescript 이미지 불러오는 오류

typescript를 사용하는 경우 이미지를 불러오는데 오류가 나는 경우가 있습니다.
이 경우에는 추가로 설정을 해주어야합니다.

src/app.d.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// / <reference types="node" />
// / <reference types="react" />
// / <reference types="react-dom" />

declare module '*.gif' {
	const src: string;
	export default src;
}

declare module '*.jpg' {
	const src: string;
	export default src;
}

declare module '*.jpeg' {
	const src: string;
	export default src;
}

declare module '*.png' {
	const src: string;
	export default src;
}

declare module '*.svg' {
	import * as React from 'react';

	export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

	const src: string;
	export default src;
}

이미지 파일의 타입을 정해주어야 에러가 나지 않고 정상적으로 작동합니다.
이것으로 간단하게 웹팩 이미지 설정을 추가했습니다.

Share