file-loader VS url-loader

이번 글에서는 webpack 로더의 종류인

file-loader 와 url-loader에 대해서 알아보도록 하겠습니다.

 

 

👨‍💻 얻어갈 수 있는 내용

1. file-loader 와 url-loader는 어디서, 어떻게 사용되는걸까?
2. file-loader 와 url-loader의 차이는 무엇이며, 둘 중에 뭐를 사용해야될까?

 

Webpack 로더

웹팩은 JavaScript 모듈 번들러로 시작했지만, 

시간이 지나면서 CSS, 이미지, 폰트 등과 같은 

다양한 타입의 리소스들을 처리할 필요성이 커졌는데요.

 

로더 (loaders) 라는 옵션을 사용하게되면

Webpack이 다른 포멧의 파일을 처리하고,

이를 애플리케이션에서

사용할 수 있는 모듈로 변환 할 수 있게됩니다.

// webpack.config.js

module.exports = {
  // 모듈
  module: {
    // 규칙
    rules: [
      // 로더 설정
      {
        test: /파일_포멧_정규식/,
        use: ['로더']
      },
      // 로더 추가 설정...
    ]
  }
}

 

로더의 종류 에는

file-loader 와 url-loader 가 있는데,

리소스를 다루는 방식에 있어서

서로 다른 접근 방식을 가지고 있습니다.

 

 

file-loader

이름 그대로 파일을 로딩해주는 녀석 입니다.

file-loader 는 파일을 output 디렉토리로 복사하고,

파일의 경로를 반환해줍니다.

 

이를 통해 Webpack이 파일을 모듈로 처리할 수 있게 해주고

주로 이미지, 폰트 등과 같은 대용량 리소스를 다룰 때 사용됩니다.

 

파일을 그대로 output 디렉토리에 복사하고,

최종 번들에는 해당 파일의 최종 URL 경로가 포함되는데요.

 

NPM 명령을 사용해 모듈을 번들링 하면

JS 파일 뿐만 아니라, 이미지 파일까지 모두 번들링 되며

번들링 된 결과물은 배포 디렉토리 (dist) 안에 생성됩니다.

npm run bundle

 

dist 폴더 안에 결과물 생성

 

 

 

본격적으로 file-loader 설정 코드를 보도록 하겠습니다.

const path = require('path');

module.exports = {
  // Entry point 설정
  entry: './src/index.js',
  // Output 설정
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\\.(png|svg|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images', // 이미지가 복사될 서브디렉토리
              name: '[name].[ext]'  // 파일 이름 형식
            }
          }
        ]
      }
    ]
  }
};

 

옵션설명 📝

• test: 이미지 파일을 식별하기 위한 정규식입니다.
• 여기서는 png, jpeg, jpg, gif, svg 형식의 이미지 파일을 대상으로 하는거죠.
• loader: 사용할 로더를 지정합니다. 위 경우에는 file-loader 가 사용됩니다.
• options: 로더에 전달할 추가 옵션을 지정합니다.
• name : name 속성을 사용하여 출력 파일의 이름 형식을 지정할 수 있습니다.
• [contenthash] 는 파일의 내용을 기반으로 생성된 고유 해시 코드.
• [ext] 는 파일 확장자.
• [name] 은 원본 파일 이름.

 

이 웹팩 설정 코드는,

확장자가 png, jpeg, jpg, gif, svg  인 파일을 발견하면 file-loader를 적용하라는 의미인데요.

 

이미지 파일은 dist/images 폴더로 복사됩니다.

이 경로는 outputPath 옵션을 통해 지정되고,

output.path 설정에 따라서 상대적이게 됩니다.

 

• 근데 왜 굳이 해시코드로 파일 이름을 생성할까요?

웹 브라우저는 해시 코드가 포함된 파일 이름을 보고

해당 파일이 변경되었는지 아닌지를 판단하는데요.

만약 해시 코드가 이전과 다르면,

브라우저는 새로운 파일을 다운로드하고 캐싱합니다.

 

이렇게 해서 불필요한 네트워크 요청을 줄이고 성능을 향상시킬 수 있습니다.

 

Public 경로 설정

파일을 사용할 때, ‘파일명.확장자'를 'dist/파일명.확장자’ 로 변경하여 사용할 때도 있는데요.

file-loader가 하는 역할 중 하나입니다.

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

 

 

번들링 된 결과로 처리된 앱을 웹 브라우저에서 확인하면

동적으로 생성된 이미지 모듈 코드가 다음과 같이 나오는걸 볼 수 있습니다.

<img 
  src="<http://localhost:8080/project/01/dist/632b3c3b709912325de272d52ec0b0aa.png>" 
  alt="사과를 들고 있는 사람" />

 

이미지 요소의 src 속성을 보면 웹 주소(URI)를 확인할 수 있는데,

위와 같이 전체 도메인 경로가 사용된 걸 볼 수 있습니다.

 

이제 Webpack 구성 파일에 publicPath 설정을 추가해서

공용 디렉토리 (모든 리소스의 기본 위치) 를 설정해보겠습니다.

// webpack.config.js

module.exports = {
  output: {
    // ...
    publicPath: 'dist/'
  }
}

 

이렇게 설정한 후에 다시 모듈을 번들링 하게되면,

이미지 경로가 공용 디렉토리에 상대적인 위치로 설정된 것을 확인할 수 있습니다.

<img 
  src="dist/632b3c3b709912325de272d52ec0b0aa.png" 
  alt="사과를 들고 있는 사람" />

 

