Glossary

이 색인은 webpack 생태계 전체에서 사용되는 일반적인 용어를 나열합니다.

A

• Asset(애셋): 일반적으로 웹사이트 및 기타 응용프로그램에서 사용되는 이미지, 폰트, 미디어 및 기타 모든 종류의 파일을 말합니다. 이러한 파일은 output 내에서 개별 파일로 처리되지만 style-loader 또는 url-loader과 같은 파일을 통해 인라인화 할 수도 있습니다.

B

• Bundle(번들): 여러 개별 모듈에서 생성된 번들에는 이미 로드와 컴파일 프로세스를 거친 소스 파일의 최종 버전이 포함되어 있습니다.
• Bundle Splitting(번들 분할): 이 프로세스는 빌드를 최적화하는 한 가지 방법을 제공하여 webpack이 단일 애플리케이션에 대해 여러 번들을 생성할 수 있게 합니다. 결과적으로 각 번들은 다른 번들에 영향을 주는 변경 사항으로부터 격리 될 수 있으므로 다시 게시해야 하는 코드의 양과 클라이언트에서 브라우저 캐싱의 장점을 활용하여 다시 다운로드 해야 하는 코드의 양을 줄일 수 있습니다.

C

• Chunk(청크) : webpack의 특정 용어는 번들링 프로세스를 관리하기 위해 내부적으로 사용됩니다. 번들은 여러 유형(예: 항목 및 하위)이 있는 청크로 구성됩니다. 일반적으로, 청크는 출력 번들과 직접적으로 일치하지만 일대일 관계를 생성하지 않는 일부 설정이 있습니다.
• Code Splitting(코드 스플리팅): 모든 것을 포함하는 단일 번들을 로드하는 대신 요청시 로드 할 수있는 다양한 번들/청크하여 코드를 분할하는 것을 말합니다.
• Configuration(설정): webpack 설정 파일은 객체를 내보내는 오래된 일반 JavaScript 파일입니다. 이 객체는 정의 된 속성을 기반으로 webpack에 의해 처리됩니다.

D

• Dependency Graph(디펜던시 그래프): 하나의 파일이 다른 파일에 의존 할 때마다 webpack은 의존성으로 취급합니다. 엔트리 포인트에서 시작하여 webpack은 애플리케이션에 필요한 모든 모듈/애셋을 포함하는 디펜던시 그래프를 재귀적으로 작성합니다.

E

• Entry Point(엔트리 포인트): 엔트리 포인트는 시작할 위치를 webpack에 알려주고 번들 항목을 알기 위해 디펜던시 그래프를 따릅니다. 애플리케이션의 엔트리 포인트를 번들로 묶으려는 문맥적인 루트로 생각할 수 있습니다.

H

• Hot Module Replacement (HMR): 전체 페이지를 다시 로드하지 않고, 애플리케이션이 실행되는 동안 modules을 교환, 추가 혹은 제거하는 프로세스 입니다.

L

• Loaders(로더): 모듈의 소스 코드에 적용되는 변환입니다. 파일을 require() 또는 "로드" 할 때 파일을 사전 처리 할 수 있습니다. '작업 실행자(task-runner)'와 유사합니다.
• Lazy Loading(지연 로딩): 애플리케이션의 일부분(청크)을 느리게 로드하는 프로세스 입니다.

M

• Module(모듈): 전체 프로그램보다 더 작은 표면적을 제공하는 기능의 개별 청크입니다. 잘 작성된 모듈은 일관성 있는 설계와 명확한 목적을 설정하는 견고한 추상화 및 캡슐화 경계를 제공합니다.
• Module Resolution(모듈 해석): 모듈은 다른 모듈의 의존성으로 필요할 수 있으며, 리졸버는 절대 경로로 모듈을 찾는데 도움이 되는 라이브러리입니다. 모듈은 resolve.modules에 지정된 모든 디렉터리 내에서 검색됩니다.
• Manifest(메니페스트): 런타임은 메니페스트를 사용하여 모듈이 번들되고 브라우저에 제공되면 모듈을 확인하고 로드합니다.

O

• Output: 컴파일 된 파일을 디스크로 출력 할 위치를 지정하는 옵션입니다.

  주의, 여러 진입 점이 있을 수 있지만 하나의 출력 설정만 지정됩니다.

P

• Plugin(플러그인): apply 속성을 갖고 있는 JavaScript 객체. 이 apply 속성은 webpack 컴파일러에 의해 호출되어 전체 컴파일 수명주기에 대한 엑세스를 제공합니다. 이러한 패키지는 일반적으로 한가지 혹은 다른 방식으로 컴파일 기능을 확장합니다.

R

• Request(요청): require/import 구문의 표현식을 참조하면, 예를들어 require("./template/" + name + ".ejs") 요청은 "./template/" + name + ".ejs" 구문이 됩니다.

S

• Scaffolding: 이 기능을 사용하면 사용자 지정 가능한 타사 초기화 패키지를 사용하여 webpack 설정을 만들 수 있습니다.
• Shimming: 모든 JS 파일을 webpack에서 직접 사용할 수 있는 것은 아닙니다. 파일이 지원되지 않는 모듈 형식이거나 모듈 형식이 아닐 수도 있습니다. 이럴때 shimming이 사용됩니다.

T

• Target(대상): 브라우저, NodeJS, Electron과 같은 특정 환경에 맞게 컴파일하기 위해 사용자가 설정한 배포 대상이 여기에 나열 되어 있습니다.
• Tree Shaking(트리 쉐이킹): 미사용 및 초과 코드 제거 또는 보다 정확하게 라이브 코드 가져오기. webpack과 같은 컴파일러는 다양한 종류의 import문과 가져온 코드의 사용을 분석하여 실제로 활용되고 있는 의존성 부분을 결정하고 그렇지 않은 "트리" 부분을 삭제함으로써 이를 수행합니다.

V

• Vendor Entry Point(Vendor 엔트리 포인트): app.js 와 vendors.js 모두에서 시작하는 디펜던시 그래프를 만듭니다. 이러한 그래프는 CommonsChunkPlugin을 활용할 수 있도록 서로 완전히 분리되고 독립적이며, 앱 번들에서 벤더 참조사항을 추출하여 벤더 번들로 가져옵니다. 장기 벤더 캐싱(vendor-caching)으로 알려진 webpack의 공통 모듈 패턴을 달성하도록 지원합니다.

W

• webpack: 모던 JavaScript 애플리케이션을 위한 고도로 설정 가능한 모듈 번들러.