웹 팩 로더와 플러그인의 차이점
웹 팩의 로더와 플러그인의 차이점은 무엇입니까?
플러그인을 사용하여 일반적으로 웹 팩 번들에 관련된 기능을 추가합니다.
babel이 jsx/es2015 변환에 로더를 사용하는 것은 알고 있지만, 다른 일반적인 태스크(예를 들어 copy-webpack-plugin)는 플러그인을 사용하는 것 같습니다.
보완적이고 간단한 답변 추가.
로더:
로더는 번들이 생성되는 동안 또는 생성되기 전에 개별 파일 수준에서 작동합니다.
플러그인:
플러그인은 번들 또는 청크 수준에서 작동하며 일반적으로 번들 생성 프로세스의 마지막에 작동합니다.플러그인은 번들 자체가 생성되는 방법도 수정할 수 있습니다.플러그인은 로더보다 강력한 제어 기능을 가지고 있습니다.
예를 들어 로더가 작동하는 위치와 플러그인이 작동하는 위치를 아래 이미지에서 명확하게 볼 수 있습니다.
을 거의 합니다.require("my-loader!./my-awesome-module")당신의 코드로.플러그인에 비해, 플러그인은 매우 간단합니다(a) 웹 팩에 하나의 기능만 노출하고(b) 실제 빌드 프로세스에 영향을 줄 수 없기 때문입니다.
한편 플러그인은 웹 팩 내에서 후크를 등록하여 컴파일러에 액세스(및 변경)할 수 있으며 컴파일러의 동작 및 컴파일러를 컴파일할 수 있기 때문에 웹 팩에 깊이 통합할 수 있습니다.그러므로, 그것들은 더 강력하지만 유지하기가 더 어렵다.
기본적으로 웹 팩은 파일 번들러에 불과합니다.매우 단순한 시나리오(코드 분할 없음)를 고려할 때, 이는 (개략적으로) 다음과 같은 작업을 의미합니다.
- 엔트리 파일을 찾아 내용을 메모리에 로드하다
- 콘텐츠 내의 특정 텍스트와 일치하여 평가합니다(예를 들어 @import).
- 이전의 평가에 근거해 의존 관계를 찾아내고, 그것들에 대해서도 같은 일을 한다.
- 그것들을 모두 추억의 다발로 꿰매다.
- 파일 시스템에 결과를 기입하다
위의 단계를 자세히 살펴보면 Java 컴파일러(또는 컴파일러)가 수행하는 작업과 일치합니다.물론 차이는 있지만 로더와 플러그인을 이해하는 것은 중요하지 않습니다.
로더:
웹 팩이 모든 파일 형식을 함께 묶을 수 있기 때문입니다.
핵심에 있는 웹 팩은 js 파일을 번들하기에 충분하기 때문에, 이 약속은 웹 팩 코어 팀이 빌드 흐름을 통합해야 한다는 것을 의미하며, 이를 통해 외부 코드가 웹 팩이 소비할 수 있는 방식으로 특정 파일 형식을 변환할 수 있게 되었습니다.
이러한 외부 코드는 로더라고 불리며 일반적으로 위의 단계1과 3에서 실행됩니다.따라서 이러한 로더가 실행되어야 하는 단계는 명백하기 때문에 후크가 필요하지 않으며 빌드 프로세스에도 영향을 미치지 않습니다(빌드 또는 번들은 4단계에서만 발생하므로).
Loaders는 컴파일러의 컴파일을 위한 단계를 준비하고 웹팩 컴파일러의 유연성을 확장합니다.
플러그인:
웹 팩이 직접 가변 출력을 약속하지는 않지만 세상은 이를 원하고 웹 팩은 이를 허용하기 때문입니다.
웹 팩의 핵심은 번들러일 뿐이지만 이를 위해 몇 가지 단계와 하위 단계를 거치기 때문에 이러한 단계를 사용하여 추가 기능을 구축할 수 있습니다.
예를 들어, 웹 팩 컴파일러의 네이티브 기능인 프로덕션 빌드 프로세스(Minizing and Write to File System)는 코어 기능의 확장(번들링일 뿐)으로 취급할 수 있으며 네이티브 플러그인처럼 취급할 수 있습니다.그들이 제공하지 않았다면 다른 누군가가 했을 것이다.
위의 네이티브 플러그인을 보면 웹 팩 번들 또는 컴파일은 코어 번들 프로세스로 나눌 수 있을 뿐만 아니라 많은 네이티브 플러그인 프로세스를 끄거나 커스터마이즈하거나 확장할 수 있는 것처럼 보입니다.즉, 외부 코드를 선택할 수 있는 특정 포인트(후크라고 불린다)에서 번들링 프로세스에 참여시킬 수 있습니다.
따라서 플러그인은 출력에 영향을 미쳐 웹 팩 컴파일러의 기능을 확장합니다.
로더는 파일 수준에서 작동합니다.템플릿 작성, 편리한 대로 코드 처리 등을 할 수 있습니다.
플러그인은 시스템 수준에서 작동합니다.패턴, 파일 시스템 처리(이름, 경로) 등에서 작업할 수 있습니다.
언급URL : https://stackoverflow.com/questions/37452402/webpack-loaders-vs-plugins-whats-the-difference
'source' 카테고리의 다른 글
| 렌더링 전에 리액트 컴포넌트의 크기(높이/폭)를 확인하는 방법 (0) | 2023.02.14 |
|---|---|
| wordpress의 함수에 대한 인수 2가 누락되었습니다. (0) | 2023.02.14 |
| ORA-01810: 포맷 코드가 2회 표시됨 (0) | 2023.02.14 |
| org.json을 효율적으로 매핑하는 방법.JSONObject to POJO? (0) | 2023.02.14 |
| 다른 지시문 안에 각도 지시문 사용 (0) | 2023.02.14 |