[Webpack] Webpack 로더(Loaders)

로더(Loaders)

• webpack은 기본적으로 Javascript와 JSON 파일만 이해합니다.(= 모듈화 할 수 있습니다.)
• css, 이미지 파일, 폰트 등의 다른 유형의 파일들을 번들하기 위해서는 로더(Loader)의 도움을 받아 처리해야 합니다.
  • 즉, 로더는 Javascript와 JSON을 제외한 다른 유형의 파일들의 처리하여 모듈화 가능하게 해 줍니다.
• 커스텀 로더를 만들면 로더의 동작 원리를 이해하는데 도움이 됩니다.
  • 커스텀 로더를 만드는 예제는 김정환님 블로그에 잘 나와있습니다.

로더 설정 방법

• 로더는 webpack.config.js 파일에 modules 객체의 rules 속성에 배열로 등록합니다.
• 예제 코드

// webpack.config.js
const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/app.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve('./dist'),
  },
    // loader 적용 부분
    // style-loader와 css-loader 적용한 예제
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
        ]
      },
    ]
  }
}

css와 관련된 로더

1. css-loader
   • ❗️css-loader를 사용하기 위해서는 webpack@5(=버전 5)가 필요합니다.
   • css-loader를 사용하면 아래와 같이 js 파일에서 css를 import 할 수 있습니다.
   • css-loader를 통해 css 코드가 번들 파일에 포함이 됩니다.

// example.js
import style.css

2. style-loader
   • css를 DOM에 삽입하는 역할을 합니다.
   • css-loader와 함께 사용된다면 css-loader가 적용된 후 style-loader가 적용돼야 합니다.

// webpack.config.js
const path = require('path');

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        // use의 배열에 있는 로더는 뒤에서 부터 적용됩니다.
        // 즉, 아래 예시 코드는 css-loader -> style-loader 순으로 적용됩니다.
        use: [
          "style-loader",
          "css-loader",
        ]
      },
    ]
  }
}

파일과 관련된 로더

1. file-loader
2. url-loader

---

참고 자료

• webpack - Loaders
• 김정환 블로그 - 프론트엔드 개발환경의 이해: 웹팩(기본)

읽어 주셔서 감사합니다 :)
잘못된 부분이 있다면 댓글로 편히 알려주세요