📌 Loader(로더)란?

webpack은 기본적으로 Javascript, JSON 파일만 해석할 수 있다.

webpack이 로더를 사용하여 번들링 할 때에 다른 타입의 파일을 처리하거나 유효한 모듈로 변환하여 애플리케이션에서 사용할 수 있도록 도와준다.

Loader는 기본적으로 2가지 속성을 가진다.

  1. 변환이 필요한 파일을 식별하는 test 속성

  2. 변환을 수행하는데 사용되는 로더를 지칭하는 use 속성

🔨 Babel 로더 설치

JSX, ECMAScript 구문을 해석하는데 필요한 코어, 프리셋 패키지, Webpack 로더를 프로젝트에 설치합니다.

1
$npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react

Babel config(구성) 파일

1
2
3
4
5
6
7
// babel.config.js
export default {
  presets: [
    "@babel/preset-env",
    ["@babel/preset-react", { runtime: "automatic" }],
  ],
};

Babel 로더 설정

webpack에게 babel-loader를 사용할 수 있게한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// webpack/common.js
import { resolve } from "node:path";

const commonConfig = {
  // ...
  module: {
    rules: [
      {
        test: /\.jsx?$/i,
        use: "babel-loader",
        exclude: /node_modules/,
      },
    ],
  },
};

export default commonConfig;
  • JSX라는 확장자를 갖는 파일들을 webpack이 번들링 할 때, babel-loader가 JSX 파일을 컴파일 해줄 수 있다.
  • babel 뿐만아니라 ESbuil로더,CSS 모듈 로더 등 다양한 로더를 사용할 수 있다.