webpack 개념 4.로더 Loaders

로더 Loaders

로더는 모듈의 소스 코드에서 적용되는 변환이다. import나 로드를 통해 파일들을 전처리 할 수 있다. 그러므로 로더는 다른 빌드 툴들의 "tasks" 와 유사하며, 프론트엔드 빌드 과정을 처리하는 강력한 방법을 제공한다. 로더는 (TypeScript 같은) 다른 언어를 자바스크립트로 변경하거나 인라인 이미지를 data URL로 변경할 수 있다. 심지어 로더는 CSS파일을 자바스크립트 모듈에서 직접 import 할 수 있는 방법도 제공한다. 

예시

로더를 사용해서 CSS파일을 로드하거나 TypeScript를 자바스크립트로 변환할 수 있다. 필요한 로더 설치 :

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

확장자가 .css인 파일은 css-loader를, .ts인 파일은 ts-loader를 항상 사용하도록 설정

webpack.config.js

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

로더 사용

세가지 방법이 있다.

• Configuration(권장) : webpack.config.js 파일에 설정
• 인라인 : 각 import 문에 지정
• CLI

구성

module.rules 를 사용해 여러개의 로더 지정이 가능하다. 이것은 로더를 표시하는 간결한 방법이며, 코드를 깔끔하게 유지하는데 도움이 된다. 또한 각 로더에 대한 전체 개요를 제공한다.

로더는 오른쪽에서 왼쪽으로 평가, 실행된다. 아래의 예시에서 sass-loader 로 시작, css-loader를 거쳐 마지막으로 style-loader로 끝난다. Loader Features 에서 더 많은 정보를 얻을 수 있다.

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

인라인

import 구문으로 로더를 지정할 수 있다. (다른 importing 메소드도 가능). 로더와 리소스의 구분은 ! 를 이용한다. 각 부분은 상대 경로로 작성된다.

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

전체 항목 앞에 ! 를 붙이면 설정 파일에서 지정한 어떤 로더라도 덮어쓸 수 있다.

옵션을 추가하고 싶다면 쿼리 파라미터를 이용하면 된다.

 예) ?key=value&foo=bar, 또는 JSON 객체, 예) ?{"key":"value","foo":"bar"}.

가능하다면 module.rules 를 사용하라. 그러면 기존 소스 코드상의 보일러플레이트를 줄일 수 있고, 문제가 발생했을때 디버깅이나 문제가 발생한 로더를 빠르게 찾을 수 있다.

CLI

CLI를 통해서 사용

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

확장자가 .jade인 파일은 jade-loader를, 확장자가 .css인 파일은 style-loader 와 css-loader를 사용한다.

로더의 특정

• 체이닝 가능. 체인의 각 로더들은 처리된 리소스로 변환된다. 체인은 역순으로 실행. 첫번째 로더가 (변환 된) 결과를 다음으로 전달한다. 최종적으로 webpack은 체인의 마지막 로더에 의해 Javascript가 반환될 것으로 예상한다.
• 동기/비동기 모두 가능
• Node.js 에서 실행되며 가능한 모든 작업을 수행할 수 있다.
• options 객체를 통해 구성할 수 있다. (쿼리 파라미터는 여전히 지원되지만 더 이상 사용되지 않음)
• package.json 의 loader 필드를 이용하여 일반 모듈들은 추가적으로 일반 main으로 로더를 내보낼(export) 수 있다.
• 플러그인은 로더에 더 많은 기능을 제공한다.
• 로더는 부가적인 임의의 파일들을 생성할 수 있다.

로더는 전처리 함수들을 통해 자바스크립트 생태계에서 더 많은 가능성을 제공한다이제 사용자들은 압축, 패키징, 언어 번역 같은 세분화된 로직을 포함하는데 보다 높은 유연성을 가질 수 있다. 

로더 해법

로더는 표준 모듈 분석을 따른다. 대부분의 경우 module path를 통해 로드 된다. (npm install, node_modules를 생각해보라.)

로더 모듈은 함수를 내보내고, Node.js 기반의 자바스크립트로 작성된다. 보통 npm을 통해 관리되지만 커스텀 로더도 추가할 수 있다. 일반적으로 로더들은 xxx-loader (예. json-loader) 와 같은 이름을 가진다.

출처 : https://webpack.js.org/

개념

webpack 개념 0.Concepts

webpack 개념 1.엔트리 포인트 Entry Points

webpack 개념 2.아웃풋 Output

webpack 개념 3.모드 Mode

webpack 개념 4.로더 Loaders

webpack 개념 5.플러그인 Plugins

webpack 개념 6.설정 Configuration

가이드

webpack 강좌 1 : 설치

webpack 강좌 2. 시작하기

webpack 강좌 3. 에셋(자산) 관리 (Asset Management)

webpack 강좌 4. 결과물(Output) Management

webpack 강좌 5. 개발 Development

webpack 강좌 6. 핫 모듈 리플레이스먼트 Hot Module Replacement