웹팩

• 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, Images등)을 모두 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구, 즉 모듈 번들러

모듈이란

• 특정 기능을 갖는 작은 코드 단위
• 웹팩에서 모듈은 웹을 구성하는 모든 자원들

모듈 번들링이란

• 여러 자원을 하나의 파일로 병합 및 압축해주는 동작을 뜻함
• 빌드, 번들링, 변환 모두 동일한 의미

웹팩의 등장 배경

• 파일 단위 js 모듈 관리 필요성 -> 파일 단위로 변수를 관리하고 싶음
• 웹 개발 작업 자동화 도구 -> Gulp 등 자동화 도구 등장
• 웹 애플리케이션의 빠른 로딩 속도와 높은 성능 -> 필요한 자원을 미리 로딩하는 것이 아니라 필요할 떄 요청하자

즉 js 변수 유효범위, 브라우저별 HTTP 요청 숫자의 제약, 사용하지 않는 코드의 관리, Lazy Loading 미지원 등의 문제를 해결하기 위해 웹팩이 등장함

Node.js와 NPM

Node.js란

• 브라우저 밖에서도 js가 실행할 수 있는 환경
• Node.js의 등장으로 브라우저 밖에서도 js 실행 가능해짐

NPM

js 라이브러리 관리 매니저

참고 : https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html