11. 모듈 번들링과 로더 활용 - 3

이미지 및 폰트 등의 파일 처리

웹 개발에서는 이미지, 폰트와 같은 정적 파일들을 효과적으로 처리하는 것이 중요합니다. Webpack은 다양한 로더를 통해 이미지 및 폰트 파일들을 번들에 포함시킬 수 있습니다.

1. 이미지 로더

Webpack에서 이미지를 처리하기 위해서는 file-loader나 url-loader를 사용합니다. url-loader는 작은 이미지를 Data URL로 인라인화하여 번들 크기를 줄일 수 있습니다.

1.1 설치

npm install file-loader url-loader --save-dev

1.2 Webpack 구성

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 8KB 미만의 이미지는 Data URL로 인라인
              fallback: 'file-loader', // 8KB 이상의 이미지는 file-loader 사용
            },
          },
        ],
      },
    ],
  },
};

1.3 사용

// JavaScript 파일에서 이미지 불러오기
import imageUrl from './image.png';

const img = new Image();
img.src = imageUrl;
document.body.appendChild(img);

2. 폰트 로더

폰트 파일도 마찬가지로 file-loader를 사용하여 번들에 포함시킬 수 있습니다.

2.1 설치

npm install file-loader --save-dev

2.2 Webpack 구성

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: ['file-loader'],
      },
    ],
  },
};

2.3 사용

/* CSS 파일에서 폰트 불러오기 */
@font-face {
  font-family: 'CustomFont';
  src: url('./custom-font.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'CustomFont', sans-serif;
}

3. SVG 로더

SVG 파일은 이미지로서 처리될 수 있습니다. file-loader를 통해 번들에 포함시키거나, svg-url-loader를 사용하여 Data URL로 인라인화할 수 있습니다.

3.1 설치

npm install file-loader svg-url-loader --save-dev

3.2 Webpack 구성

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 8192, // 8KB 미만의 SVG는 Data URL로 인라인
              noquotes: true, // 따옴표를 제거하여 Data URL 생성
            },
          },
        ],
      },
    ],
  },
};

3.3 사용

// JavaScript 파일에서 SVG 불러오기
import svgUrl from './image.svg';

const img = new Image();
img.src = svgUrl;
document.body.appendChild(img);

 

Webpack을 이용하면 이미지, 폰트, SVG와 같은 다양한 정적 파일들을 프로젝트에 손쉽게 통합할 수 있습니다. 이를 통해 웹 애플리케이션의 성능을 최적화하고 개발 편의성을 높일 수 있습니다.