Webpack

웹팩은 모듈 번들러 중 최신 프론트엔드에서 가장 많이 사용

하나의 시작점(entry point)으로부터 연결되어 었는 모든 모듈을 하나로 합쳐서 결과물을 만들어냄

• 자바스크립트 모듈 뿐만 아니라 스타일시트, 이미지 파일까지도 모듈로 제공해 주기 때문에 일관된 개발 가능

Webpack속성

entry

웹팩에서 웹 자원을 변환하기 위해 필요한 최초의 진입점이자 자바스크립트 파일 경로

• index.js에서 시작하여 import 문을 따라 빌드 진행

output

번들링된 파일들을 저장할 위치, 일반적으로 dist, build라는 이름의 폴더를 사용

• path, filename 옵션을 통해 위치 및 파일이름 지정 가능
• 이미지나 파일 같은 외부 리소스를 로드할 경우 publicPath 지정 필요

  • publicPath : prefix 개념으로, webpack.config.js에 설정한 주소가 실제 배포되는 주소 앞에 설정됨

    // publicPath: /assets/
    
    src="picture.jpg" // => /assets/picture.jpg
    

resolve

이 옵션을 통해 모듈을 해석하는 방식을 변경할 수 있음

• alias 옵션 사용 시 특정 모듈의 별칭 지정 가능

loader