웹팩으로 Vanila JS 프로젝트 번들링하기/이미지 번들링 with. file-loader

학습 목적

• 웹팩에서 이미지 파일사용을 하기 위해
• 과제를 성공적으로 끝마치기 위해

---

놀랍게도 웹팩에서 이미지를 사용하려면 이미지 번들러를 따로 추가해줘야 한다..
이를 몰랐기 때문에 이미지를 적용하는데 시행착오가 좀 많았지만 해결했으니 이 과정을 글로 남겨본다.

웹팩에서 이미지가 정상적으로 사용될 때

파일 상단에 사진을 import 해준 뒤 <img> 태그의 src에 "사진 이름.확장자"를 입력해주면 된다.

import "..사진 경로/사진.jpg";

.
.
.
<div>
	<img src=사진.jpg>
</div>

하지만 아직 이미지 번들러를 사용하지 않았다면 이미지의 경로를 찾을 수 없다는 에러메시지와 함께 적용이 되지 않을것이다.

이는 우리가 웹팩에서 dist 폴더에 bundle된 파일들을 위치시켜놨었는데 이 폴더에서 이미지를 찾을 수 없기 때문이다.

아래에 어떻게 하면 되는지 방법을 써놓으니 잘 따라와주길 바란다.

웹팩에서 이미지 사용하기

file-loader 설치하기

먼저 이미지 파일을 따로 빌드할 수 있게 해주는 file-loader를 설치해주자.

npm i file-loader -D

webpack.config.js파일 세팅

설치가 완료되면 webpack.config.js파일을 세팅하자.

...
module: {
        rules: [
            {
                ...
            },
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    },
                ],
            },
        ]
    },
...

위의 코드처럼 세팅을 해준 뒤

npm run build

빌드 명령어를 입력하게 되면 dist 파일에 import했던 이미지 파일들이 dist에 생성되는것을 볼 수 있다.

이렇게 되면 이미지 파일을 이용하는데 큰 문제는 없을것이다.