로더

로더 (Loaders)

로더는 모듈의 소스 코드에 적용되는 변환기예요. 파일을 import하거나 "로드"할 때 전처리할 수 있게 해 주죠. 다른 빌드 도구의 "태스크"와 비슷하다고 볼 수 있고, 프런트엔드 빌드 단계를 다루는 강력한 방법이에요.

출처: Webpack — Loaders

로더는 TypeScript 같은 다른 언어의 파일을 자바스크립트로 변환하거나, 인라인 이미지를 데이터 URL로 로드하는 일을 할 수 있어요. 심지어 자바스크립트 모듈에서 직접 CSS 파일을 import하는 것도 가능해요.

예시

Sass를 CSS로 컴파일하거나 TypeScript를 자바스크립트로 변환하고 싶다면, 먼저 필요한 로더를 설치해요.

npm install --save-dev sass-loader ts-loader

그런 다음 .scss 파일에는 sass-loader를, .ts 파일에는 ts-loader를 쓰도록 webpack에 알려줘요.

// webpack.config.js
export default {
  module: {
    rules: [
      { test: /\.scss$/, use: "sass-loader", type: "css/auto" },
      { test: /\.ts$/, use: "ts-loader" },
    ],
  },
}

팁: 평범한 .css 파일은 로더가 전혀 필요 없어요. webpack에 CSS 자체를 파싱·추출·최소화하는 실험적 내장 CSS 지원(experiments.css)이 있기 때문이에요. 전처리기는 여전히 로더가 필요하고, type: 'css/auto'는 로더가 만든 결과물을 webpack의 CSS 파이프라인에 넘겨줘요.

로더 사용하는 두 가지 방법

로더는 설정 파일에서 사용하는 설정 방식(권장)과, 각 import 문에 직접 붙이는 인라인 방식이 있어요. CLI에서 로더를 쓰는 것은 webpack v4에서 가능했지만 v5부터는 deprecated 됐어요.

설정 방식이 훨씬 깔끔하고 유지보수하기 쉬우니, 특히 여러 파일에 걸쳐 로더를 적용해야 한다면 설정 파일에 규칙(rules)으로 정리하세요.

더 알아보기

• Entry Points
• Output
• Plugins