Loader

• 웹팩은 모든 파일을 모듈로 바라본다. (스타일시트, 이미지, 폰트 등)
• 때문에 import 구문을 사용하면 자바스크립트 코드 안으로 가져올 수 있다.
• 이것이 가능한 이유는 웹팩의 로더 덕분

Loader의 역할

로더는 타입스크립트 같은 다른 언어를 자바스크립트 문법으로 변환해 주거나 이미지를 data URL 형식의 문자열로 변환한다.
뿐만아니라 CSS파일을 자바스크립트에서 직접 로딩할 수 있도록 해준다.

• 로더는 각 파일을 처리하기 위한 용도

커스텀 로더 예제

• 처리해야할 파일의 패턴(test)을 명시 후 use에 설정된 로더를 실행

// my-webpack-loader.js
module.exports = function myWebpackLodaer(content) {
  
  return content.replace('console.log(', 'alert(');
}

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

module.exports = {
  module: { 
    rules: [
      {
        test: /\.js$/, // 로더가 처리해야될 파일의 패턴 (regexp)
        use: [
          path.resolve('./my-webpack-loader.js') // 실행될 로더의 위치
          ]
      }
    ]
  }
}

자주 사용하는 Lodaer

1. css-loader

웹팩은 모든 것을 모듈로 바라보기 때문에 자바스크립트 뿐만 아니라 스타일 시트도 import 구문으로 불러올 수 있다.

• ES6 import 구문으로 css파일을 가져오려면 css파일이 module이 되어야하는데 css-loader가 css파일을 module로 바꾸는 역할을 한다.
• 자바스크립트 코드안에 css코드만 있는 상태(DOM 적용 전)
  • css 코드를 모듈로 사용하고 번들링하려면 css-loader, style-loader 함께 사용

설치

$ npm i css-loader // css-loader 설치

webpack.config.js

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

2. style-loader

자바스크립트로 변경된 스타일을 동적으로 돔에 추가하는 로더

설치

$ npm i style-loader // style-loader 설치

webpack.config.js

module.exports = {
  module: { 
    rules: [
      {
        test: /\.css$/, 
        use: [
          // loader는 한 파일에 여러개 실행가능
          // 배열로 설정하면 뒤에서부터 앞으로 순서대로 로더가 동작 ex:) css-loader -> style-loader
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

3. file-loader

소스코드에서 사용하는 모든 파일(이미지 등)을 모듈로 사용하게끔 만듬

• 파일을 모듈 형태로 지원하고 웹팩 아웃풋 경로에 파일을 옮겨준다.
• ex:) css => url() 이미지 경로 지정 처리

설치

$ npm i file-loader // file-loader 설치

webpack.config.js

module.exports = {
  module: { 
    rules: [
      {
        test: /\.(jpg|png|gif|svg)$/,
        loader: 'file-loader',
        options: {
         // file-loader가 처리하는 파일을 모듈로 사용했을 때 경로 앞에 추가되는 문자열
          publicPath: './dist/',
         // file-loader가 파일 아웃풋에 복사할 때 사용하는 파일 이름 [원본파일명].[확장자]?[해쉬값(캐쉬 무력화)]
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  }
}

4. url-loader

Date URI Scheme 처리를 자동화해준다.

Date URI Scheme
이미지 파일을 Base64로 인코딩하여 자바스크립트 문자열 형태로 변환

• 작은 이미지파일들을 html에 주소 대신 변환값을 바로 넣어줌으로써 한번 더 네트워크 통신을 하지 않고 처리
• 처리할 파일의 크기제한을 두어 일정크기 미만만 처리하고 나머지는 file-loader로 위임

설치

$ npm i url-loader // url-loader 설치

webpack.config.js

module.exports = {
  module: { 
    rules: [
      {
        test: /\.(jpg|png|gif|svg)$/,
        loader: 'url-loader',
        options: {
         // loader가 처리하는 파일을 모듈로 사용했을 때 경로 앞에 추가되는 문자열
          publicPath: './dist/',
         // file-loader가 파일 아웃풋에 복사할 때 사용하는 파일 이름 [원본파일명].[확장자]?[해쉬값(캐쉬 무력화)]
          name: '[name].[ext]?[hash]',
         // 20kb, url-loader가 파일을 처리할때 20kb미만의 파일들은 url-loader로 base64로 변환 (그 이상은 file-loader로 진행)
          limit: 20000 
     	}
      }
    ]
  }
}