Webpack은 모던 자바스크립트 애플리케이션의 모듈 번들링을 처리하기 위한 도구입니다. 이를 통해 여러 개의 파일을 하나의 번들 파일로 결합하여 웹 애플리케이션을 로딩할 수 있습니다.

하지만, 때때로 웹 애플리케이션에서 자바스크립트 파일 뿐만 아니라 다른 유형의 파일(예: 스타일시트, 이미지, 폰트 등)을 사용해야 할 때가 있습니다. 이러한 파일들을 웹팩에서 처리하기 위해서는 Loader를 사용해야 합니다.

Loader란?

Loader는 웹팩에서 파일을 해석하고 변환하는 역할을 수행하는 모듈입니다. 로더는 import나 require 문을 통해 웹팩의 설정 파일에서 지정하며, 파일의 확장자를 기준으로 사용됩니다. 각 Loader는 파일을 로드하기 전에 전처리 작업을 수행하거나 특정 파일 형식을 다른 형식으로 변환 등 다양한 작업을 수행할 수 있습니다.

Loader 사용법

Loader를 사용하기 위해서는 웹팩 설정 파일에 해당 Loader를 추가해야 합니다. 아래는 Loader를 사용하는 간단한 예시입니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader',
        ],
      },
    ],
  },
};

위의 예시에서는 CSS 파일을 로드하기 위해 ‘style-loader’와 ‘css-loader’를 사용하고, 이미지 파일을 로드하기 위해 ‘file-loader’를 사용하고 있습니다. 각 Loader의 역할은 다음과 같습니다.

• ‘style-loader’: 스타일시트를 동적으로 DOM에 추가합니다.
• ‘css-loader’: CSS 파일을 자바스크립트로 변환합니다.
• ‘file-loader’: 이미지 파일을 로드하고, 파일 경로를 변경하여 번들링 결과에 포함시킵니다.

Loader 확장

Loader는 추가 기능을 제공하기 위해 확장될 수 있습니다. 다양한 Loader들을 사용해 자신의 프로젝트에 적합한 형태로 웹팩을 설정할 수 있습니다. 웹팩 공식 문서나 각 Loader의 GitHub 페이지를 참고하여 더 자세한 사용법을 알아볼 수 있습니다.

마무리

Loader는 웹팩에서 파일을 해석하고 변환하는 중요한 역할을 수행하는 도구입니다. 다양한 Loader들을 사용하여 웹 애플리케이션에서 필요한 다양한 파일 형식을 쉽게 처리할 수 있습니다.