>  기사  >  webpack의 패키징 원리는 무엇입니까?

webpack의 패키징 원리는 무엇입니까?

coldplay.xixi
coldplay.xixi원래의
2020-10-29 16:03:479337검색

웹팩 패키징 원칙은 파일 간의 종속성을 정적으로 분석한 다음 지정된 규칙에 따라 이러한 모듈에서 정적 리소스를 생성하는 것입니다. 웹팩은 프로그램을 처리할 때 각 모듈에 필요한 애플리케이션을 포함하는 종속성 그래프를 반복적으로 구축합니다. 그런 다음 이러한 모든 모듈을 번들로 패키징합니다.

webpack의 패키징 원리는 무엇입니까?

은 파일 간의 종속성을 기반으로 정적으로 분석된 다음 이러한 모듈은 지정된 규칙에 따라 정적 리소스를 생성합니다. webpack이 프로그램을 처리할 때 종속성 그래프가 반복적으로 구성됩니다. 애플리케이션 요구 사항을 파악한 다음 이러한 모든 모듈을 하나 이상의 번들로 패키징합니다.

Webpack은 단지 모듈 패키징을 위한 메커니즘일 뿐입니다. 종속 모듈을 이러한 패키지를 나타낼 수 있는 정적 파일로 변환할 뿐입니다. commonjs나 amd와 같은 모듈식 사양이 아닙니다. webpack은 항목 파일을 식별합니다. 코드를 패키징하기 위한 모듈 종속성을 식별하세요.

귀하의 코드가 commonjs, amd 또는 es6 가져오기를 사용하는지 여부. webpack이 이를 분석할 것입니다. 코드의 종속성을 얻으려면.

webpack이 하는 일은 코드를 분석하는 것입니다. 코드를 변환하고, 코드를 컴파일하고, 코드를 출력합니다. Webpack 자체가 노드의 모듈이므로 webpack.config.js는 commonjs 형식으로 작성됩니다. (노드의 모듈화는 commonjs로 표준화됩니다.)

webpack의 각 모듈은 고유 ID를 가지며 0부터 증가합니다. 패키지된 전체 Bundle.js는 자체적으로 실행되는 익명 함수입니다. 매개변수는 배열입니다. 배열의 각 항목은 함수입니다. 기능의 내용은 각 모듈의 내용이며, 필요한 순서대로 나열되어 있습니다.

webpack의 패키징 원리는 무엇입니까?

확장 정보:

webpack 핵심 개념:

1. Entry

진입점은 내부 종속성 그래프 작성의 시작으로 사용해야 하는 모듈 webpack을 나타냅니다. 진입점을 입력한 후 webpack은 진입점이 어떤 모듈과 라이브러리에 의존하는지(직간접적으로) 알아냅니다. 그러면 각 종속성이 처리되어 번들이라는 파일로 출력됩니다.

2. Output

출력 속성은 webpack이 생성한 번들을 출력할 위치와 이러한 파일의 이름을 지정하는 방법을 알려줍니다. 기본값은 ./dist입니다. 기본적으로 전체 애플리케이션 구조는 지정된 출력 경로의 폴더로 컴파일됩니다.

3. Module

Module, Webpack의 모든 것은 모듈이며, 모듈은 파일에 해당합니다. Webpack은 구성된 항목에서 시작하여 모든 종속 모듈을 반복적으로 찾습니다.

4. 청크

코드 블록은 여러 모듈로 구성되며 코드 병합 및 분할에 사용됩니다.

5. Loader

loader를 사용하면 webpack이 JavaScript가 아닌 파일을 처리할 수 있습니다(webpack 자체는 JavaScript만 이해합니다).

loader는 모든 유형의 파일을 webpack이 처리할 수 있는 유효한 모듈로 변환할 수 있으며, 그런 다음 webpack의 패키징 기능을 사용하여 이를 처리할 수 있습니다.

기본적으로 웹팩 로더는 모든 유형의 파일을 애플리케이션의 종속성 그래프(그리고 최종적으로는 번들)에서 직접 참조할 수 있는 모듈로 변환합니다.

위 내용은 webpack의 패키징 원리는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.