7. Webpack의 핵심 개념 - 2

Webpack Loader: 모듈 변환의 핵심

Webpack은 다양한 자원(JavaScript, CSS, 이미지 등)을 모듈로 보고, 각 모듈에 맞게 변환해주는 기능을 수행합니다. 이를 가능하게 하는 것이 Loader입니다. Loader는 웹 애플리케이션을 구성하는 자원들을 가져와서 웹팩이 이해하고 처리할 수 있는 형태로 변환하는 역할을 합니다.

1. Loader의 역할

Loader는 크게 두 가지 주요 역할을 수행합니다.

1.1 변환 (Transformation)

자원을 가져와서 원하는 형태로 변환하는 작업을 수행합니다. 예를 들어, Babel Loader는 ECMAScript 2015+ 코드를 이전 버전의 JavaScript 코드로 변환해주는 역할을 합니다.

1.2 적용 (Application)

변환된 자원을 실제 프로젝트에 적용하는 작업을 수행합니다. 예를 들어, Style Loader는 CSS 파일을 가져와 스타일을 웹 페이지에 적용하는 역할을 합니다.

2. Loader의 종류

Webpack은 다양한 Loader를 제공하며, 프로젝트에 맞게 필요한 Loader를 선택하여 사용할 수 있습니다. 몇 가지 대표적인 Loader에 대해 알아봅시다.

2.1 Babel Loader

JavaScript 코드를 트랜스파일링하는 데 사용됩니다. 주로 최신 ECMAScript 문법을 구형 브라우저에서도 동작하는 코드로 변환하는 데 활용됩니다.

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/, // .js 확장자를 가진 파일에 대하여
        exclude: /node_modules/, // node_modules 폴더 제외
        use: {
          loader: 'babel-loader', // Babel Loader 적용
        },
      },
    ],
  },
};

2.2 Style Loader와 CSS Loader

CSS 파일을 모듈로 변환하고, 웹 페이지에 스타일을 적용하는 데 사용됩니다.

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/, // .css 확장자를 가진 파일에 대하여
        use: ['style-loader', 'css-loader'], // Style Loader, CSS Loader 적용
      },
    ],
  },
};

2.3 File Loader

이미지, 폰트 등의 파일을 처리하여 번들에 포함시키거나 별도의 파일로 출력하는 데 사용됩니다.

// webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i, // 이미지 파일 확장자에 대하여
        use: {
          loader: 'file-loader', // File Loader 적용
        },
      },
    ],
  },
};

 

이처럼 Loader는 각각의 역할에 특화된 기능을 수행하며, 이들을 조합하여 프로젝트의 자원들을 효율적으로 처리할 수 있습니다.