webpack 이미지 설정

시작하기

이전 포스트 웹팩설정에 이어서 프로젝트에서 이미지를 불러오려면 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