웹팩이란?
모듈 번들러
html, css, js, image등을 각각의 모듈로 보고 조합해서 병합된 하나의 결과물을 만드는 도구
모듈이란?
비슷한 성격의 기능들을 하나의 의미 있는 파일로 관리
html모듈, css모듈, js모듈....
웹팩이 필요한 이유?
- 기능별로 js 파일을 나누고 html에서 js를 불러와서 사용할 때, 의도치않게 변수들이 겹쳐서 문제가 발생할 수 있다.
파일단위로 변수를 관리할 수 있게 하여 이런 문제를 해결
- 배포시 압축 작업들을 자동화
- 서비스가 복잡해지면서 속도의 중요성이 대두, 웹팩을 사용하여, 최소통신으로 필요한 파일만 로딩
node.js 는 사실 그냥 자바스크립트를 실행시킬 수 있는 엔진,
브라우저가 갖고있는 엔진을 브라우저 밖에서도 실행 시킬 수 있도록 만든 환경
npm : Node Package Manager
라이브러리들을 설치하고 관리할 수 있는 패키지 매니저 -> package.json으로 버전관리
웹팩 사용법
(라이브러리 설치)
npm i webpack webpack-cli -D
npm i lodash
(빌드 명령어)
npm build = webpack --mode-none
(컨피그 수정)
webpack.config.js
웹팩 속성
entry : 웹팩에서 빌드하기 위한 최초 진입점
index.js -> 서비스의 전반적 구조와 내용, 모듈의 연관성 분석하기 위해
output : 빌드하고 난 결과물의 경로
loader : js를 제외한 웹자원(html, css, image, 폰트 등)을 변환할 수 있도록 도와주는 속성
css loader, ts loader, bable loader 등 변환해주는 로더 별도 설치 및 설정 필요
plugin : 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성, (진행률 표시 등 부가적기능)