Loaders

로더는 모듈의 소스 코드에 변경 사항을 적용합니다. 파일을 import 하거나 “로드”할 때 전처리를 할 수 있습니다. 따라서 로더는 다른 빌드 도구의 “태스크”와 유사하며 프런트엔드 빌드 단계를 처리하는 강력한 방법을 제공합니다. 로더는 파일을 TypeScript와 같은 다른 언어에서 JavaScript로 변환하거나 인라인 이미지를 데이터 URL로 로드 할 수 있습니다. 로더를 사용하면 JavaScript 모듈에서 직접 CSS 파일을 import 하는 작업도 수행 할 수 있습니다!

Example

예를 들어 loader를 사용해 Sass를 CSS로 컴파일하거나 TypeScript를 JavaScript로 변환할 수 있습니다. 먼저 필요한 loader를 설치합니다.

npm install --save-dev sass-loader ts-loader

그런 다음 webpack이 모든 .scss 파일에 sass-loader를, 모든 .ts 파일에 ts-loader를 사용하도록 설정합니다.

webpack.config.js

export default {
  module: {
    rules: [
      { test: /\.scss$/, use: "sass-loader", type: "css/auto" },
      { test: /\.ts$/, use: "ts-loader" },
    ],
  },
};

Using Loaders

애플리케이션에서 로더를 사용하는 두 가지 방법이 있습니다.

설정 (추천): webpack.config.js 파일에 지정합니다.
인라인: 각 import 문에서 명확하게 지정합니다.

로더는 webpack v4의 CLI에서 사용할 수 있지만, 이 기능은 webpack v5에서 더 이상 사용되지 않습니다.

Configuration

module.rules를 사용하면 webpack 설정 내에 여러 개의 로더를 지정할 수 있습니다. 이것은 로더를 표시하는 간결한 방법이며, 클린 코드를 유지하는 데 도움이 됩니다. 또한 각각의 로더에 대한 전체 개요를 제공합니다.

Loader는 오른쪽에서 왼쪽(또는 아래에서 위)으로 평가 및 실행됩니다. 아래 예제에서는 sass-loader로 시작하여 postcss-loader로 끝납니다. 자세한 실행 순서는 "Loader Features"를 참고하세요.

export default {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          { loader: "postcss-loader" },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
        type: "css/auto",
      },
    ],
  },
};

Inline

import 문이나 그와 동등한 "importing" 메소드에서 로더를 지정할 수 있습니다. 접두사 !로 리소스에서 로더를 분리하세요. 각 부분은 현재 디렉터리를 기준으로 해석됩니다.

import * as styles from "postcss-loader!sass-loader!./styles.scss";

configuration에서 인라인 import 문 앞에 접두사를 붙여 모든 로더, 프리 로더 및 포스트 로더를 재정의할 수 있습니다.

접두사 !는 구성된 모든 일반 로더를 비활성화합니다.
```
import * as styles from "!postcss-loader!sass-loader!./styles.scss";
```
접두사 !!는 구성된 모든 로더(프리 로더, 로더, 포스트 로더)를 비활성화합니다.
```
import * as styles from "!!postcss-loader!sass-loader!./styles.scss";
```
접두사 -!는 포스트 로더를 제외한 구성된 모든 프리 로더와 로더를 비활성화합니다.
```
import * as styles from "-!postcss-loader!sass-loader!./styles.scss";
```

옵션은 쿼리 파라미터(예: ?key=value&foo=bar) 또는 JSON 객체(예: ? { "key": "value", "foo": "bar"})로 전달할 수 있습니다.

Loader Features

로더는 연결할 수 있습니다. 체인의 각 로더는 처리된 리소스에 변환을 적용합니다. 체인은 역순으로 실행됩니다. 첫 번째 로더는 결과(변환이 적용된 리소스)를 다음 로더로 전달하며, 이후 로더들도 마찬가지입니다. 마지막으로 webpack은 체인의 마지막 로더가 모듈의 type에 맞는 콘텐츠를 반환할 것을 기대합니다. javascript/* 모듈에는 JavaScript, css/*에는 CSS, json에는 JSON, asset/*에는 raw 콘텐츠가 해당됩니다.
로더는 동기식 또는 비동기식일 수 있습니다.
로더는 Node.js에서 실행되며 Node.js에서 가능한 모든 작업을 수행할 수 있습니다.
로더는 options 객체로 구성할 수 있습니다. (query 파라미터를 사용하여 옵션을 설정하는 방법은 여전히 지원되지만 더 이상 사용되지 않습니다)
일반 모듈은 loader 필드가 있는 package.json을 통해 일반 main 외에도 로더를 내보낼 수 있습니다.
플러그인은 로더에 더 많은 기능을 제공할 수 있습니다.
로더는 추가로 임의의 파일을 생성할 수 있습니다.

로더는 전처리 기능을 통해 결과물을 커스터마이즈 할 수 있도록 합니다. 이제 사용자는 압축, 패키징, 언어 번역 뿐만 아니라 더 많은 세밀한 로직을 유연하게 추가할 수 있습니다.

Resolving Loaders

로더는 표준 모듈 해석을 따릅니다. 대부분의 경우 모듈 경로에서 로드됩니다 (npm install,node_modules 를 생각해보세요).

로더 모듈은 함수를 내보내고 Node.js와 호환되는 JavaScript로 작성해야 합니다. 로더 모듈은 일반적으로 npm으로 관리하지만, 커스텀 로더를 애플리케이션 내에 파일로 포함할 수도 있습니다. 컨벤션에 따르면 로더는 일반적으로 xxx-loader(예 :json-loader)로 명명합니다. 더 자세한 내용은 "로더 작성하기"를 참고하세요.

Edit this page·

« Previous

Output

Plugins

15 Contributors

Translators

keipark