[JavaScript] Webpack - 기본구조

Webpack

Webpack이 바라보는 Module

• 1. js
• 2. sass
• 3. hbs
• 4. jpg, png
• ...

Bundle을 통한 하나의 js

ex)
index.js + bar.js -> dist/bundle.js 로 보이지만
index.js + bar.js -> index.js <- bar.js 이런식으로
즉, 모듈들의 의존성을 안전하게 유지시키면서 하나의 파일로 만드는 과정입니다.

Webpack의 기본구조 (Entry, Output)

• Entry : 모듈의 의존 관계를 이해하기 위한 시작점을 설정
  예를 들어, Module A는 Module B에 참조하고, Module A도 Module C에 참조합니다. 그렇게 되면 Module B,C와 A는 의존관계에 있다고 생각할 수 있습니다. Webpack은 모듈들의 의존 관계를 해석한 후에 의존성 그래프를 만들어 모듈들을 해석하고 Bundling을 하는 과정을 진행한다.