0부터 웹 패키지 플러그인 만들기

웹 패키지는 전방 공학화 응용에서 매우 중요한 위치를 차지한다. 웹 패키지라고 하면 한 무더기의 플러그인을 생각하지만 대부분의 개발 엔지니어들은 플러그인의 사용만 알고 플러그인의 실현 원리를 연구하지 않는다. 이것은 공정의 맞춤형화에 매우 중요한 의미를 가진다.본고는 주로 웹 apck 플러그인을 어떻게 실현하는지 연구하는데 물론 기능은 상대적으로 간단하다.관심 있는 사람은 웹 패키지 플러그인의 원본 코드를 읽을 수 있습니다. 물론 큰 소가 보면 댓글이 부족합니다.
웹 패키지 플러그인은 로더가 해결할 수 없는 문제를 해결하는 데 사용됩니다.
웹팩의 사용에서 볼 수 있듯이 웹팩 플러그인은 하나의 구조 함수로 하나의 매개 변수 설정 대상을 수신하기 때문에 우리는 먼저 정의할 수 있다.

function myWebpackPlugin(config){
  ...
}

웹 패키지 플러그인을 인쇄하면 발견할 수 있습니다
다음은 오래된 버전의 실현입니다. 새로운 버전은 hooks를 사용하세요.
웹 패키지 플러그인은 주로 두 개의 대상인compiler와compilation을 사용합니다.
설명:
compiler::웹 패키지 환경 설정이 포함되어 있으며 웹 패키지가 플러그인을 호출할 때,compiler 대상을 되돌려 플러그인에 제공합니다.
4

Compiler 대상은 Webpack 환경의 모든 설정 정보를 포함하고 options,loaders,plugins 이런 정보를 포함한다. 이 대상은 Webpack이 시작될 때 실례화되었다. 이것은 전역에서 유일한 것으로 간단하게 Webpack의 실례로 이해할 수 있다

compilation: 컴파일 과정의 생명 주기입니다. 이 대상은 모든 모듈과 그들의 의존에 접근할 수 있습니다.(compilation [.kɒmpə'leɪʃ(ə)n]n 컴파일하기;편집;어셈블리)
4

Compilation 객체에는 현재 모듈 리소스, 컴파일 생성 리소스, 변경된 파일 등이 포함됩니다.Webpack이 개발 모드로 실행될 때 파일 변화가 감지될 때마다 새 Compilation이 생성됩니다.Compilation 대상도 플러그인 확장을 위한 이벤트 리셋을 많이 제공합니다.Compilation을 통해서도 Compiler 객체를 읽을 수 있습니다

 
웹 패키지 플러그인 원형에 apply 방법이 있습니다.compiler 대상을 받아들여 웹 apck에서 방송된 이벤트를 감청합니다.

myWebpackPlugin.prototype.apply = function(compiler){
  ...
}

상기 세 가지 기본 핵심점에서 웹 패키지 플러그인 불러오는 절차를 정리합니다
웹팩이 시작된 후:
먼저 new webpackPlugin(options)을 실행하고 실례 webpackPlugin을 획득한다.
그런 다음 WebpackPlugin을 호출합니다.apply(compiler)가 플러그인에 실례적으로compiler 대상을 전송하기;
마지막으로compiler를 통과합니다.plugin (이벤트 이름, 리셋 함수) 은 웹 패키지에서 방송된 이벤트를 감시합니다.
웹apck 플러그인 기본 구조:

function compilerTest (options) {
}
compilerTest.prototype.apply = function (compiler) {
    compiler.plugin('compilation', function (compilation) {
              compilation.plugin("optimize", function() {
                      console.log("       ");
                });
     })
}
module.exports = compilerTest

다음은 이벤트 흐름을 살펴보겠습니다.
냉각 라인 모델:

Webpack        ，                        。
                     ，             ，                     。
                   ，                 。

compiler 방송 및 감청 사건의 실현

/**
*      
* event-name      ，            
* params       
*/
compiler.apply('event-name',params);

/**
*       event-name    ，  event-name      ，       。
*        params              。
*/
compiler.plugin('event-name',function(params) {
  
});

Compilation의 실현은compiler와 같다
웹acpk 플러그인 실례: (지속적인 업데이트)
 
 
 
참조:
https://www.jianshu.com/p/f96c6a69515d
https://segmentfault.com/a/1190000012840742