로더 (Loaders)

Webpack은 기본적으로 JavaScript와 JSON 파일만 이해할 수 있습니다. 하지만 실제 웹 프로젝트에서는 CSS, 이미지, TypeScript 등 다양한 파일 형식을 사용합니다. 로더(Loader)는 Webpack이 다른 유형의 파일을 처리할 수 있도록 변환해 주는 역할을 합니다.

주요 로더 종류

• CSS/Style 관련: css-loader, style-loader, sass-loader, postcss-loader
• 트랜스파일러: babel-loader, ts-loader
• 파일 애셋 리소스: file-loader, url-loader (참고: Webpack 5부터는 Asset Modules 기능으로 대체되는 추세입니다.)

로더 설정 방법

webpack.config.js의 module.rules 배열 안에 로더 규칙을 정의합니다.

module.exports = {
  // ... 생략 ...
  module: {
    rules: [
      {
        test: /\.css$/, // .css 확장자로 끝나는 모든 파일
        use: ['style-loader', 'css-loader'], // 오른쪽에서 왼쪽 순서로 적용
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ],
  },
};

로더는 배열의 마지막 항목부터 역순으로(오른쪽에서 왼쪽으로) 적용된다는 점에 주의해야 합니다.