[JS]웹팩(webpack)이란?

프로젝트를 진행하다보니 웹팩에 대한 내용이 나와 간단히 정리해본다. Next.js에 기본 내장되어 있다고 하는데 정확한 사용법까지는 몰라도 왜 쓰는지와 기능 정도는 알아두려한다. 간략하게 요약하면 여러개 나뉘어 있는 파일을 하나로 모아주고 압축해주는데 이 과정에서 에러처리, 압축처리 등 기존에 번거로운 작업을 자동화 시켜주는 도구로 보인다.

웹팩(webpack)

---

• 오픈소스 자바스크립트 모듈 번들러
• 모듈 번들러 : html, css, 자바스크립트 등의 파일을 하나의 모듈로 보고 이를 조합해서 하나의 결과물을 만드는 도구(빌드, 번들링, 변환 비슷한 뜻)
• 모듈 : 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위

필요이유

• 파일 단위 자바스크립트 모듈 관리: 변수 유효 범위 등으로 큰 단위 작업시 오류 발생 가능
• 웹 개발 작업 자동화(HTML, CSS, JS 압축, 이미지 압축, CSS 전처리기 변환)
• 웹 애플리케이션의 빠른 로딩 속도와 높은 성능(파일들을 압축하고 병합, 레이지 로딩)
• 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학