Webpack - 웹팩 Loaders (4)

지난 포스트에 이어서 웹팩의 구성 요소인 Loaders에 대해서 알아보도록 하겠습니다.

Loaders

로더는 모듈의 소스 코드에 적용되는 변환입니다. 파일을 가져오거나, load 할 때 파일을 사전 처리할 수 있습니다. 따라서 로더는 다른 빌드 도구의 tasks (ex: gulp task) 와 비슷하며 프론트엔드 빌드 단계를 처리하는 강력한 방법을 제공합니다.

로더는 파일을 다른 언어 (예: Typescript)에서 Javascript로 변환하거나, 인라인 이미지를 데이터 URL로 로드할 수 있습니다. 로더를 사용하면 Javascript 모듈에서 직접 CSS 파일을 가져 오는 것과 같은 작업을 수행할 수 있습니다.

예제

예를들어, 로더를 사용하여 웹팩에 CSS 파일을 로드하거나, TypeScript를 Javascript로 변환하도록 지시할 수 있습니다. 이를 위해 필요한 로더를 설치하여 시작합니다.

$ npm install --save-dev css-loader 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' }
    ]
  }
};

Loader 사용

애플리케이션에서 로더를 사용하는 세 가지 방법이 있습니다. 구성 (권장): webpack.config.js 파일에서 지정합니다. 인라인: 각 import 문에서 명시적으로 지정합니다. CLI: 쉡 명령 내에서 지정합니다.

구성

module.rules를 사용하면 웹팩 구성 내에서 여러 로더를 지정할 수 있습니다. 이것은 로더를 표시하는 간결한 방법이며, 깨끗한 코드를 유지하는데 도움이 됩니다. 또한, 각 로더에 대한 개요를 제공합니다.

로더는 오른쪽에서 왼쪽으로 (또는 아래에서 위로) 평가 / 실행됩니다. 아래 예제에서 실행은 sass-loacer로 시작하고 css-loader로 계속되며, 마지막으로 style-loader로 끝납니다. 로더 순서에 대한 자세한 내용은 “Loader Features” 를 참조하세요.

// webpack.config.js

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

Inline

import 문 또는 이와 동등한 ‘importing’ 메서드에서 로더를 지정할 수 있습니다. !. 이용해 자원에서 로더를 분리하십시오. 각 부분은 현재 디렉터리를 기준으로 확인됩니다.

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

인라인 import 문을 접두사로 지정하여 구성에서 로더, 프리 로더 및 포스트 로더를 재 정의 할 수 있습니다.

접두사 ! :구성된 모든 일반 로더를 비활성 합니다.

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

접두사 !! : 구성된 모든 로더 (프리 로더, 포스트 로더)를 비활성화 합니다.

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

접두사 -! : 구성된 모든 프리 로더 및 로더를 비활성화 하지만 포스트 로더는 비활성화 하지 않습니다.

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 pug-loader --module-bind 'css=style-loader!css-loader'

.jade 파일에는 pug-loader를 사용하고, .css 파일에는 style-lader와 css-loader를 사용합니다.

로더 기능

로더를 연결할 수 있습니다. 체인의 각 로더가 적용됩니다. 처리된 자원으로 변환, 체인은 역순으로 실행됩니다.

• 첫 번째 로더는 결과 (변환이 적용된 리소스)를 다음 로더로 전달합니다.
• 마지막으로 웹팩은 체인의 마지막 로더가 Javascript를 변환 할 것으로 예상합니다. 로더는 동기식 또는 비동기식 일 수 있습니다. 로더는 Node.js에서 실행되며, 가능한 모든 작업을 수행할 수 있습니다. 로더는 옵션 객체로 구성할 수 있습니다.
• (쿼리 매개 변수를 사용하여 옵션을 설정하는 것은 계속 지원되지만 더 이상 사용되지 않습니다.) 일반 모듈로 로더 필드가 있는 package.json을 통해 일반 메인외에 로더를 내보낼 수 있습니다. 플러그인은 로더에게 더 많은 기능을 제공 할 수 있습니다. 로더는 추가 임의 파일을 내보낼 수 있습니다.

로더는 전처리 기능을 통해 출력을 사용자 정의하는 방법을 제공합니다. 이제 사용자는 압축, 패키징, 언어 번역 등과 같은 세분화된 논리를 포함할 수 있는 더 많은 유연성을 갖게 되었습니다.

Resolving Loaders

로더는 표준 모듈 Resolution을 따릅니다. 대부분의 경우 모듈 경로 (npm install, node_modules)에서 로드됩니다.

로더 모듈은 함수를 내보내고, Node.js 화환, Javascript 로 작성되어야 합니다. 이들은 가장 일반적인 npm으로 관리되지만, 사용자가 지정 로더를 응용 프로그램내에서 파일로 사용할 수도 있습니다. 일반적으로 로더는 일반적으로 xxx-loader (예: json-loader)로 명명합니다. 자세한 내용은 ‘Writing a Loader’ (로더 작성)을 참조하세요.