Webpack 프레임워크 사용 요약

이번에는 Webpack 프레임워크 사용에 대한 요약을 가져오겠습니다. Webpack 프레임워크 사용 시 주의사항은 무엇인가요?

웹팩이란

Webpack은 JS(JSX 포함), CSS(less/sass 포함), 이미지 등 다양한 리소스를 모듈로 처리하고 사용할 수 있는 프런트엔드 패키징 도구입니다.

1. 기본 지식 포인트

1.1 webpack은 최신 JavaScript 애플리케이션을 위한 모듈 번들러입니다. 웹팩을 할 때 애플리케이션이 처리됨에 따라 종속성 그래프가 반복적으로 작성됩니다. 그래프)에는 애플리케이션에 필요한 모든 모듈이 포함되어 있으며 이러한 모든 모듈을 하나 이상의 번들로 패키징합니다.

1.2 webpack의 네 가지 핵심 개념:

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

라는 파일로 출력합니다. 1.2.2 출력(output): 진입점에서 처리되는 번들 파일의 출력 경로(path)와 이름(filename)을 지정합니다. )    

1.2.3 로더: JS가 아닌 파일을 처리하는 데 사용됩니다. 모든 파일을 웹팩이 처리할 수 있는 모듈로 변환한 다음 패키징 및 기타 처리를 위해 웹팩에 전달할 수 있습니다. 로더는 기본적으로 모든 유형의 파일을 애플리케이션의 종속성 그래프에서 직접 참조할 수 있는 모듈로 변환합니다. 여기에는 두 가지 목표가 있습니다.

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

1.2 .3.2 속성을 사용하여 이러한 파일을 변환하여 종속성 그래프에 추가되고 결국 번들에 추가되도록

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

1.2.4 플러그인 대신 module.rules에서 정의하세요. 패키징 최적화 및 압축부터 환경 변수 재정의까지. 플러그인 인터페이스는 매우 강력하며 다양한 작업을 처리할 수 있습니다. 플러그인을 사용하려면 플러그인을 require()한 다음 플러그인 배열에 추가하기만 하면 됩니다. 대부분의 플러그인은 옵션을 통해 사용자 정의할 수 있습니다.

구성 파일

에서 동일한 플러그인을 다양한 목적으로 여러 번 사용할 수도 있습니다. 이 경우 새로운 연산자를 사용하여 해당 플러그인의 인스턴스를 만들어야 합니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue-cli+webpack vue 개발 환경 구축 방법

vue2-webpack2 프레임워크 구축 방법

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