file-loader vs url-loader

웹팩에서 파일을 다루다가 file-loader와 url-loader의 차이점이 궁굼하여 정리하게 되었습니다.
처음에는 이상한..삽질을 하다가 아차 싶었습니다..!

file-loader

파일을 모듈로 사용할 수 있게 만들어주는 처리를 해줍니다. 즉 실제로 사용하는 파일을 output directory에 옮겨주는 역할을 합니다.

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.png$/,
        loader: "file-loader",
      },
    ],
  },
  ...
}

확장자가 png파일을 만나게 되면 file-loader를 적용하게 된다.
설정한 확장자에 해당하는 파일을 output설정에 해당하는 경로로 파일을 복사해준다. ex. publicPath: '/dist/',

이제 빌드를 하게되면 output directory에 08e5afbcb60f0ca764c1.png이라는 파일이 생성되게 됩니다.
즉, file-loader를 사용하면 사용하는 파일을 output directory로 옮겨서 사용하게 됩니다.

url-loader

파일을 base64 URL로 변환하는 처리를 합니다. 즉 파일을 옮기는 작업이아니라 변환해서 output directory에 저장하는 역할을 합니다.

모든 파일을 변환하는 것이 아니라 limit보다 작은 파일만을 변환하고 그 이상의 큰 파일은 file-loader를 통해서 처리를 하게됩니다.
웹팩을 사용하여 크기가 30,000byte인 png파일을 사용해 보는 예제로 확인해 보자.

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.png$/,
        loader: 'url-loader',
       },
    ],
  },
  ...
}

이렇게 설정을하고 "npm run build"를 했을 시에 output directory를 아무리 찾아봐도 png 관련 파일은 없습니다.
url-loader에서 설정한 확장자에 대한 파일을 base64 URL형식으로 저장을 했기 때문이다. limit 관련 설정하지 않았기 때문에 파일의 크기와 상관없이 모두 변환해서 저장하게 됩니다.

// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.png$/,
        loader: 'url-loader',
        options: {
          limit: 100,
        }
       },
    ],
  },
  ...
} 

limit를 100 byte로 설정을 하고 빌드를 합니다. 파일의 크기가 limit를 넘었기 때문에 file-loader를 사용하게 됩니다.
output directory를 확인하면 png 파일이 존재하게 됩니다.
즉, url-loader를 사용할 때 limit에 따라서 파일 사용이 달라지게 됩니다.

결론

이미지파일을 dist 파일이 복잡하지 않게 url로 다 변환하면 편하고, 요청하는 횟수도 줄어들겠지만 url-loader 를 처리하는 파일은 js코드와 함께 번들링 되기때문에 번들파일이 많이 커지게됩니다.
번들파일이 너무 크게되면 실행 속도에 차이가 생김으로 적절한 차이를 두는 것이 중요 !

• 여담으로,, 요즘은 webpack 보다 vite를 사용하여 실행속도를 엄청 빠르게 할 수 있다고 합니다..! 요부분은 project 하면서 써보고 정리해볼 생각입니다.