Webpack 프레임워크(마스터 핵심 기술)

webpack은 최신 JavaScript 애플리케이션을 위한 모듈 번들러입니다. 이 글은 Webpack 프레임워크의 핵심 개념(지식 정리)을 주로 소개합니다. 필요한 친구들은

Webpack이란 무엇입니까?

webpack은 프론트엔드 구축 패키징 도구입니다(라이브러리나 프레임워크가 아닙니다). ) JS(JSX 포함), 커피, CSS(less/sass 포함), 이미지 등 다양한 리소스를 모듈로 처리하여 사용할 수 있습니다.

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/를 참조하세요.

위 내용은 제가 정리한 내용입니다. 모두에게 도움이 되었으면 좋겠습니다

관련 글:

JS에서 마우스 효과에 따른 교차 좌표 구현 방법

Angular4 사용 시 안전하지 않은 이미지 경로 문제

Webpack에서 Electron 애플리케이션을 구축하는 방법

Webpack의 최적화 구성 문제에 대하여

jQuery에서 목록에 동적으로 추가하는 방법

jQuery에서 온라인 고객 서비스 기능을 구현하는 방법

Vue에서 진입/퇴장 애니메이션 구현

node.js의 라우팅 및 미들웨어에 대한 자세한 소개

Angular를 사용하여 기본 장바구니 기능을 구현하는 방법

제어되는 구성 요소와 제어되지 않는 구성 요소에 대한 자세한 소개 React Control 구성 요소에서

vue를 사용하여 간단한 키보드 작업 구현

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