[Webpack] file-loader와 url-loader 비교 차이점 정리

file-loader와 url-loader?

---

웹팩 설정 중 둘의 차이가 궁금해 알아보며 공부했던 내용을 정리해봅니다

 

file-loader

The file-loader resolves import/require() on a file into a url and emits the file into the output directory.

- 파일에 import/requrie 구문을 만들어주고, 파일을 output 폴더에 생성해주는 로더 → 파일 자체를 가져옴

 

url-loader

A loader for webpack which transforms files into base64 URIs.
->The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

- 파일을 base64 URL로 변환해주는 로더 → 번들링 된 js 코드에 파일이 코드로 내장됨

-  url-loader는 file-loader처럼 동작하지만, byte limit보다 작을 경우에만 DataURL을 리턴한다.

 

그러니까 url-loader에 limit을 설정해두면 limit 이하의 용량은 url-loader가 처리, 그 이상은 file-loader가 처리해준다는 것 !

그렇다면 url-loader 설정을 알아봅시다.

 

 

url-loader 설정

---

 {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          name: '[name].[ext]?[hash]',
          publicPath: './dist/',
          limit: 10000
        }
      }

 

url-loader 설정 옵션을 봅시다.

• limit에 url-loader로 처리할 파일의 최대 byte를 명시한다.
• url-loader에는 fallback이라는 옵션이 있어 여기에 fallback 모듈을 명시해주면 limit을 초과하는 파일들을 해당 모듈로 넘겨준다.
  → ★아무것도 명시해주지 않을 경우 기본으로 file-loader를 이용한다.
• publicPath는 file-loader로 넘어간 파일의 경로를 잡아주기 위해 넣어준다. 빌드시 publicPath로 지정한 경로에 파일이 생성된다.

 

limit 옵션을 아주 크게 잡아둔다면?

---

'dist 폴더에 복잡하게 이미지 파일이 늘어나는 게 마음에 안들어...
limit을 아예 크게 잡아버리고 다 URL로 처리하면 간단하지 않을까?'
라는 생각이 들 수도 있습니다...

이미지파일을 아예 번들파일에 포함시키면 파일요청 횟수가 줄어든다는 장점이 있지만, url-loader가 처리하는 파일은 js코드와 함께 번들링되기 때문에 그만큼 번들파일 크기가 커지게됩니다

번들파일이 너무 크면 실행 속도에 문제가 되므로 크기 제한을 적절히 두는 것이 중요하겠지요

 

이미지 파일이 안 보인다?

---

혹시나 url-loader로 limit을 설정해 이미지 파일을 넣었는데 용량을 초과한 이미지가 화면에서 보이지 않는다면?

 

file-loader에 의해 이미지 경로가 dist폴더로 변경되었으니 dist에 이미지 파일이 있는지 확인해보고 없다면 build해서 file-loader가 dist에 이미지 파일을 가져올 수 있도록 도와주세요 ^^!
(제가 처음 웹팩 설정 공부할 때 삽질했어요.. )

참고 : 웹팩공식사이트 문서