📦 webpack은 무엇인가?

📌 여는 말

webpack.. webpa..ck.. 대강 모듈을 묶어주는 역할을 하는 프레임워크인 것만 알고 자세히는 모르기 때문에 기록하기!

(1) webpack이란?

webpack은 여러가지 파일을 하나의 파일(번들)로 묶어주는 모듈 번들러이다.
HTML, CSS, JS, Image 등 파일의 의존성 관계를 파악하여 압축해주는 작업이 모듈 번들링이다.

webpack의 장점은? 🤔

• 로딩 속도 개선
• 웹페이지를 새로고침하지 않아도 변경 사항 즉시 반영 가능
• 파일 변경 시, 자동으로 번들링
• 코드를 분할하여, 초기 로딩 속도 개선 = SPA 개선 방안인 Code Splitting
• 필요한 코드만 로딩하여 사용자 경험 향상

---

(2) webpack 핵심 개념

> npx webpack --help을 통해 옵션의 쓰임을 알아보자.

⭐ Entry

—-entry <value...>
Entry는 모듈의 시작점이다.
위의 명령어로 모듈의 시작점을 설정할 수 있으며 Entry point가 직,간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낸다.

⭐ Output

-o, --output-path <value>
모든 모듈을 하나로 합쳐서 저장하는 경로를 설정한다.
즉, 웹팩으로 생성되는 파일의 위치를 설정한다.

⭐ Loaders

모듈의 소스 코드에 변경 사항을 적용하는 역할을 한다.

(+) 웹팩은 JS로 만든 모듈 뿐 아니라, CSS, HTML, Image등 모든 것을 모듈처럼 다룰 수 있다. 이것을 가능하게 만들어주는 것이 로더이다. 즉, 모든 자원을 모듈로 불러오는 것이다.

⭐ Plugins

로더가 수행할 수 없는 다양한 기능을 수행한다.

다시 말하자면, 로더가 파일(모듈) 단위로 기능을 처리하는 반면, 플러그인은 최종적으로 번들된 결과물을 가공할 때 사용한다.

---