url-loader

이번엔 url-loader에 대해서 알아볼건데요.

 

url-loader 가 탄생한 배경과 이유로는,

첫번째로 성능 최적화

웹 애플리케이션에서 여러 작은 이미지나 폰트 파일을 로드할 때,

각각의 HTTP 요청이 성능에 부정적인 영향을 미칠 수 있는데요.

url-loader는 이러한 정적 리소스들을

CSS나 JavaScript 파일 내에 인라인으로 포함시켜,

요청의 수를 줄이고 로딩 시간을 단축시키는 방법을 제공해서 최적화에 기여합니다.

두번째로 데이터 URI 스키마 사용

url-loader는 파일을 Base64 인코딩된 문자열로 변환하여,

데이터 URI 스키마를 사용해 번들 내부에 직접 포함시킵니다.

바이너리 파일을 처리하는 데 사용되며,

이 방식은 작은 크기의 이미지나 폰트 파일에 효과적이고,

외부 파일 요청을 줄여서 최적화에 기여합니다.

세번째로 조건부 처리

파일의 크기에 따라 url-loader는 데이터 URI와 별도의 파일 사이에서 선택적으로 처리할 수 있습니다.

이를 통해 개발자는 성능과 요구 사항에 맞춰 최적의 로딩 방식을 선택할 수 있는거죠.

 

url-loader 는 Webpack에서 사용되는 또 다른 로더들 중 하나로,

주로 이미지 파일이나 폰트 파일과 같은

바이너리 파일을 처리하는 데 사용됩니다.

 

파일의 크기가 설정된 제한값 미만일 경우에,

파일을 Base64 형식의 문자열로 변환하여 번들에 직접 포함시킵니다.

 

제한값을 초과할 경우 file-loader처럼 작동하게 되는거구요.

 

url-loader의 주된 목적은

파일을 데이터 URL로 변환하여

번들에 직접 포함시키는 것으로

HTTP 요청의 수를 줄여서 성능을 향상시키는 데 기여하는 것 입니다.

 

동작 원리

 

url-loader 는

지정된 파일을 인코딩하여 Base64 문자열로 변환시켜 줍니다.

이 문자열은 최종적으로 웹 애플리케이션의 JavaScript 번들 안에 포함되는데요.

브라우저에서 이러한 데이터 URL을 만나면,

추가적인 HTTP 요청 없이 해당 리소스를 직접 로드할 수 있게 됩니다.

 

데이터 URL을 통해 리소스가 직접 인코딩되어

JavaScript 파일 내에 포함되므로,

웹 페이지 로드 시에 추가적인 네트워크 요청이 필요 없어지는거죠.

 

하지만,

이 방법은 파일 크기가 커질수록 번들의 크기가 커지는 단점이 있습니다.

따라서 작은 이미지나 글꼴 파일에 주로 사용되며,

큰 파일의 경우 다른 방법을 사용하는 것이 좋습니다.

 

예를 들어, 위에서 봤던 file-loader 를 사용하여

리소스를 별도의 파일로 분리하고

URL을 통해 참조하는 방식이 그 예 입니다.

url-loader 기본 설정

url-loader 를 사용하기 위해서는 먼저 npm을 통해 패키지를 설치해야 합니다.

npm install url-loader --save-dev

 

 

그 후, Webpack 구성 파일(webpack.config.js)에 url-loader 를 설정 해줍니다.

가장 기본적인 설정은 다음과 같습니다

module.exports = {
  module: {
    rules: [
      {
        test: /\\.(png|jpe?g|gif|svg)$/,
        use: {
          loader: 'url-loader',
        },
      },
    ],
  },
};

이 기본 설정은 png, jpeg, jpg, gif, svg 형식의 이미지 파일을

데이터 URL로 변환하여 처리하게 합니다.

옵션

url-loader 는 다양한 옵션을 제공하는데요.

가장 중요한 옵션 중 하나는 limit 입니다.

 

이 옵션은 파일 크기의 임계값 (바이트 단위) 을 지정하고,

파일 크기가 이 임계값 미만인 경우 데이터 URL로 변환되고,

그 이상인 경우 별도의 파일로 분리됩니다.

 

별도의 파일로 분리될 때는 file-loader가 사용되는거죠.

{
  test: /\\.(png|jpe?g|gif|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 8192, // 8KB
    },
  },
}

 

여기서는 8KB 미만의 이미지 파일이 데이터 URL로 변환되어 번들에 포함됩니다.

 

8KB 이상인 경우,

file-loader 가 적용되어 별도의 파일로 추출되는거구요.

 

url-loader 의 다른 옵션으로는

mimetype (변환할 파일의 MIME 타입을 명시적으로 지정),

name (추출된 파일의 이름 패턴을 지정),

fallback (임계값보다 큰 파일을 처리하기 위해 사용할 대체 로더를 지정) 등이 있습니다.

 

url-loader 를 사용하면

웹 애플리케이션의 성능을 향상시키는 동시에,

번들 크기를 최적화하는 데 도움이 될 수 있습니다.

 

하지만 데이터 URL로 변환된 큰 파일은 번들 크기를 증가시킬 수 있으므로

적절한 limit 값을 설정하는 것이 중요합니다.

 

인라인으로 변환되는 파일의 크기는 신중하게 선택해야 하고,

너무 많은 데이터가 인라인으로 포함되면 번들의 크기가 커져

오히려 성능 저하를 유발할 수 있습니다.