로더

<aside> 💡

JS가 아닌 파일(CSS, Assets, TS 등) ⇒ JS 모듈로 전환하는 도구

</aside>

1. 번들러는 JS 모듈만 경로 탐색할 수 있다.
2. 브라우저가 바로 해석할 수 없는 파일들을 JS로 변환해야한다.

⇒ 로더를 사용해 JS 모듈로 전환

주요 로더

• babel-loader : 최신 JS,TS,JSX를 구형 브라우저에서도 동작하는 JS로 변환
• css-loader, style-loader : css 파일을 전환하고 <style> 태그 삽입
• file-loader : 정적 파일을 전환

로더 설정

<aside> 💡

test: 적용할 확장자, use: 사용할 로더

</aside>

test - 적용할 확장자 지정

module.exports = {
  module: {
    rules: [
      {
        test: /\\.css$/, // .css 확장자에만 적용
        use: "css-loader", // css-loader 사용
      },
    ],
  },
};