Webpack 프레임워크의 핵심 개념에 대한 자세한 설명

Webpack은 JS(JSX 포함), CSS(less/sass 포함), 이미지 등 다양한 리소스를 모듈로 처리할 수 있는 프론트엔드 패키징 도구입니다. . 이 글은 Webpack 프레임워크의 핵심 개념을 주로 소개합니다(지식 포인트 정리). 도움이 필요한 친구들이 참고할 수 있으면 좋겠습니다.

1. 기본 지식 포인트

　　1.1 webpack은 최신 JavaScript 애플리케이션을 위한 모듈 번들러입니다. webpack은 애플리케이션을 처리할 때 애플리케이션에 필요한 모든 모듈을 포함하는 종속성 그래프를 반복적으로 구축한 다음 이러한 모든 모듈을 하나 이상의 번들로 패키징합니다.

　1.2 webpack의 네 가지 핵심 개념:

　　1.2.1 항목: 진입점, 항목 시작점(여러 개가 있을 수 있음), webpack은 이 시작점부터 시작하여 항목 파일이 어떤 파일에 의존하는지 알아냅니다. 내부 종속성 그래프가 구성되어 처리되어 Bundles

　　1.2.2라는 파일로 출력됩니다. 출력(output): 진입점　

　　1.2에서 처리되는 번들 파일의 출력 경로(path)와 이름(filename)을 지정합니다. 3 로더(loader): JS가 아닌 파일을 처리하는 데 사용되며 모든 파일을 webpack이 처리할 수 있는 모듈로 변환한 다음 패키징 및 기타 처리를 위해 webpack에 넘겨줄 수 있습니다. webpack 로더는 기본적으로 모든 유형의 파일을 변환합니다. 애플리케이션의 종속성 그래프에서 직접 참조할 수 있는 모듈입니다. 두 가지 목표가 있습니다.

　　1.2.3.1 test 속성을 사용하여 로더에 해당하는 변환 가능한 파일을 식별합니다.

　　1.2.3.2 use 속성을 사용하여 이러한 파일을 변환합니다. 종속성 그래프에 추가되고 결국 번들에 추가됩니다

　　　웹팩 구성에서 로더를 정의하려면 rule

　　1.2.4 플러그인(플러그인) 대신 module.rules에서 정의하세요. 패키징 최적화 및 압축부터 환경 변수 재정의까지. 플러그인 인터페이스는 매우 강력하며 다양한 작업을 처리할 수 있습니다

　　플러그인을 사용하려면 해당 플러그인을 require()한 다음 플러그인 배열에 추가하기만 하면 됩니다. 대부분의 플러그인은 옵션을 통해 사용자 정의할 수 있습니다. 구성 파일에서 다양한 목적으로 동일한 플러그인을 여러 번 사용할 수도 있습니다. 이 경우 new 연산자를 사용하여 해당 플러그인의 인스턴스를 생성해야 합니다.

　　 Webpack은 즉시 사용할 수 있는 다양한 플러그인을 제공합니다! 자세한 내용은 플러그인 목록을 확인하세요. 자세한 사진과 텍스트는 공식 문서 https://doc.webpack-china.org/concepts/를 참조하세요.

관련 권장 사항:

webpack+express 다중 페이지 사이트 개발 예제에 대한 자세한 설명

Electron 빌드 React, Webpack 데스크톱 애플리케이션 튜토리얼

webpack 학습 튜토리얼 프론트엔드 성능 최적화 요약

위 내용은 Webpack 프레임워크의 핵심 개념에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!