로더는 웹팩이 웹 애플리케이션을 빌드할 때 JavaScript파일이 아닌 다른 유형의 파일을 처리하는데 사용되는 도구로, 파일을 변환하고 웹팩이 이해할 수 있는 모듈로 변환한다.

아래는 간단한 CSS, 이미지, 파일을 처리하기 위한 로더 사용법에 대한 예제이다.

CSS 로더

CSS파일을 JavaSript모듈로 변환하기 위해서는 style-loader와 css-loader를 설치하고 설정해야 한다.

1. 로더 설치

npm install style-loader css-loader --save-dev

2. 웹팩 설정에 로더 추가

webpack.config.js

module.exports = {
  	...
    module: {
        rules: [
            {
                test: /\.css&/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

이 설정은 .css확장자를 가진 파일을 로드할 때 style-loader를 사용하여 스타일을 script태그로 삽입하고, css-loader를 사용하여 CSS파일을 JavaScript모듈로 변환한다.

이미지 로더

이미지를 처리하기 위해서는 file-loader나 url-loader를 사용할 수 있다.

• url-loader
  작은 이미지 파일을 Data URL로 변환하여 번들에 포함시킨다.
• file-loader
  이미지 파일을 별도의 파일로 추출한다.

1. 로더 설치

npm install file-loader --save-dev

2. 웹팩 설정에 로더 추가

webpack.config.js

module.exports = {
  	...
    module: {
        rules: [
          	...
            {
                test: /\.(png|jpg|gif)$/,
                use: ['file-loader'],
            },
        ]
    }
}

---

로더는 다양한 유형의 파일을 처리하는데 사용되며, 각 로더의 설정은 프로젝트의 요구사항에따라 조절될 수 있다.
추가적으로 각 로더의 옵션을 설정할 수 있다. 예를 들어 Babel을사용하여 JavaScript파일을 트랜스파일할 때도 Babel 로더를 추가로 설정할 수 있다.

💡 트랜스파일(transpile)
하나의 프로그래밍 언어로 작성된 소스 코드를 동일한 프로그래밍 언어로 다시 작성하는 것을 의미한다.

주로 서로 다른 버전의 언어나 언어 구문을 지원하지 않는 환경에서 호환성을 유지하거나, 최신 문법을 사용할 수 있도록 변환하는 것을 목적으로 한다.

💡 Babel
JavaScript에서는 주로 ECMAScript의 버전이나 다양한 브라우저 간의 호환성 문제로 인해 트랜스파일이 사용된다.

트랜스파일을 수행하는 도구 중 하나가 Babel이며, Babel은 최신 자바스크립트 문법을 지원하지 않는 환경에서도 안정적으로 동작하도록 도와준다.