패키지 개념을 배우고 사용자 정의 패키지 플러그인을 만듭니다.

이 글에서 나는 Webpack의 핵심 개념을 소개할 것이다. 이것은 우리가 기본 메커니즘을 이해하고, 우리 자신의 사용자 정의 Webpack 플러그인을 구축하기 전에 더욱 분명하게 할 것이다.우리들은 세부 사항을 깊이 이해합시다.

우리는 왜 웹 패키지가 필요합니까?

강화된 브라우저 기능, 더 빠른 자바스크립트 엔진과 아이패드 등 모바일 기기의 급증으로 클라이언트가 더 많은 JS 코드를 작성하는 추세가 서버에서 클라이언트 개발로 뚜렷하게 바뀌었다.
이것은 클라이언트에 서로 의존하는 Js 코드, 모듈 및 의존 항목을 더 많이 생성할 것이다.
예를 들어 하나의 파일index.js을 고려하면 다른 두 파일file1.js과 file2.js을 가져왔고 file2.js는 file1.js에 의존했다.이 경우 브라우저는 어떤 파일을 먼저 불러와서 필요한 결과를 만드는지 어떻게 알 수 있습니까?

솔루션

웹 패키지!💫
다음 질문은 웹 패키지가 어떻게 이 문제를 해결해 줍니까?
Webpack은 모듈을 동시에 구축하고 로드할 수 있는 모듈 바인딩입니다.이것은 의존항을 모듈로 전환하고 정확한 시간에 정확한 범위 내에서 의존항과 모듈을 추출할 수 있도록 합니다.모든 의존항과 모듈을 파일에 불러옵니다. 이 파일은 다운로드됩니다.
이것은 웹 패키지가 무엇인지에 대한 기본적인 해석이지만, 웹 패키지가 실제로 이 모든 일을 어떻게 완성하는지 살펴보자.

웹 패키지는 엔진 뚜껑 위에서 어떻게 작동합니까?

이 절에서는 webpack.config.js 파일에서 클라이언트 응용 프로그램의 초기 설정을 설정하는 데 사용할 것을 토론할 것이다.

입구 - 의존 관계도의 입구점으로 사용되며 필요에 따라 모듈을 만듭니다.

위의 예에서 bootstrap.min.ts 는 프로그램을 불러오고 시작하는 첫 번째 파일입니다.Webpack은 이 파일을 사용하여 종속성 다이어그램을 구성합니다.

출력 - 패키지를 나누어 주는 절대 경로를 정의합니다.

Loaders - 자바스크립트가 모듈에서 비자바스크립트 모듈을 사용한 후 이 모듈을 해석하는 방법을 알려줍니다.그것은 자원 파일을 가져와 수정된 상태를 되돌려줍니다.

modules: {
    rules: {
        {
            test: /\.ts$\,
            use: 'ts-loader'
        }
    }
}

예를 들어 css, babel 등 더 많은 불러오는 프로그램이 있습니다. js를 제외한 모든 파일은 이 함수를 통해javascript 모듈로 변환됩니다.이 모듈을 배제, 포함, 강제 등 속성으로 선별할 수 있습니다.
또 다른 방법은 마운트기를 연결할 수 있다. 이렇게 하면 한 동작을 수행하는 마운트기가 한 번 변환되고, 그것들을 함께 연결할 수 있다.

rules: [{
    test: /\.less$\, 
    use: ['css-loader', 'style-loader', 'less-loader']
}]

플러그인 - 플러그인은 ES5 클래스로 하나의 응용 함수를 실현하고 전체 컴파일 생명주기에 연결할 수 있습니다.컴파일러는 그것을 사용하여 이벤트를 보냅니다.이것은 새 실례를 config 대상의 플러그인 키에 추가합니다.

var HelloWorldPlugin = require('hello-world');

module.exports = {
  // ... configuration settings here ...
  plugins: [new HelloWorldPlugin({ options: true })]
};

이것은 주로 웹 패키지가 엔진 뚜껑에 있는 기능을 포함한다.응용 프로그램을 처리할 때 여러 가지 방법을 사용할 수 있다.

어떻게 엔진 뚜껑 아래에 웹 패키지를 설치합니까?

이 절에서 우리는 웹 패키지의 체계 구조가 무엇인지, 그리고 그것이 시스템 귀속기로서 어떻게 작동하는지 토론할 것이다.이 점을 이해하기 위해서 우리는 한 문제부터 시작할 것이다. "녹화할 수 있는 것은 무엇입니까?"

녹음 가능

그것은 플러그인 시스템의 주간이다.이것은 코드를 기존 클래스와 혼합하고, 예를 들어 apply plugins parallel이나 apply plugins async 등 기존 함수를 이용하여 노드 이벤트 발사기와 같은 탐지 중인 이벤트를 보낼 수 있도록 합니다.예를 들어, 간단한 기본 플러그인 설명은 다음과 같습니다.

class BasicPlugin {
    apply(compiler) {
        compiler.apply('make', (compilation) => {
            console.log('I now have access to the compilation!!!!!!');
        });
    }
}

module.exports = BasicPlugin;

Tapable 실례는 클래스/대상입니다. Tapable와 삽입할 수 있는 것들을 확장합니다.웹 패키지를 담당하는 클릭 가능한 실례가 있습니다.

컴파일러 - 중앙 스케줄러입니다. 웹 패키지가 실행되거나 완성되거나 노출될 때 발생하는 최고급 이벤트를 나타냅니다.

컴파일링 - 의존도 알고리즘을 만들고 실행하여 웹 페이지 뒤에 있는 두뇌를 충당하여 컴파일링 과정에서 무엇을 하고 무슨 일이 일어나는지 이해한다.

해상도 - 용어의 정확성을 증명하기 위해 사용하는 작업입니다. 이것은 주로 파일과 의존 항목을 찾는 데 도움을 줍니다. 예를 들어 index.js 일부 경로나 다른 의존 항목을 사용하여 가져오는 것을 지정하고 해상도는 일부 파일 경로에서 의존 관계도를 가져오고 구축하는 정보에서 파일을 찾는 데 도움을 줍니다.

모듈 공장 - 해결된 요청을 받아들여 이 파일의 원본을 수집하고 모듈 대상으로 돌아간다.

해상도 - 원시 소스 코드를AST로 변환하여 쉽게 훑어볼 수 있습니다.이것은 우선 모든 Require를 찾은 다음 의존항 대상을 가져오고 만듭니다.

템플릿 - 모듈에 데이터를 귀속시키고 패키지에서 볼 수 있는 코드를 만듭니다.

전체 과정을 총결하다.
Webpack은 입구점을 먼저 읽은 다음 파서를 통해 존재 여부를 확인합니다.이후, 그것은 우리의 일반 모듈 대상을 통과할 것이며, 이 대상은 해상도를 통과할 것이다.해석기가 의존항 유형을 식별하면, 자바스크립트 모듈이 아니면 로더에게 전달하고, 자바스크립트 모듈이면 의존항만 수집하여 모듈에 추가합니다.그리고 모듈에 존재하는 의존 관계를 다시 한 번 검사하여 해석기에 전달하고 완전한 의존 관계도를 구축할 때까지 전체 순환을 반복해야 한다.
이것들이 있으면, 너는 이 웹 페이지가 어떻게 내부에서 일하는지 알게 될 것이다.😁 💃
다음 글은 크롬 확장을 구축할 때 직면하는 문제를 해결하기 위해 첫 번째 패키지 플러그인을 만드는 방법을 소개할 것입니다.
즐겁게 읽으세요!📖