카테고리 없음

Webpack Loaders

jimanfe 2022. 8. 1. 00:21

Loaders 란

Loader 는 모듈 코드마다 적용된다.
모듈 코드가 loader 를 거쳐 변환됨으로서, import 되거나 로드될 수 있도록 전처리된다.
loader는 다음과 같은 작업에 사용된다.

  • typescript 를 javascript 파일로 변환
  • 인라인 이미지를 data url 로 로드
    • data url 사용시 문서내에 이미지를 임베딩 할 수 있다.
    • 네트워크 요청대신 디코딩 처리를 사용한다. 작은 파일에 사용하는 것이 바람직.
  • js module 에서 css 파일을 import

예시

위에서 설명하였듯이 css 파일을 로드하거나 타입스크립트를 자바스크립트로 변환하기 위해 loader를 사용할 수 있다.
loader 는 주로 npm 에서 다운로드하여 사용한다. 

npm install --save-dev css-loader ts-loader

css-loader
React 와 같은 라이브러리를 사용할때, 자바스크립트에서 마크업 및 스타일링을 처리한다.
이때 import './app.css' 와 같이 css 를 바로 import 하는 것이 일반적이다.
js 파일에서 css 파일을 모듈로 처리가능하도록 하는 것이 css-loader이다.

ts-loader
webpack 에서 타입스크립트를 자바스크립트로 변환하기 위한 loader이다.

webpack.config.js

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

사용방법

Loader를 사용하는 방법은 두가지가 있다.

  • webpack.config.js 설정파일
  • import 문에 명시

webpack config 설정

module.rules 프로퍼티를 통해 여러 loaders를 명시할 수 있다.
loaders는 오른쪽에서 원쪽 순서대로 평가되고 실행된다.
아래 예시에서는 왼쪽에 있는 sass-loader부터 css-loader, style loader순으로 실행된다. 

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

import 문에 인라인으로 작성

소스코드 내 import문에서 loader를 명시하는 것도 가능하다.
import 문에서 리소스를 문자열로 명시할때, ! 로 사용할 loader를 명시 및 구분할 수 있다. 

import Styles from 'style-loader!css-loader?modules!./styles.css';

설정파일에 작성된 loader 들을 오버라이딩 할 수 있다.
prefix를 붙이는데, 용법에따라 적용되는 loader 가 다르다.
적용되는 loader 종류로는 preloader, loader, postloader 가 있다.

! 을 리소스문자열 앞에 붙이면 loader들을 비활성화한다.

import Styles from '!style-loader!css-loader?modules!./styles.css';

!! 를 리소스 문자열 앞에 붙이면 모든 loader 들을 비활성화한다. (preloader, loader, postloader)

import Styles from '!!style-loader!css-loader?modules!./styles.css';

-! 를 리소스 문자열 앞에 붙이면 postloader를 제외한 모든 loader를 비활성화 한다.(preloader,loader)

import Styles from '-!style-loader!css-loader?modules!./styles.css';

쿼리 파라미터를 넘겨주는 것도 가능하다

  • ?key=value&foo=bar
  • ?{"key":"value","foo":"bar"}

preLoaders 와 postLoaders 속성은 webpack 2버전에서 제거되었다.
enforce 속성으로 표기 가능하다.

loader 특징

  • loader는 체이닝이 가능하다. 즉 리소스에 대해 순차적으로 처리가 가능하다는 의미이다.
    명시된 loader들은 반대 순서대로 실행된다.
    첫번째 loader는 처리된 결과를 다음 loader 에게 전달한다. 마지막loader에서는 자바스크립트가 리턴되어야햔다.

  • loader는 동기나 비동기로 동작할 수 있다.

  • loader는 node js 환경에서 실행되며 환경에서 제공되는 모든 api를 사용할 수 있다.

  • loader는 options 객체를 통해 추가 설정가능하다.

  • 일반 모듈은 loader 필드가 포함된 package.json 을 통해 main 또는 loader 를 export 할 수 있다.

  • loaders 는 전처리함수를 통해 산출물을 커스터마이징할 수 있는 방법을 제공한다.
    사용자는 압축, 패키징, 번역등의 세밀한 로직을 포함시킬 수 있다.

resolving loaders

loader는 표준 module resolution을 따른다. module resolution 에 관한 내용은 여기서 확인 가능하며, webpack 은 파일을 해석하기 위해 enhanced-resolve 를 사용한다. loader를 평가할 때도 같은 방법을 사용한다는 뜻이다.

loader 모듈은 함수를 export 하고 js 가 호환되는 node js 로 작성되어야한다.
대부분 npm으로 관리된다. 하지만 커스텀 loader를 작성할 수 있다.
xxx-loader의 형식으로 작성하는 것이 컨벤션이다.