webpack

 

wepback GUIDE

webpack.js.org/guides/getting-started/

 

---

1. webpack

1-1) webpack의 기본 취지

'애플리케이션 동작과 관련된 여러개의 파일(HTML, CSS, JavaScript, 이미지 등)들을 1개의 자바스크립트 파일 안에 다 넣어 버리고, 해당 자바스크립트 파일만 로딩해도 웹 앱이 돌아가게 하자'

 

1-2) webpack의 주요 속성

속성	설명
entry	웹펙으로 빌드(변환)로 빌드(변환)할 대상 파일을 지정하는 속성 entry로 지정한 파일의 내용에는 전체 애플리케이션 로직과 필요 라이브러리를 로딩하는 로직이 들어간다.
output	웹펙으로 빌드한 결과물의 위치와 파일 이름 등 세부 옵션을 설정하는 속성
loader	웹펙으로 빌드할 때 HTML, CSS, PNG 파일 등을 자바스크립트로 변환하기 위해 필요한 설정을 정의하는 속성
plugin	웹펙으로 빌드하고 나온 결과물에 대해 추가 기능을 제공하는 속성
resolve	웹펙으로 빌드할 때 해당 파일이 어떻게 해석되는지 정의하는 속성