웹팩 이미지 불러오기 실패 이유: 아웃풋 폴더(static)

Q. src\images에 넣으면 html에서 로딩이 안되는데 static에 넣으면 로딩이 된다. 왜지? 똑같은 폴던데?

A. 웹팩 빌더를 이용하기 때문에 아웃풋파일에서 나온 것만 불러올 수 있다.

static파일을 아웃풋으로 설정했기 때문에 src/images에 있는 파일(이미지파일), 기타 다른 로컬파일을 참조할 수 없는 것이다.

해결방법

1) 이미지 파일을 그냥 아웃풋 디렉토리에 넣는다.

2) webpack.config.js파일에 'file-loader' 추가

웹팩이 이미지 확장자 파일을 발견하면 파일 로더를 실행한다. 로더가 작동하면 아웃풋에 설정한 경로로 이미지가 복사된다.

file-loader코드

Psychogrammer