웹팩의 4가지 주요 속성 - Loader

📌 Loader

로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성이다.

// webpack.config.js
module.exports = {
  module: {
    rules: []
  }
}

엔트리나 아웃풋 속성과는 다르게 module 라는 이름을 사용한다.

📌 CSS Loader 적용하기

npm i css-loader -D

// webpack.config.js
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader']
      }
    ]
  }
}

위의 module 쪽 코드를 보면 rules 배열에 객체 한 쌍을 추가하고 그 객체에는 2개의 속성이 들어가 있는데 각각 아래와 같은 역할을 한다.

• test : 로더를 적용할 파일 유형 (일반적으로 정규 표현식 사용)
• use : 해당 파일에 적용할 로더의 이름

📌 Loader 여러 개 적용하기

로더를 여러 개 사용하는 경우에는 아래와 같이  rules 배열에 로더 옵션을 추가해주면 된다.

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' },
      // ...
    ]
  }
}

 

 

👀 자주 사용되는 로더 종류

• Babel Loader
• Sass Loader
• File Loader
• Vue Loader
• TS Loader

📌 로더 적용 순서

특정 파일에 대해 여러 개의 로더를 사용하는 경우 로더가 적용되는 순서에 주의해야 한다. 로더는 기본적으로 오른쪽에서 왼쪽 순으로 적용된다.

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['css-loader', 'sass-loader']
    }
  ]
}

위 코드는 scss 파일에 대해 먼저 Sass 로더로 전처리(scss 파일을 css 파일로 변환)를 한 다음 웹팩에서 CSS 파일을 인식할 수 있게 CSS 로더를 적용한다.

만약 웹팩으로 빌드한 자원으로 실행했을 때 해당 CSS 파일이 웹 애플리케이션에 인라인 스타일 태그로 추가되는 것을 원한다면 아래와 같이 **style 로더**도 추가할 수 있다.

{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

배열로 입력하는 대신 아래와 같이 옵션을 포함한 형태로도 입력할 수 있다.

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        { loader: 'style-loader' },
        {
          loader: 'css-loader',
          options: { modules: true }
        },
        { loader: 'sass-loader' }
      ]
    }
  ]
}